ThreeJS教程:相机控件OrbitControls

推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生

相机控件OrbitControls

平时开发调试代码,或者展示模型的时候,可以通过相机控件OrbitControls实现旋转缩放预览效果。

OrbitControls使用

你可以打开课件案例源码测试下效果。

  • 旋转:拖动鼠标左键
  • 缩放:滚动鼠标中键
  • 平移:拖动鼠标右键

引入扩展库OrbitControls.js

// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

注意:如果你在原生.html文件中,使用上面引入方式import { OrbitControls } from 'three/addons/controls/OrbitControls.js';,注意通过<script type="importmap">配置。

<script type="importmap">
    {
		"imports": {
			"three": "../../../three.js/build/three.module.js",
      "three/addons/": "../../../three.js/examples/jsm/"
		}
	}
</script>

使用OrbitControls

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数,重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {
    renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件

OrbitControls本质

OrbitControls本质上就是改变相机的参数,比如相机的位置属性,改变相机位置也可以改变相机拍照场景中模型的角度,实现模型的360度旋转预览效果,改变透视投影相机距离模型的距离,就可以改变相机能看到的视野范围。

controls.addEventListener('change', function () {
    // 浏览器控制台查看相机位置变化
    console.log('camera.position',camera.position);
});

3D建模学习工作室整理翻译,转载请标明出处!

上一篇:ThreeJS教程:光源对物体表面影响 (mvrlink.com)

下一篇:ThreeJS教程:平行光与环境光 (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号