安庆市住房和建设厅网站,开发者账号,wordpress 文章多图,wordpress播放swf插件Three.js提供了一个拖拽的API DragControls 用于实现模型材质拖拽效果
DragControls#xff1a;是一个用于在Three.js中实现拖拽控制的辅助类。它简化了在Three.js中实现拖拽物体的过程。
DragControls的构造函数接受三个参数#xff1a;
objects#xff1a;一个包含需要…Three.js提供了一个拖拽的API DragControls 用于实现模型材质拖拽效果
DragControls是一个用于在Three.js中实现拖拽控制的辅助类。它简化了在Three.js中实现拖拽物体的过程。
DragControls的构造函数接受三个参数
objects一个包含需要进行拖拽的物体的数组。 camera相机对象用于将屏幕坐标转换为三维空间坐标。 domElement渲染器的DOM元素用于监听鼠标事件。
DragControls实例提供了以下方法和事件
addEventListener(type, listener)添加事件监听器。支持的事件类型包括’dragstart’、‘drag’和’dragend’。 removeEventListener(type, listener)移除事件监听器。 dispose()释放DragControls实例清除事件监听器。 DragControls实例还会自动处理鼠标事件并触发相应的事件。当用户开始拖拽物体时会触发’dragstart’事件当物体正在被拖拽时会触发’drag’事件当用户停止拖拽物体时会触发’dragend’事件。
在事件监听器中可以通过event.object获取被拖拽的物体通过event.position获取物体在拖拽过程中的位置
注意DragControls 支持拖拽的材质类型为 type “Mesh” 其他类型的材质可能没实际效果
在上一篇 Three.js加载外部glb,fbx,gltf,obj 模型文件 的文章基础上新增一个 setModelMeshDrag(设置模型材质可拖拽方法) 引入拖拽API DragControls
import { DragControls } from three/examples/jsm/controls/DragControls;// 模型材质可拖拽setModelMeshDrag() {const modelMaterialList []// 获取到需要拖拽的模型材质this.model.traverse((v) {if (v.isMesh v.material v.typeMesh) {modelMaterialList.push(v) }})// 创建拖拽实列this.dragControls new DragControls(this.modelMaterialList, this.camera, this.renderer.domElement);// 拖拽事件监听this.dragControls.addEventListener(dragstart, () {// 设置控制器不可操作this.controls.enabled false})this.dragControls.addEventListener(dragend, () {this.controls.enabled true})}完整的代码可参考:https://gitee.com/ZHANG_6666/Three.js3D/blob/master/src/views/renderModel.js
界面效果
