当前位置：首页 > news >正文

学习threejs，使用OrbitControls相机控制器

news 来源：原创 2025/6/18 17:48:54

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️THREE.OrbitControls 相机控制器
二、🍀使用OrbitControls相机控制器
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用OrbitControls相机控制器，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.OrbitControls 相机控制器

RollControls是Three.js库中的一个相机控制器，是一个非常实用的控制器，它允许用户通过鼠标或触摸设备以轨道方式围绕一个中心点旋转、缩放和平移场景中的相机视角。这个控制器通常用于3D场景中的导航，使用户能够从不同的角度观察场景。

构造函数：
OrbitControls( object : Camera, domElement : HTMLDOMElement )
object: （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。
domElement: 用于事件监听的HTML元素。

属性：

.autoRotate : Boolean
将其设为true，以自动围绕目标旋转。
请注意，如果它被启用，你必须在你的动画循环里调用.update()。

.autoRotateSpeed : Float
当.autoRotate为true时，围绕目标旋转的速度将有多快，默认值为2.0，相当于在60fps时每旋转一周需要30秒。
请注意，如果.autoRotate被启用，你必须在你的动画循环里调用.update()。

.dampingFactor : Float
当.enableDamping设置为true的时候，阻尼惯性有多大。默认值为 0.05。

请注意，要使得这一值生效，你必须在你的动画循环里调用.update()。

.domElement : HTMLDOMElement
该 HTMLDOMElement 用于监听鼠标/触摸事件，该属性必须在构造函数中传入。在此处改变它将不会设置新的事件监听。

.enabled : Boolean
当设置为false时，控制器将不会响应用户的操作。默认值为true。

.enableDamping : Boolean
将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。默认值为false。
请注意，如果该值被启用，你将必须在你的动画循环里调用.update()。

.enablePan : Boolean
启用或禁用摄像机平移，默认为true。

.enableRotate : Boolean
启用或禁用摄像机水平或垂直旋转。默认值为true。

请注意，可以通过将polar angle或者azimuth angle 的min和max设置为相同的值来禁用单个轴，这将使得水平旋转或垂直旋转固定为所设置的值。

.enableZoom : Boolean
启用或禁用摄像机的缩放。

.keyPanSpeed : Float
当使用键盘按键的时候，相机平移的速度有多快。默认值为每次按下按键时平移7像素。

.keys : Object
这一对象包含了用于控制相机平移的按键代码的引用。默认值为4个箭头（方向）键。

controls.keys = {LEFT: 'ArrowLeft', //left arrowUP: 'ArrowUp', // up arrowRIGHT: 'ArrowRight', // right arrowBOTTOM: 'ArrowDown' // down arrow
}

.maxAzimuthAngle : Float
你能够水平旋转的角度上限。如果设置，其有效值范围为[-2 * Math.PI，2 * Math.PI]，且旋转角度的上限和下限差值小于2 * Math.PI。默认值为无穷大。

.maxDistance : Float
你能够将相机向外移动多少（仅适用于PerspectiveCamera），其默认值为Infinity。

.maxPolarAngle : Float
你能够垂直旋转的角度的上限，范围是0到Math.PI，其默认值为Math.PI。

.maxZoom : Float
你能够将相机缩小多少（仅适用于OrthographicCamera），其默认值为Infinity。

.minAzimuthAngle : Float
你能够水平旋转的角度下限。如果设置，其有效值范围为[-2 * Math.PI，2 * Math.PI]，且旋转角度的上限和下限差值小于2 * Math.PI。默认值为无穷大。

.minDistance : Float
你能够将相机向内移动多少（仅适用于PerspectiveCamera），其默认值为0。

.minPolarAngle : Float
你能够垂直旋转的角度的下限，范围是0到Math.PI，其默认值为0。

.minZoom : Float
你能够将相机放大多少（仅适用于OrthographicCamera），其默认值为0。

.mouseButtons : Object
该对象包含由控件所使用的鼠标操作的引用。

controls.mouseButtons = {LEFT: THREE.MOUSE.ROTATE,MIDDLE: THREE.MOUSE.DOLLY,RIGHT: THREE.MOUSE.PAN
}

.object : Camera
正被控制的摄像机。

.panSpeed : Float
位移的速度，其默认值为1。

.position0 : Vector3
由.saveState和.reset方法在内部使用。

.rotateSpeed : Float
旋转的速度，其默认值为1。

