竖子、不足与谋!

114 阅读1分钟

关于controls控制器右键拖拽相机动画失去原点坐标的问题

/* 相机控件 */
const controls = new OrbitControls(camera, renderer.domElement)

/* 可选全局变量判断 */
if (v == '默认' || v == '墨右键双击退出') {
    gsap.to(camera.position, {
        x: 0,
        y: 200,
        z: 400,
        duration: 1,
        onStart: () => {
            controls.reset() // 将控制器重置为上次调用时的状态,或者初始状态。解决!
        },
        onUpdate: () => {
            camera.lookAt(model.position);
        },
    })                  
}

controls.update(); 会影响相机指向的问题!

原因:const controls = new OrbitControls(camera, renderer.domElement) 使用了camera 指向模型原点
暂无好的办法
  • 全局变量 (半解决)
controls.addEventListener('change', () => {
    timeRender()
    /* 相机指向 */
    store.contrCamerbol = true;  
    console.log('change', '处理鼠标事件',);
})

若函数中使用了controls.reset()重置相机    /* 相机指向变量 */ store.contrCamerbol = true; 需写在后面执行、因为会触发addEventListener('change')
  • 动态相机指向 (未尝试)
camera.lookAt(0, 0, 0);
  • 动态相机计算 TWEEN 17章
.onUpdate(function (obj) {
    // 动态改变相机位置
    camera.position.set(obj.x, obj.y, obj.z);
    // 动态计算相机视线
    controls.target.set(obj.tx, obj.ty, obj.tz);
    controls.update();
})
  • 究极解决
onUpdate: () => {
    camera.lookAt(fireLv3_pos)
    controls.target.set(fireLv3_pos.x,fireLv3_pos.y,fireLv3_pos.z);
    controls.update(); // 不要也可
},