19three.js相机控制器

最新推荐文章于 2025-06-03 23:37:52 发布

X01动力装甲

最新推荐文章于 2025-06-03 23:37:52 发布

阅读量749

点赞数 1

CC 4.0 BY-SA版权

分类专栏： three.js webgl 文章标签： three.js

本文为博主原创文章，未经作者允许禁止任何形式的转载。

本文链接：https://blog.csdn.net/lin5165352/article/details/81571905

three.js 同时被 2 个专栏收录

114 篇文章

订阅专栏

webgl

36 篇文章

订阅专栏

本文详细介绍了3D场景中常用的交互控制器，如轨迹球控制器TrackballControls、轨道控制器OrbitControls等，并提供了使用示例代码，强调了在动画更新过程中正确使用delta的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

轨迹球控制器 TrackballControls。
非常常用。
轨道控制器 Orbit Controls
这个和轨迹球控制器类似。用的最多，可以设置上下旋转的角度（-90~90）。
翻滚控制器
飞行控制器
第一视角控制器
MapControls

写控制器的时候有时候会这样写controls.update(clock.getDelta())，结果场景有多个动画需要更新的时候出现了意想不到的错误。
正确的方法是：渲染之前定义delta。不能在用的时候再次获取时间。和var width = window.innerWidth不一样，这个在更新的时候也需要更新，不能直接写width，否者不行。

function render() {
var delta = clock.getDelta();
requestAnimationFrame(render);
controls.update(delta); //要统一定义delta。
//camera.lookAt(new THREE.Vector3(0,8,0)); // 使用控制器就不能用这个功能
mixers[ i ].update（delta ); //不能再次获取clock.getDelta()
renderer.render(scene,camera);
}

camera.lookAt 函数在使用了相机控制器平移功能之后会有影响，互相干扰。建议不用。

controls = new OrbitControls(camera, renderer.domElement);renderer.domElement要写上，不然在使用dat.gui控件的时候，会干扰。拖动控件，也会旋转相机。

MapControls

controls = new THREE.MapControls(camera, renderer.domElement);
            controls.enableDamping = true; //阻尼需要更新
            controls.dampingFactor = 0.25; //阻尼系数
            controls.screenSpacePanning = true; // y轴移动
            controls.minDistance = 100;
            controls.maxDistance = 500;
            controls.enableZoom = true; 缩放
            controls.zoomSpeed = 2.0; 缩放速度
            // controls.maxPolarAngle = 0;
            // controls.minPolarAngle = 0;
            controls.enableRotate = false; 右键旋转