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

这篇具有很好参考价值的文章主要介绍了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

import { DragControls } from 'three/examples/jsm/controls/DragControls';
	// 模型材质可拖拽
	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

界面效果
Three.js实现模型,模型材质可拖拽效果 DragControls,Three.js,javascript,three.js拖拽,three.js模型可拖拽,three.js材质可拖拽,拖拽,three.js,three.js拖拽效果文章来源地址https://www.toymoban.com/news/detail-682019.html

到了这里,关于Three.js实现模型,模型材质可拖拽效果 DragControls的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Three.js Tri-panner (三面贴图) 材质 两种实现方式

    介绍 Tri-panner 在babylonjs中有支持 但是three.js目前的基础材质并不支持 需要自己定义shader 或者使用目前还没有什么完善的文档的 NodeMaterial 下面展示两种实现方式 自定义shader NodeMaterial 这是threejs新系统充满未来 目前还没有一个完善的文档 并且不太稳定 r132的时候支持这个材质

    2024年01月18日
    浏览(45)
  • 原生js实现拖拽效果

    2024年01月16日
    浏览(44)
  • Three.js--》实现3D汽车展厅效果展示

    目录 项目搭建 初始化three.js基础代码 加载汽车模型 设置展厅效果 设置GUI面板动态控制车身操作 车门操作与车身视角展示 设置手动点击打开关闭车门 设置图片背景 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起

    2024年02月09日
    浏览(59)
  • Three.js--》实现图片转3D效果展示

    目录 项目搭建 初始化three.js基础代码 加载图片纹理 设置着色器 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建工具搭建vue项目

    2024年02月08日
    浏览(60)
  • three.js实现雷达扫描效果(纹理贴图)

    three.js实现雷达扫描效果(纹理贴图) 图例 步骤 创建两个平面,分别纹理贴图,底图模型.add(光波模型) 关闭材质的深度测试 光波旋转 代码 图片(透明的)

    2024年02月01日
    浏览(44)
  • JS创建DIV,实现鼠标拖拽效果

    题目:用原生js动态创建一个div,大小随意,挂在body上,实现鼠标拖拽效果 需要用到的鼠标事件: 1.鼠标按下(onmousedown), 2.鼠标移动(onmousemove) 3.鼠标抬起(onmouseup) 第一步:创建容器(每个页面,最大的容器是body对象,所有dom对象创建后默认都会放到body) 第二步,

    2024年02月13日
    浏览(49)
  • vue 项目使用three.js 实现3D看房效果

    0.前言 该教程能帮助直接写出vue项目的3D看房效果!!! 先上效果图 1.安装依赖 2.vue代码 这里文件名为three.vue 代码非原创,出处 vue3+threejs实现全景看房 (异步加载 BOLLROOM 部件为对原代码的修改) 注意这里的hdr 文件必须要放在assets文件夹中,且要通过import模块的形式导入!

    2024年02月13日
    浏览(56)
  • LVGL可拖拽窗口实现

    一、 LVGL拖拽功能     LVGL obj提供了使能拖拽功能的函数:     不过在多元素界面,例如下边在 bg win上创建了若干个 sub win,bg win大部分面积被覆盖的情况下,如果单纯将 bg win 设置为可拖拽,则只有点击到  没有被覆盖的区域才能成功,效果不满足要求;如果简单的把 sub

    2023年04月25日
    浏览(38)
  • Three.js 材质的 blending

    Three.js 材质的 blending 1、blending 材质的混合模式。 2、blendEquation 混合公式确定如何将新像素与 中 WebGLFramebuffer 已有的像素组合。 混合方程的API: gl.blendEquationSeparate : 用于分别设置 RGB 混合方程和 alpha 混合方程 gl.blendEquation : RGB 混合方程和 alpha 混合方程设置为单个方程。 混合

    2024年02月07日
    浏览(45)
  • vue2+three.js实现类似VR、3D全景效果

    效果图: 俩图标是我自己加的前进后退按钮,也是百度了好久,再加上GPT的帮助,才给搞出来。因为需求急,都不看官方文档,百度到一个能跑的demo之后改吧改吧,就先用着了。 下面是代码: 这里 代码有很多用不到的地方和需要优化的地方,我是来不及改了,就先这样吧

    2024年02月15日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包