极客观点
项目管理
HarmonyOS
threejs加载中国行政边界geojson，用Line实现，画线交错混乱
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three.js Scene</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "./build/three.module.js",
"three/addons/": "./examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import {china} from "http://116.196.110.130:5353/chinaBound.js"
import {OrbitControls} from 'three/addons/controls/OrbitControls.js'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
window.THREE = THREE
function getArcPoints(vec1, vec2, radius) {
// 计算两个向量之间的夹角
const angle = vec1.angleTo(vec2);
// 四等分角度
const theta1 = angle / 10;
// 计算四等分点的坐标
const points = [];
const axis = new THREE.Vector3().crossVectors(vec1, vec2).normalize();
for (let i = 1; i <= 9; i++) {
const newQuaternion = new THREE.Quaternion().setFromAxisAngle(axis, theta1 * i);
const newVec = vec1.clone().applyQuaternion(newQuaternion);
newVec.normalize().multiplyScalar(radius);
points.push(newVec);
}
return points;
}
function latLongToVector3(lat, lon, radius) {
const phi = (90 - lat) * (Math.PI / 180);
const theta = (lon + 180) * (Math.PI / 180);
const x = -(radius * Math.sin(phi) * Math.cos(theta));
const y = radius * Math.cos(phi);
const z = radius * Math.sin(phi) * Math.sin(theta);
return new THREE.Vector3(x, y, z);
}
// 创建场景
let flowingLineTexture
const scene = new THREE.Scene();
scene.background = new THREE.TextureLoader().load('./start.jpg')
// 创建相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 8000);
camera.position.set(-31.194504736429177, 125.39432756985642, -141.89889140580726);
window.camera = camera
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建蓝色网格
const gridHelper = new THREE.GridHelper(100, 100, 0x0000ff, 0x0000ff);
scene.add(gridHelper);
const light = new THREE.AmbientLight(0xffffff);
scene.add(light);
//添加地球和贴图
const addEarth = () => {
const geometry = new THREE.SphereGeometry(100, 64, 64);
const texture = new THREE.TextureLoader().load("./earth.jpg");
const material = new THREE.MeshLambertMaterial({
map: texture,
});
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);
}
//曲线
function initFlowingLine() {
flowingLineTexture = new THREE.TextureLoader().load('./123.jpg', function(tex) {
tex.needsUpdate = true
tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
tex.repeat.set(1, 1)
});
//创建纹理贴图材质
// let material = new THREE.MeshBasicMaterial({
// map: flowingLineTexture,
// side: THREE.DoubleSide, //显示背面
// transparent: true
// });
//创建线条路径
let points = []
console.log(china);
china.features[0].geometry.coordinates.forEach(element => {
element.forEach(item => {
item.forEach(site => {
debugger
points.push(latLongToVector3(site[1],site[0],100.2))
});
});
});
// 创建几何体和材质
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
// 使用LineSegments来绘制线条
const lineSegments = new THREE.LineSegments(geometry, material);
scene.add(lineSegments);
}
addEarth()
initFlowingLine()
// 渲染场景
function animate() {
controls.update();
renderer.render(scene, camera);
flowingLineTexture.offset.x -= 0.01;
flowingLineTexture.offset.y -= 0.01;
requestAnimationFrame(animate);
}
// 鼠标控制相机
const controls = new OrbitControls(camera, renderer.domElement);
// controls.zoomSpeed = 0.1
// controls.rotateSpeed = 0.1
animate();
// 键盘控制相机
document.addEventListener('keydown', (event) => {
switch (event.code) {
case 'ArrowUp':
camera.position.z -= 0.1;
break;
case 'ArrowDown':
camera.position.z += 0.1;
break;
case 'ArrowLeft':
camera.position.x -= 0.1;
break;
case 'ArrowRight':
camera.position.x += 0.1;
break;
}
});
</script>
</body>
</html>求告知方案和原因
