加载.gltf文件

加载外部三维模型的整个过程：

// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

// 创建GLTF加载器对象
const loader = new GLTFLoader();

loader.load( 'gltf模型.gltf', function ( gltf ) {
  console.log('gltf对象场景属性',gltf.scene);
  // 返回的场景对象gltf.scene插入到threejs场景中
  scene.add( gltf.scene );
})

场景属性gltf.scene,该属性包含的是模型信息，比如几何体BufferGometry、材质Material、网格模型Mesh。

设置相机

camera.position.set(200, 200, 200);

注意相机控件OrbitControls会影响lookAt设置，注意手动设置OrbitControls的目标参数

camera.lookAt(100, 0, 0);
// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 相机控件.target属性在OrbitControls.js内部表示相机目标观察点，默认0,0,0
controls.target.set(100, 0, 0);
controls.update();//update()函数内会执行camera.lookAt(controls.targe)

测量尺寸大概几百的数量级，这里不用测具体尺寸，有个大概数量级即可，然后far设置为3000足够了。

const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);

OrbitControls辅助设置相机参数

参照OrbitControls设置相机位置.position的过程，你可以平移三维场景，然后选择一个合适的渲染效果, camera.position.set(); 记录下此时相机控件目标属性controls.target的值，然后作为透视投影相机.lookAt()的参数。

function render() {
  requestAnimationFrame(render);
  // 浏览器控制台查看相机位置变化
  console.log('camera.position',camera.position);

  // 浏览器控制台查看controls.target变化，辅助设置lookAt参数
  console.log('controls.target',controls.target);
}
render();

解决共享材质问题

1. 三维建模软件中设置，需要代码改变材质的Mesh不要共享材质，要独享材质。
2. 代码批量更改：克隆材质对象，重新赋值给mesh的材质属性

//用代码方式解决mesh共享材质问题
gltf.scene.getObjectByName("小区房子").traverse(function (obj) {
    if (obj.isMesh) {
        // .material.clone()返回一个新材质对象，和原来一样，重新赋值给.material属性
        obj.material = obj.material.clone();
    }
});

更改gltf贴图

注意：如果你直接给gltf模型材质设置.map属性更换贴图，会出现纹理贴图错位的问题，这主要和纹理对象Texture的翻转属性.flipY有关

loader.load("../手机模型.glb", function (gltf) {
  const mesh = gltf.scene.children[0]; //获取Mesh
  mesh.material.map = texture; //更换不同风格的颜色贴图

  // 如果更换单独加载的纹理贴图，注意把纹理贴图.flipY的值设置给gltf中纹理的值false
  texture.flipY = false;
})