Three.js实现模型,模型材质可拖拽效果 DragControls

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

javascript 复制代码
import { DragControls } from 'three/examples/jsm/controls/DragControls';
javascript 复制代码
	// 模型材质可拖拽
	setModelMeshDrag() {
	       const modelMaterialList= []
	       // 获取到需要拖拽的模型材质
  		   this.model.traverse((v) => {
			 if (v.isMesh && v.material && v.type=="Mesh") {
				   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

界面效果

相关推荐
梵得儿SHI8 分钟前
Vue 开发环境搭建全指南:从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理
Glommer28 分钟前
某音 Js 逆向思路
javascript·逆向
街尾杂货店&32 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈34 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
kevlin_coder1 小时前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生2 小时前
JS 性能优化
前端·javascript
peachSoda72 小时前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
hbqjzx2 小时前
记录一个自动学习的脚本开发过程
开发语言·javascript·学习
浪裡遊2 小时前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript
fruge2 小时前
Vue 3 完全指南:响应式原理、组合式 API 与实战优化
javascript·vue.js·ecmascript