学习threejs，使用RollControls相机控制器_three.js使用键盘控制相机视角
👨⚕️ 主页： gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏：threejs gis工程师
文章目录
一、🍀前言
本文详细介绍如何基于threejs在三维场景中使用RollControls相机控制器，亲测可用。希望能帮助到您。一起学习，加油！加油！
1.1 ☘️THREE.RollControls 相机控制器
RollControls是Three.js库中的一个相机控制器，专门用于实现相机的翻滚动作。
构造函数：
THREE.RollControls(object, domElement)
object：通常是一个THREE.Camera对象，表示要控制的相机。
domElement：（可选）用于事件监听的DOM元素。如果不提供，则默认使用整个文档作为事件监听范围。
属性：
.movementSpeed : Number
控制相机翻滚的移动速度。值越大，相机翻滚得越快。
.lookSpeed : Number
控制相机在翻滚时观察方向的变化速度。值越大，观察方向变化得越快。
keys : Object
一个对象，用于定义控制相机翻滚的键盘按键。开发者可以根据需要修改这个对象的属性来重新映射按键。
方法：
.update(delta) : undefined
delta：时间间隔，通常用于计算动画的帧率。
更新控制器的状态。这个方法应该在动画循环中被调用，以确保相机的翻滚动作能够实时响应输入。
.reset() : undefined
重置控制器的状态。这个方法可以用于将相机恢复到初始位置或清除之前的翻滚动作。
二、🍀使用RollControls相机控制器
1. ☘️实现思路
- 1、初始化renderer渲染器
- 2、初始化Scene三维场景scene
- 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
- 4、创建THREE.SpotLight聚光灯光源spotLight，设置spotLight的位置信息和光照强度，场景scene中添加spotLight。
- 5、加载几何模型：创建THREE.OBJMTLLoader加载器loader，loader调用load方法加载‘city.mtl’、‘city.obj’模型。在load回调函数中，设置建筑物网格对象材质颜色和非建筑网格对象材质透明度、放射（光）颜色等信息。具体代码参考代码样例。
- 6、加入THREE.RollControls相机控制器rollControls，设置rollControls相关参数。加入stats监控器，监控帧数信息。
2. ☘️代码样例
<!DOCTYPE html><html><head> <title>使用RollControls相机控制器</title> <script type=\"text/javascript\" src=\"../libs/three.js\"></script> <script type=\"text/javascript\" src=\"../libs/OBJLoader.js\"></script> <script type=\"text/javascript\" src=\"../libs/MTLLoader.js\"></script> <script type=\"text/javascript\" src=\"../libs/OBJMTLLoader.js\"></script> <script type=\"text/javascript\" src=\"../libs/stats.js\"></script
