首页 > 其他分享 >Three.js教程:相机控件轨道控制器OrbitControls

Three.js教程:相机控件轨道控制器OrbitControls

时间:2023-06-15 09:56:28浏览次数:47  
标签:控件 OrbitControls .. three Three 相机 js

推荐:将NSDT场景编辑器加入你的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建模学习工作室    

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

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

标签:控件,OrbitControls,..,three,Three,相机,js
From: https://www.cnblogs.com/mvrlink/p/17482031.html

相关文章

  • 参数结合控件筛选显示数据
    SELECT*FROM销量where1=1${if(len(地区)==0,"","and地区='"+地区+"'")}where1=1是为了恒成立,避免后续语句出问题影响到前面控件名称为地区......
  • Three.js教程:三维坐标系
    推荐:将NSDT场景编辑器加入你的3D工具链其他系列工具:NSDT简石数字孪生三维坐标系本节课的目的就是为了加强大家对threejs三维空间的认识。辅助观察坐标系THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小,你可以根据需要改变尺寸。//AxesHelper:辅助观察的坐标系const......
  • RDIFramework.NET敏捷开发框架WinForm新增通用附件管理控件
    1、引言在WinForm开发中,文件附件的管理几乎在任何一个应用上都会存在,是一个非常通用集中的公共模块。我们日常记录会伴随着有图片、文档等附件形式来展现,如果为每个业务对象都做一个附件管理,或者每次开发系统都重新做,效率可想而知。一个通用的集上传,预览,管理为一体的集中式附件管理......
  • ControlGet获取控件可见属性
    ControlGet获取控件的各种类型的信息.ControlGet,OutputVar,Cmd[,Value,Control,WinTitle,WinText,ExcludeTitle,ExcludeText]Cmd取值Visible:如果Control是可见的,则设置OutputVar为1;否则为0.可以是ClassNN(控件的类名和实例编号)或控件的文本,它们都可......
  • Three.js教程:渲染器
    推荐:将NSDT场景编辑器加入你的3D工具链。其他系列工具:NSDT简石数字孪生渲染器生活中如果有了景物和相机,那么如果想获得一张照片,就需要你拿着相机,按一下,咔,完成拍照。对于threejs而言,如果完成“咔”这个拍照动作,就需要一个新的对象,也就是WebGL渲染器WebGLRenderer(opensnewwin......
  • mapbox添加自定义控件
    需要定义一个类,然后至少重写实现onAdd、onRemove方法,示例如下<template><divref="changeViewRef"@click="changeView"class="changeViewmapboxgl-ctrl"><el-tooltipclass="box-item"effect="dark"......
  • Flutter的FittedBox控件
    简介FittedBox是Flutter中的一个控件,它用于调整其子控件的大小以适应可用空间。它会根据子控件的大小和可用空间的大小,自动进行缩放或拉伸操作,以使子控件恰好填充可用空间。属性FittedBox的常用属性包括:fit:指定子控件如何适应可用空间的枚举值。常用的取值有:BoxFit.contain:将......
  • Three.js教程:透视投影相机
    推荐:将NSDT场景编辑器加入你的3D工具链。其他系列工具:NSDT简石数字孪生Threejs如果想把三维场景Scene渲染到web网页上,还需要定义一个虚拟相机Camera,就像你生活中想获得一张照片,需要一台用来拍照的相机。透视投影相机PerspectiveCameraThreejs提供了正投影相机OrthographicCam......
  • WPF控件库之HandyControl
    HandyControl介绍HandyControl是一套WPF控件库,它几乎重写了所有原生样式,同时包含80余款自定义控件(正逐步增加)。安装使用github地址:https://github.com/HandyOrg/HandyControl官网地址:https://handyorg.github.io/......
  • WFP必须掌握的技能之自定义控件——实战:自制上传文件显示进度按钮
    自定义控件在WPF开发中是很常见的,有时候某些控件需要契合业务或者美化统一样式,这时候就需要对控件做出一些改造。目录按钮设置圆角按钮上传文件相关定义测试代码话不多说直接看效果默认效果:上传效果:按钮设置圆角因为按钮本身没有CornerRadius属性,所以只能重写Butto......