threejs 限制物件只能在指定平面上拖拽
threejs提供有 DragController.js的例子来辅助拖拽
该例子可以在基于当前屏幕的x和y轴上拖拽物体,但是它不能影响z轴。
查看代码,可以在touchStart\mousedown下找到下述代码:
_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
该代码的意义在于:
1、要确定一个目标平面(_plane),物件将会在该平面上移动
2、所以,利用鼠标的clientX和clientY结合摄像机(_camera)的角度,得出向量1
3、同时,根据当前选中物件(_selected)的方向,得出向量2
4、最后,根据这两个向量来确定目标平面
所以,如果要让物件随着拖拽在纵深方向移动,只需要把这个平面修改为你期望的平面即可。比如:
_plane.setFromNormalAndCoplanarPoint(new THREE.Vector3(0,0,1),new THREE.Vector3(0,0,1));
即可实现在指定平面上移动的效果,以下物件都是通过拖拽修改的初始位置:

threejs 限制物件只能在指定平面上拖拽的更多相关文章
- xib上拖拽scrollview的自动布局方法
http://www.cocoachina.com/ios/20150104/10810.html
- swift方法 的写法,ui上拖拽的控件到controller里面的方法
直接点xcode右上角三个按键中间一下,左右拆分为storyboard和controller, 点击button,按ctrl,然后拖拽到controller里面即可生成对应的点击事件在controll ...
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
- 平面上的地图搜索--Java学习笔记(四)
版权声明: 本文由Faye_Zuo发布于http://www.cnblogs.com/zuofeiyi/, 本文可以被全部的转载或者部分使用,但请注明出处. 这一个月以来,都在学习平面上的地图搜索,主 ...
- 洛谷 P1257 平面上的最接近点对 题解
P1257 平面上的最接近点对 题目描述 给定平面上n个点,找出其中的一对点的距离,使得在这n个点的所有点对中,该距离为所有点对中最小的. 输入格式 第一行:n:2≤n≤10000 接下来n行:每行两 ...
- Android中如何做到自定义的广播只能有指定的app接收
今天没吊事,又去面试了,具体哪家公司就不说了,因为我在之前的blog中注明了那些家公司的名字,结果人家给我私信说我泄露他们的题目,好吧,我错了...其实当我们已经在工作的时候,我们可以在空闲的时间去面 ...
- objectARX 获取指定图层上所有实体ID
2015-12-17 //获取指定图层上所有实体ID AcDbObjectIdArray GetAllEntityId(const TCHAR* layername) { AcDbObjectIdAr ...
- POJ C程序设计进阶 编程题#4:寻找平面上的极大点
编程题#4:寻找平面上的极大点 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描 ...
- COJN 0485 800503寻找平面上的极大点
800503寻找平面上的极大点 难度级别:C: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 在一个平面上,如果有两个点(x,y),(a,b) ...
随机推荐
- Ansible 常见模块介绍
目录 Ansible 常见模块介绍 ping 模块 command 模块 cron 模块 user 模块 group 模块 copy 模块 file 模块 service 模块 shell 模块 sc ...
- mac安装numpy,scipy,matplotlib
SaintKings-Mac-mini:~ saintking$ python Python ( , ::) [GCC Compatible Apple LLVM (clang-)] on dar ...
- Android Jni开发,报com.android.ide.common.process.ProcessException: Error configuring 错误解决方案
今天在练习JNI项目时,Android studio版本为:3.1.3,Gradle版本为4.4.由于Android studio 3.X弃用了 android.useDeprecatedNdk=tr ...
- Netty学习——Netty和Protobuf的整合(二)
Netty学习——Netty和Protobuf的整合(二) 这程序是有瑕疵的,解码器那里不通用,耦合性太强,有两个很明显的问题,但是要怎么解决呢?如:再加一个内部类型 Person2,之前的代码就不能 ...
- sync.Map(在并发环境中使用的map)
sync.Map 有以下特性: 需要并发读写时,一般的做法是加锁,但这样性能并不高,Go语言在 1.9 版本中提供了一种效率较高的并发安全的 sync.Map,sync.Map 和 map 不同,不是 ...
- OS_Architecture_MemoryHierarchy
Hit: if the data CPU is looking for can not be found in a cache, it constitutes a hit. Miss: cache m ...
- 压缩感知重构算法之OLS算法python实现
压缩感知重构算法之OMP算法python实现 压缩感知重构算法之CoSaMP算法python实现 压缩感知重构算法之SP算法python实现 压缩感知重构算法之IHT算法python实现 压缩感知重构 ...
- 【CSS】352- 有趣的CSS弹跳动画
点击上方"前端自习课"关注,学习起来~ 这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴 ...
- 【JS】328- 8个你不知道的DOM功能
最近一直在关注工具,从 React 和 npm-install-everything 中休息一下,看看一些原生的 DOM 和 Web API 的功能,他们可以在没有任何依赖库的浏览器中直接运行. 这篇 ...
- 21.跨域和CORS
一 跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...