.screenSpacePanning : Boolean
定义当平移的时候摄像机的位置将如何移动。如果为true，摄像机将在屏幕空间内平移。否则，摄像机将在与摄像机向上方向垂直的平面中平移。当使用 OrbitControls 时，默认值为true；当使用 MapControls 时，默认值为false。

.target0 : Vector3
由.saveState和.reset方法在内部使用。

.target : Vector3
控制器的焦点，.object的轨道围绕它运行。它可以在任何时候被手动更新，以更改控制器的焦点。

.touches : Object
该对象包含由控件所使用的触摸操作的引用。

controls.touches = {ONE: THREE.TOUCH.ROTATE,TWO: THREE.TOUCH.DOLLY_PAN
}

.zoom0 : Float
由.saveState和.reset方法在内部使用。

.zoomSpeed : Float
摄像机缩放的速度，其默认值为1。

方法：

.dispose () : undefined
移除所有的事件监听。

.getAzimuthalAngle () : radians
获得当前的水平旋转，单位为弧度。

.getPolarAngle () : radians
获得当前的垂直旋转，单位为弧度。

.getDistance () : Float
返回从相机到目标的距离。

.listenToKeyEvents ( domElement : HTMLDOMElement ) : undefined
为指定的DOM元素添加按键监听。推荐将window作为指定的DOM元素。

.reset () : undefined
将控制器重置为上次调用.saveState时的状态，或者初始状态。

.saveState () : undefined
保存当前控制器的状态。这一状态可在之后由.reset所恢复。

.update () : Boolean
更新控制器。必须在摄像机的变换发生任何手动改变后调用，或如果.autoRotate或.enableDamping被设置时，在update循环里调用。

事件：
change
当相机已被控件转换时触发。

start
当交互开始时触发。

end
当交互完成时触发。

二、🍀使用OrbitControls相机控制器

1. ☘️实现思路

1、初始化renderer渲染器
2、初始化Scene三维场景scene
3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
4、创建THREE.AmbientLight环境光源ambiLight，scene场景添加ambiLight。创建THREE.DirectionalLight平行光源directLight，设置平行光源的位置和光强，场景scene中添加directLight。
5、加载几何模型：创建THREE.SphereGeometry球体几何体geom，使用普通纹理贴图planetTexture和法向量纹理贴图normalTexture创建THREE.MeshPhongMaterial高光材质planetMaterial，通过THREE.SceneUtils.createMultiMaterialObject传入geom和planetMaterial创建球体网格对象sphere，场景scene加入sphere。具体代码参考代码样例。
6、加入THREE.OrbitControls相机控制器orbitControls，设置orbitControls相关参数。加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html><html><head><title>使用OrbitControls相机控制器</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><script type="text/javascript" src="../libs/OrbitControls.js"></script><style>body {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div><!-- Javascript 代码 -->
<script type="text/javascript">// 初始化function init() {var stats = initStats();// 创建三维场景var scene = new THREE.Scene();// 创建相机var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器，设置颜色、大小和投影var webGLRenderer = new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled = true;var sphere = createMesh(new THREE.SphereGeometry(20, 40, 40));// 添加球体scene.add(sphere);// 设置相机位置和方向camera.position.x = -20;camera.position.y = 30;camera.position.z = 40;camera.lookAt(new THREE.Vector3(00, 0, 0));var orbitControls = new THREE.OrbitControls(camera);orbitControls.autoRotate = true;var clock = new THREE.Clock();var ambiLight = new THREE.AmbientLight(0x111111);scene.add(ambiLight);var directLight = new THREE.DirectionalLight(0xffffff);directLight.position.set(-20, 30, 40);directLight.intensity = 1.5;scene.add(directLight);// 渲染器绑定html要素document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);var step = 0;render();function createMesh(geom) {var planetTexture = THREE.ImageUtils.loadTexture("../assets/textures/planets/mars_1k_color.jpg");var normalTexture = THREE.ImageUtils.loadTexture("../assets/textures/planets/mars_1k_normal.jpg");var planetMaterial = new THREE.MeshPhongMaterial({map: planetTexture, bumpMap: normalTexture});var wireFrameMat = new THREE.MeshBasicMaterial();wireFrameMat.wireframe = true;var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMaterial]);return mesh;}function render() {stats.update();var delta = clock.getDelta();orbitControls.update(delta);requestAnimationFrame(render);webGLRenderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0); // 0: fps, 1: msstats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init;
</script>
</body>
</html>

效果如下：
在这里插入图片描述