three.js的raycaster射线无法获取visible为false的网格对象
在做网格对象拖放时,需要创建一个不可见的参考平面,如果将平面对象设置为visible,则射线对象无法获取该平面,就无法进行位置计算。
onDocumentMouseMove: function (e) {
var event = e || window.event;
var mouse = new THREE.Vector2();
mouse.x = (event.clientX / map3d.width) * 2 - 1;//标准设备横坐标
mouse.y = -(event.clientY / map3d.height) * 2 + 1;//标准设备纵坐标
// 通过摄像机和鼠标位置更新射线
map3d.raycaster.setFromCamera(mouse, map3d.camera);
if (map3d.selection && e.which == 1) {
//移动物体
var intersects = map3d.raycaster.intersectObject(map3d.hidePlane);
var position = intersects[0].point.sub(map3d.offset);
map3d.selection.position.set(parseFloat(position.x.toFixed(2)),parseFloat(position.y.toFixed(2)),parseFloat(position.z.toFixed(2)));
} else {
//1:如果聚焦到了需要移动位置的物体上
var intersects = map3d.raycaster.intersectObjects(map3d.objects);
if (intersects.length > 0) {
//让参考平面的中心点移动到物体的位置
map3d.hidePlane.position.copy(intersects[0].object.position);
}
},
这时候可以将网格对象的材质的visible属性设置为false
// 辅助移动物体
this.hidePlane = new THREE.Mesh(
new THREE.PlaneBufferGeometry(500, 500, 8, 8),
new THREE.MeshBasicMaterial({ color: 0xffffff, visible: false})
);
this.hidePlane.needsUpdate=true;
this.scene.add(this.hidePlane);
this.raycaster = new THREE.Raycaster();
this.offset = new THREE.Vector3();
three.js的raycaster射线无法获取visible为false的网格对象的更多相关文章
- three.js的组合与合并,raycaster射线无法获取group
1.组合 创建一个组非常简单,在组中添加子元素的效果是,你可以对组进行移动.缩放和变形,而所有的子对象都会受到影响.使用组的时候,你依然可以引用.修改每一个单独的几何体.但是,使用raycaster射 ...
- three.js raycaster射线碰撞的坑 (当canvas大小 不是屏幕大小是解决拾取物体的办法)
这里只是记录一下坑,方便查阅,内容主要援引自:three.js Raycaster 射线拾取 canvas不占满整屏时射线拾取存在偏差 1. 世界坐标系: 世界坐标系位于屏幕的中心(0,0,0),往右 ...
- JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别
JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的 ...
- JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
- 【转】js中通过docment.cookie获取到的内容不完整! 在浏览器的application里的cookie里可以看到完整的cookie,个别字段无法通过document.cookie获取。 是否有其他办法可以获取到??
js中通过docment.cookie获取到的内容不完整!在浏览器的application里的cookie里可以看到完整的cookie,个别字段无法通过document.cookie获取.是否有其他办 ...
- VUE.JS 窗口发生变化时,获取当前窗口的高度。
VUE.JS # 窗口发生变化时,获取当前窗口的高度. mounted () { const that = this; window.onresize = () => { return (() ...
- js获取事件源及触发该事件的对象
怎样获取事件源及触发该事件的对象,方法有非常多,js中能够通过event来实现.以下有个不错的演示样例,感兴趣的朋友能够參考下: function myfunction(event) { event ...
- js进阶 11-8 jquery如何获取元素相对于父元素的位置
js进阶 11-8 jquery如何获取元素相对于父元素的位置 一.总结 一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...
- js进阶 11-7 jquery如何获取和改变元素的位置
js进阶 11-7 jquery如何获取和改变元素的位置 一.总结 一句话总结:jquery中匿名函数中的index参数是什么意思.jquery对象多集合,故index为所选元素的下标. 1.jqu ...
随机推荐
- 使用axios获取本地json数据
1. 通过搜索 网上说不放在static文件夹中会报错 但是一直报错 放到根目录下的时候不报错了 2. 在main.js中引入axios import axios from 'axios' 3. ...
- 学习笔记:spark Streaming的入门
spark Streaming的入门 1.概述 spark streaming 是spark core api的一个扩展,可实现实时数据的可扩展,高吞吐量,容错流处理. 从上图可以看出,数据可以有很多 ...
- xterm配置
最近转到i3wm桌面下, 发现调用xfce4-terminal有些慢,索性卸载掉一切所谓高级的终端,使用xterm,其实这个才是更牛的家伙. 安装 apt install xterm in i3-wm ...
- javascript最全最好的判断数组的方法
var arr = [1,2,3,1]; var arr2 = [{ abac : 1, abc : 2 }]; function isArrayFn(value){ if (typeof Array ...
- angular6实现对象转换数组对象
1 使用表单获取到数据以后,是对象类型的数据如下图 而后台需要返回的数据是这种key:value的形式传入 2 废话不多说直接上代码(代码只截取部分,仅供参考跑不起来,最后又一个小demo可以运行 ...
- SERvet的表单
首先要建立好数据库. 好了,先写好两个静态页面,分别负责登录和注册. 代码清单1:login.jsp(登录页面) <%-- Document : login Created on : 2013- ...
- 认识Applet
一.Applet 1.Applet的定义:Applet是采用Java编程语言编写的小应用程序,该程序可以包含在HTML(标准通用标记语言的一个应用)页中,与在页中包含图像的方式大致相同. Java写出 ...
- 关于PHP 缓冲区: ob_star , ob_get_contents
PHP ob_star ob_get_contents 细说 作者:田园花香 关于PHP 缓冲区 ob_start: 打开输出缓冲区,当缓冲区激活时,所有来自PHP程序的非头文件信息均不会发送, ...
- Google - Find minimum number of coins that make a given value
Given a value V, if we want to make change for V cents, and we have infinite supply of each of C = { ...
- c++中函数指针作为int传递
int f() { ; } typedef int (*method)(); int _tmain(int argc, _TCHAR* argv[]) { int value = (int)& ...