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. 在Asp.Net Core MVC 开发过程中遇到的问题

    1. Q: Razor视图中怎么添加全局模型验证消息 #### A:使用ModelOnly <div asp-validation-summary="ModelOnly" c ...

  2. 【JavaEE】之MyBatis插入数据后获取自增主键

    很多时候,我们都需要在插入一条数据后回过头来获取到这条数据在数据表中的自增主键,便于后续操作.针对这个问题,有两种解决方案: 先插入,后查询.我们可以先插入一条数据,然后根据插入的数据的各个字段值,再 ...

  3. go变量

    go基础 go变量(静态) package main import "fmt" func main() { //申明变量 var zx int //变量赋值 zx=10 //输出变 ...

  4. firefox-5.x关于img标签的load事件、svg、ff5.4audio标签显示的适配tip

    1.firefox中img标签的load事件后获取图片宽高错误. 需求是根据图片加载后的大小宽高比,调整图片显示的宽高. 在chrome浏览器下,使用jquery的load方法监听img标签的&quo ...

  5. SpringBoot日志处理之Logback

    日志处理是一个正式项目必备的功能,日志要能够根据时间.类型等要素,根据指定格式来保存指定的日志,方便我们观察程序运行情况.定位程序bug. SpringBoot中推荐使用Logback日志框架. 本节 ...

  6. Date、Calendar和GregorianCalendar的使用

    java.util 包提供了 Date 类来封装当前的日期和时间. Date 类提供两个构造函数来实例化 Date 对象. 第一个构造函数使用当前日期和时间来初始化对象. Date public st ...

  7. HihoCoder1449 后缀自动机三·重复旋律6

    描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为一段数构成的数列. 现在小Hi想知道一部作品中所有长度为K的旋律中出现次数最多的旋律的出现次数.但是K不是固定的,小Hi想知道对 ...

  8. FIve in a row

    Alice and Bob play 5-in-a-row game. They have a playing field of size 10 × 10. In turns they put eit ...

  9. 深入理解 Java 方法

    方法(有的人喜欢叫函数)是一段可重用的代码段.

  10. Postman 关联接口测试(带有token鉴权)

    Postman 关联接口测试(带有token鉴权) 一.登陆接口 创建一个request请求 在Tests中添加JavaScript代码,用来获取鉴权 pm.test("V2", ...