加载gltf场景.lookAt()设置

下面给大家讲解下，加载gltf场景时候,相机目标观察点的设置问题.lookAt()。

.lookAt()

你希望三维场景中哪个坐标点附近模型渲染到Canvas画布正中间，你就把该位置的坐标点xyz值作为.lookAt()的参数。

测试不同lookAt参数，渲染效果。

camera.lookAt(0,0,0);//指向世界坐标原点
camera.lookAt(-30,0,0);
camera.lookAt(30,0,0);

注意相机控件OrbitControls会影响lookAt设置,测试时候可以先把OrbitControls代码注释。

Blender标记模型位置

创建一个空物体标记三维场景模型位置。

创建一个空物体标记三维场景模型位置.jpg

OrbitControls影响lookAt()

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

设置相机控件OrbitControls.target，然后更新.update(),这时候camera.lookAt(30,0,0)不执行也可以，OrbitControls内部会执行。

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

OrbitControls改变相机.lookAt观察目标

通过OrbitControls平移，OrbitControls的.target属性会发生变化，.target属性对应的就是透视投影相机PerspectiveCamera的.lookAt观察目标`。

const controls = new OrbitControls(camera,renderer.domElement)
controls.addEventListener('change',function(){
    console.log('camera.position',camera.position);
})