threejs OrbitControls辅助设置相机参数 学习笔记

threejs yekong

OrbitControls改变相机位置.position

通过OrhitControl.旋转和缩放,本质上就是在改变透视投影桐机 PerspectiveCamera 的位置.position.

渲染循环中不停地打印相机的位置属性,你可以通过相机控件旋转或缩放三维场景,同时通过浏览器控制台观察相机位置变化。

function render() {
    renderer.render(scene, camera)
    // 请求再次执行函数render
    requestAnimationFrame(render)
    // 潮览器控制台查看相机位置变化
    console.log('camera.position', camera.position)
}

render()

OrbitControls 改变相机.LookAt 观察目标

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

通过设置并获取位置

function render() {
    // 请求再次执行函数render
    requestAnimationFrame(render)
    // 潮览器控制台查看相机位置变化
    console.log('controls.target', controls.target)
}

render()

设置位置

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement)
controls.target.set(1, 1, 1)
controls.update()
喜欢