用three.js构建3D地图应用的步骤、模型约束和坐标转换

// 引入Three.js库
import * as THREE from 'three';
 
// 创建场景
const scene = new THREE.Scene();
 
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 加载3D模型
const onModelLoad = (object) => {
  // 将模型的坐标系统转换为右手坐标系统
  object.traverse(function (child) {
    if (child.isMesh) {
      child.geometry.center();
    }
  });
 
  // 将模型添加到场景中
  scene.add(object);
 
  // 设置相机位置并对准场景中心
  camera.position.z = 5;
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.target.set(0, 0, 0);
  controls.update();
};
 
const loader = new THREE.GLTFLoader();
loader.load('path/to/your/model.glb', onModelLoad, (xhr) => {
  console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}, (error) => {
  console.error(error);
});
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
 
animate();

这段代码展示了如何使用Three.js加载一个GLB格式的3D模型，并将其添加到场景中。同时，代码中包含了将模型的坐标系统从模型原始坐标系统转换为Three.js使用的右手坐标系统的逻辑。最后，通过OrbitControls类提供的相机跟踪功能，用户可以绕模型的中心视图来查看场景。