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 限制物件只能在指定平面上拖拽的更多相关文章

  1. xib上拖拽scrollview的自动布局方法

    http://www.cocoachina.com/ios/20150104/10810.html

  2. swift方法 的写法,ui上拖拽的控件到controller里面的方法

    直接点xcode右上角三个按键中间一下,左右拆分为storyboard和controller, 点击button,按ctrl,然后拖拽到controller里面即可生成对应的点击事件在controll ...

  3. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  4. 平面上的地图搜索--Java学习笔记(四)

    版权声明: 本文由Faye_Zuo发布于http://www.cnblogs.com/zuofeiyi/, 本文可以被全部的转载或者部分使用,但请注明出处. 这一个月以来,都在学习平面上的地图搜索,主 ...

  5. 洛谷 P1257 平面上的最接近点对 题解

    P1257 平面上的最接近点对 题目描述 给定平面上n个点,找出其中的一对点的距离,使得在这n个点的所有点对中,该距离为所有点对中最小的. 输入格式 第一行:n:2≤n≤10000 接下来n行:每行两 ...

  6. Android中如何做到自定义的广播只能有指定的app接收

    今天没吊事,又去面试了,具体哪家公司就不说了,因为我在之前的blog中注明了那些家公司的名字,结果人家给我私信说我泄露他们的题目,好吧,我错了...其实当我们已经在工作的时候,我们可以在空闲的时间去面 ...

  7. objectARX 获取指定图层上所有实体ID

    2015-12-17 //获取指定图层上所有实体ID AcDbObjectIdArray GetAllEntityId(const TCHAR* layername) { AcDbObjectIdAr ...

  8. POJ C程序设计进阶 编程题#4:寻找平面上的极大点

    编程题#4:寻找平面上的极大点 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描 ...

  9. COJN 0485 800503寻找平面上的极大点

    800503寻找平面上的极大点 难度级别:C: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 在一个平面上,如果有两个点(x,y),(a,b) ...

随机推荐

  1. Ansible 常见模块介绍

    目录 Ansible 常见模块介绍 ping 模块 command 模块 cron 模块 user 模块 group 模块 copy 模块 file 模块 service 模块 shell 模块 sc ...

  2. mac安装numpy,scipy,matplotlib

      SaintKings-Mac-mini:~ saintking$ python Python ( , ::) [GCC Compatible Apple LLVM (clang-)] on dar ...

  3. 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 ...

  4. Netty学习——Netty和Protobuf的整合(二)

    Netty学习——Netty和Protobuf的整合(二) 这程序是有瑕疵的,解码器那里不通用,耦合性太强,有两个很明显的问题,但是要怎么解决呢?如:再加一个内部类型 Person2,之前的代码就不能 ...

  5. sync.Map(在并发环境中使用的map)

    sync.Map 有以下特性: 需要并发读写时,一般的做法是加锁,但这样性能并不高,Go语言在 1.9 版本中提供了一种效率较高的并发安全的 sync.Map,sync.Map 和 map 不同,不是 ...

  6. 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 ...

  7. 压缩感知重构算法之OLS算法python实现

    压缩感知重构算法之OMP算法python实现 压缩感知重构算法之CoSaMP算法python实现 压缩感知重构算法之SP算法python实现 压缩感知重构算法之IHT算法python实现 压缩感知重构 ...

  8. 【CSS】352- 有趣的CSS弹跳动画

    点击上方"前端自习课"关注,学习起来~ 这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴 ...

  9. 【JS】328- 8个你不知道的DOM功能

    最近一直在关注工具,从 React 和 npm-install-everything 中休息一下,看看一些原生的 DOM 和 Web API 的功能,他们可以在没有任何依赖库的浏览器中直接运行. 这篇 ...

  10. 21.跨域和CORS

    一 跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...