dragControls中遇到的坑，限制上下方向

最新推荐文章于 2024-03-22 11:20:24 发布
最新推荐文章于 2024-03-22 11:20:24 发布
阅读量2.4k 收藏 6
点赞数 3
分类专栏： three
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rui913/article/details/80098726
版权


  

在拖拽控件引入实现功能时，你会发现他其实上下方向可以拖拽，并没有做限制，对于这个问题，解决方案：

      可以修改源码，如上图中 加入你的选中的物体的position Y方向的值为你自己定义的值  也就是与你的平面plane接触的那个值，加上这句话，我们会发现，上下方向可以拖拽这个问题已经解决了，这是我开发中遇到的坑，做个小笔记。


未经博主允许，不得抄袭，转载请注明来源，https://blog.csdn.net/rui913/article/details/80098726

Zombie391
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
three.js - 使用 THREE.DragControls 实现模型拖拽的-错误处理
蜗牛速度额的博客
07-25 8034
功能： 鼠标略过模型出现三维坐标轴，通过点击三维坐标轴，在 x、y、z 轴上移动，并且通过点中模型任意拖拽模型。  本质上，使用鼠标拖动三维模型，就是把鼠标的拖动距离，转化为三维模型的位置或角度变化量，使用three、js的拖拽控件·DragControls.js·就可以很容容易实现。  问题： 在使用webpack时，需要确保你的依赖配置 three确保在0.94.0版本，在低版本中是没有...
通过DragControls控件拖拽三维模型
weixin_30768661的博客
06-19 893
通过鼠标选中一个三维模型，显示一个三维坐标轴，并且可以通过这个坐标轴来移动三维模型。 本质上，使用鼠标拖动三维模型，就是把鼠标的拖动距离，转化为三维模型的位置或角度变化量，使用three、js的拖拽控件·DragControls.js·就可以很容容易实现。 引入控件 <!-- 拖拽控件--> <script src="libs/DragControls.js"></s...
THREE.JS 使用DragControls实现模型拖动
qq_44426236的博客
11-27 1715
DragControls 在vue项目中的应用。
three.js 如何解决orbitcontrols 右键拖拽和放大缩小功能失效的问题
蜗牛速度额的博客
07-26 1万+
前言 本文主要给大家介绍了关于Three.js利用orbitcontrols插件（轨道控制）控制模型交互动作的相关内容,以及在引入插件时候，碰到右键拖拽和滚轮放大缩小功能没法实现的解决方案。 首先引入插件，文件地址在官方案例的 examples/js/controls/OrbitControls.js。 import OrbitControls from 'three/examples/j...
three.js使用dragControls实现拖动
最新发布
weixin_43666952的博客
03-22 674
js中文文档中是了解到这么一个控制器的，反复设置就是不生效，因为希望是在点击模型底部的一个按钮后让他切换控制器实现单独的平移操作的。本身已经在使用的是轨道控制器，所以初始化的时候又加了这个拖拽控制器，比较发现在初始化的时候，两个的传参是不一样的，常用的轨道控制器职场需要传入相机和渲染元素render.document 就可以，拖拽控制器还需传入要拖拽的模型元素，就是你要拖拽的目标。由于我的是点击模型要整体移动，我就直接是遍历一开始要存储的数组挨个添加到group 直接用上面的步骤实现的拖动。
aframe-drag-controls:THREE.DragControls 的包装器
05-29
THREE.DragControls的包装器。 设置 新产品经理 npm i aframe-drag-controls import AFRAME from 'aframe' ; import 'aframe-drag-controls' ; 浏览器 < script src =" https://unpkg.com/aframe " > </...
three-dragger:拖动THREE.DragControls这样的three.js对象
04-30
三把匕首 像一样，拖动three.js对象（包括 ），但不修改原始位置。 现场演示可在。安装npm install --save three-dragger CDN版本也可以在unpkg上获得： 用法import ThreeDragger from 'three-dragger' ;...
js 实现 拖拽任意对象
03-30
js 实现 拖拽任意对象! 值得下载看看!资源免费,大家分享!!
三维鼠标模型交互设计与实现.pdf
01-03
WebGL技术的出现解决了之前开发过程中遇到的问题，由于WebGL通过OpenGL ES2.0且利用底层GPU来加速完成渲染。从目前的发展来看，通过WebGL技术搭建交互平台已是趋势所在，但是对WebGL技术的研究和开发也还在进行。 ...
threejs-drag-in-camera
06-26
通过调整相机的位置和方向，我们可以改变用户在虚拟空间中的视图。"threejs-drag-in-camera"提供了一个方便的方法，让用户可以直观地通过鼠标点击和拖动来操纵相机，从而增强交互性。 要使用这个功能，首先需要在...
DragControl
05-07
实现Panel和Tabcontrol之间的拖动 TabPage和GroupBox之间的任意控件拖动
Three.js - 使用 THREE.DragControls 实现模型拖拽
热门推荐
ithanmang
07-03 2万+
需求：鼠标略过模型出现三维坐标轴，通过点击三维坐标轴，在 x、y、z 轴上移动，并且通过点中模型任意拖拽模型。 本质上，使用鼠标拖动三维模型，就是把鼠标的拖动距离，转化为三维模型的位置或角度变化量，使用three、js的拖拽控件·DragControls.js·就可以很容容易实现。 示例浏览地址: http://www.ithanmang.com/threejshome/dragContro...
three.js DragControls +TransformControls 实现沿轴线拖拽功能
qq_40765480的博客
04-07 1702
three.js 实现沿轴线拖拽功能
Three.js实现模型，模型材质可拖拽效果 DragControls
ZHANG_666
08-29 1309
three.js通过DragControls实现模型可拖拽，模型材质可拖拽效果
three.js 指定在某一平面上拖拽。拖拽吸附在某个平面
qq_42339350的博客
10-20 2703
使用的api DragControls 该接口作用为：拖拽时会在摄像机视角垂直的平面上移动，即以摄像机视角方向为法向量的一个平面。 它是如何实现的在摄像机对着的屏幕移动的 文件位置:three/examples/jsm/controls/DragControls 内部代码 //新建一个平面 const _plane = new Plane(); ... //鼠标按下 function onPointerDown( event ){ ... //设置平面的法向量和点 //将摄像机(_camera)的世界
threejs 实现模型拖拽功能
qq_40994735的博客
11-03 5212
导入相关插件 import { DragControls } from "three/examples/jsm/controls/DragControls"; //拖拽控件 import { TransformControls } from "three/examples/jsm/controls/TransformControls"; //可视化平移控件 代码 objects 为存储移动的mesh模型。 <template> <div id="myThree" ref=
修改Threejs里的OrbitControls右键上下移动控制视图上下移动
niuge8905的博客
07-03 5367
在原生的OrbitControls里，右键上下移动，结果是视图放大缩小，这样的结果不是我的需求。应该是右键上下移动，视图也上下移动。那么怎么修改呢？ 如下：修改一下panUp的方法即可，注释的部分是原来的代码。 var panUp = function () { var v = new THREE.Vector3(); return functi...
html限制屏幕上下拖动,threejs 限制物件只能在指定平面上拖拽
weixin_29886329的博客
06-16 857
该例子可以在基于当前屏幕的x和y轴上拖拽物体，但是它不能影响z轴。查看代码，可以在touchStart\mousedown下找到下述代码：_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( _selected.m...
【无标题】threejs 使用composer后的场景变暗解决
rui913的博客
03-03 1976
引用了哪几个 直接改源码即可
three.js中DragControls
12-30
在Three.js中，DragControls是一个用于实现拖拽控制的类。它允许用户通过鼠标或触摸来拖动场景中的物体。下面是一个使用DragControls的示例代码： ```javascript // 引入DragControls.js <script type="text/javascript" src="./path/to/DragControls.js"></script> // 实例化DragControls var dragControls = new THREE.DragControls(scene.children, camera, renderer.domElement); // 添加事件监听器 dragControls.addEventListener('hoveron', function(event) { // 当鼠标悬停在物体上时触发的事件 // 在这里可以进行一些操作，比如改变物体的颜色或大小 }); dragControls.addEventListener('dragstart', function(event) { // 当开始拖拽物体时触发的事件 // 在这里可以进行一些操作，比如记录物体的初始位置 }); dragControls.addEventListener('drag', function(event) { // 当拖拽物体时触发的事件 // 在这里可以进行一些操作，比如更新物体的位置 }); dragControls.addEventListener('dragend', function(event) { // 当停止拖拽物体时触发的事件 // 在这里可以进行一些操作，比如保存物体的最终位置 }); ``` 通过上述代码，你可以在Three.js中使用DragControls来实现拖拽控制。你可以根据需要添加不同的事件监听器来处理拖拽过程中的各种情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zombie391

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值