three.js:使用createMultiMaterialObject创建的多材质对象无法使用光线跟踪Raycaster选中
创建多材质对象:
var loader = new THREE.DDSLoader();
var map = loader.load('../assets/textures/Mountains_argb_nomip.dds', function ( texture ) {
texture.magFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearFilter;
texture.mapping = THREE.CubeReflectionMapping;
material.needsUpdate = true;
});
var material = new THREE.MeshLambertMaterial({envMap: map, transparent: true, opacity: 0.8});
var material1 = new THREE.MeshBasicMaterial({color: 0x2277ff, transparent: true, opacity: 0.3}); //
var leftdown1 = new THREE.SceneUtils.createMultiMaterialObject(new THREE.BoxGeometry(6, 1, 9),[material,material1.clone()]);
leftdown1.position.set(-11, 3, 9);
leftdown1.name = "movealbe-element-leftdown1";
group.add(leftdown1);
this.objects.push(leftdown1);
光线跟踪:
onDocumentMouseMove: function (e) {
var event = e || window.event;
event.preventDefault(); var mouseX = (event.clientX / map3d.width) * 2 - 1;//标准设备横坐标
var mouseY = -(event.clientY / map3d.height) * 2 + 1;//标准设备纵坐标
var vector = new THREE.Vector3(mouseX, mouseY, 0.5);//标准设备坐标
//标准设备坐标转世界坐标
var worldVector = vector.unproject(map3d.camera);
//射线投射方向单位向量(worldVector坐标减相机位置坐标)
var ray = worldVector.sub(map3d.camera.position).normalize();
//创建射线投射器对象
var raycaster = new THREE.Raycaster(map3d.camera.position, ray);
//返回射线选中的对象
var intersects = raycaster.intersectObjects(map3d.objects,true);
if (intersects.length > 0) {
var obj = intersects[0].object;
var target=null;
if (obj.name.startsWith("movealbe-element")) {
target=obj;
}else{
if(obj.parent && obj.parent.name.startsWith("movealbe-element")){
target=obj.parent;
}
}
if(target){
//如果聚焦的对象存在,并且相同
if (map3d.focusobj && target.uuid == map3d.focusobj.uuid)
return;
//更新最新一次聚焦的对象引用
map3d.focusobj = target;
if(map3d.focusobj.children.length>1)
map3d.focusobj.children[1].material.color = new THREE.Color("#00FF7F");
}
} else { }
},
材质还原:
map3d.scene.traverse(function (e) {
if (e.name && e.name.startsWith("movealbe-element") && map3d.focusobj && map3d.focusobj.uuid != e.uuid) {
if(e.children.length>1)
e.children[1].material.color = new THREE.Color("#2277ff");
}
});
说明:多材质对象,是创建了一个group,可以通过获取子对象来获取这个group。另外加载的3d模型也是group,可以通过这种方式使用raycaster选中模型。
initCityModel:function(){
// this.addModel({name:'powerstation',x:-10});
this.addModel({name:'movealbe-element-powerstation',model:'powerstation',x:0,y:0,z:-10});
},
// 根据模型名称像场景中添加一个模型对象
addModel:function(obj){
var self=this;
if(!obj.model)
return;
if(!obj.path)
obj.path='../assets/models/';
if(!obj.x&&isNaN(obj.x))
obj.x=0;
if(!obj.y&&isNaN(obj.y))
obj.y=0;
if(!obj.z&&isNaN(obj.z))
obj.z=0; var onProgress = function (xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log(obj.model + Math.round(percentComplete,2) + '% downloaded');
}
}; var onError = function () { }; new THREE.MTLLoader()
.setPath(obj.path)
.load(obj.model+'.mtl', function (materials) {
materials.preload(); new THREE.OBJLoader()
.setMaterials(materials)
.setPath(obj.path)
.load(obj.model+'.obj', function (object) {
object.position.set(obj.x,obj.y,obj.z);
if(obj.name){
object.name=obj.name;
console.log(object);
self.objects.push(object);
}
self.scene.add(object);
},onProgress,onError);
});
},
// 鼠标事件
onDocumentMouseDown: function (e) {
var event = e || window.event;
event.preventDefault(); var mouseX = (event.clientX / map3d.width) * 2 - 1;//标准设备横坐标
var mouseY = -(event.clientY / map3d.height) * 2 + 1;//标准设备纵坐标
var vector = new THREE.Vector3(mouseX, mouseY, 0.5);//标准设备坐标
//标准设备坐标转世界坐标
var worldVector = vector.unproject(map3d.camera);
//射线投射方向单位向量(worldVector坐标减相机位置坐标)
var ray = worldVector.sub(map3d.camera.position).normalize();
//创建射线投射器对象
var raycaster = new THREE.Raycaster(map3d.camera.position, ray);
//返回射线选中的对象
var intersects = raycaster.intersectObjects(map3d.objects,true);
console.log(map3d.camera.position);
if (intersects.length > 0) {
// 禁用轨道控制器
// map3d.controls.enabled = false; var obj = intersects[0].object;
var target=null;
if (obj.name.startsWith("movealbe-element")) {
target=obj;
}else{
if(obj.parent && obj.parent.name.startsWith("movealbe-element")){
target=obj.parent;
}
}
// 设置选中的元素
if(target){
map3d.selection = target;
}
} else {
map3d.selection = null;
}
},
three.js:使用createMultiMaterialObject创建的多材质对象无法使用光线跟踪Raycaster选中的更多相关文章
- 08-THREE.JS 点面创建物体,克隆物体,多材质物体
<!DOCTYPE html> <html> <head> <title></title> < <script src=&quo ...
- Three.js开发指南---创建,加载高级网格和几何体(第八章)
本章的主要内容: 一, 通过Three.js自带的功能来组合和合并已有的几何体,创建出新的几何体 二, 从外部资源中加载网格和几何体 1 前面的章节中,我们学习到,一个几何体创建的网格,想使用多个材质 ...
- JS面向对象,创建,继承
很开心,最近收获了很多知识,而且发现很多东西,以前理解的都是错的,或者是肤浅的,还以为自己真的就get到了精髓,也很抱歉会影响一些人往错误的道路上走,不过这也告诉了我们,看任何一篇文章都不能盲目的去相 ...
- JavaScript--我发现,原来你是这样的JS:面向对象编程OOP[2]--(创建你的那个对象吧)
一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...
- JS--我发现,原来你是这样的JS:面向对象编程OOP[2]--(创建你的那个对象吧)
一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...
- js函数的创建
1.js 函数的创建有几种方式: 1.1 直接声明 1.2 创建匿名函数,然后赋值 1.3 声明函数,然后赋值给变量 1.4 使用1.3 得到的变量再赋值给变量 1.5 使用函数对象创建函数 < ...
- Unity 游戏开发技巧集锦之创建透明的材质
Unity 游戏开发技巧集锦之创建透明的材质 Unity创建透明的材质 生活中不乏透明或者半透明的事物.例如,擦的十分干净的玻璃,看起来就是透明的:一些塑料卡片,看起来就是半透明的,如图3-23所示. ...
- js如何动态创建表格(两种方法)
js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...
- react快速上手一(使用js语法,创建虚拟DOM元素)
1.装包,引包 首先需要安装两个包 react ,react-dom cnpm i react react-dom 介绍下这两个包: react:专门用来创建React组件,组件生命周期等这些东西. ...
随机推荐
- caog
import pandas as pd#匹配可发库存1. import oslst=os.listdir(r'E:\每日必做\琪琪小象库存')lst1=[]for i in lst: if i[:2] ...
- 从软件测试转型到C#上位机程序员
一直在做软件测试的工作,天天与程序员不依不饶的争论细节的问题,没想到自己也有那么一天走上程序员的道路,由此开始,我的博客天天更新自己的学习状态,分享自己的心得. C#是微软公司发布的一种面向对象的.运 ...
- C#中的session用法
Session具有以下特点: (1)Session中的数据保存在服务器端: (2)Session中可以保存任意类型的数据: (2)Session默认的生命周期是20分钟,可以手动设置更长或更短的时间. ...
- MSP430G2553 TimerA中断说明
一.TimerA中断向量. G2553一共有2个TimerA,分别是TimerA0和TimerA1,中断入口地址分别是: TimerA0中断向量名称 <--> 中断源 ------ ...
- 【Linux】awk指令
介绍: awk是一种可以处理数据,产生格式化报表的语言.其工作方式是读取数据文件,将每一行数据视为一条记录,没笔记录按分隔符(默认空格)分割成若干字段,输出各字段的值. 实例: [jboss@vm-k ...
- 重写外部图片URL,变成自己的URL
1.获取原图链接 上传一张图片文件到淘图,得到以下链接: https://img.alicdn.com/imgextra/i4/358272220/TB2hCqxmB8lpuFjSspaXXXJKp ...
- Python3.7和数据库MySQL 8.0.12 数据库SQLite3连接(三)
SQLite3 # SQLite3 嵌入式 数据库 python内置SQLite3 # 导入驱动 import sqlite3 # 创建自增主键的表 msql = "create table ...
- Linux上更换默认的java版本
最近注意的一个问题: 在Server上和本地里都使用了相同版本的Tomcat,但是在Server上的tomcat日志里会出现很多java异常的错误, 但是本地的tomcat日志没有出现,初步判断应该是 ...
- Mysql存储
BEGIN # 统计视频使用的模板数 UPDATE VideoTemplate vt INNER JOIN ( SELECT TemplateId, COUNT(TemplateId) AS Tota ...
- angular6实现对象转换数组对象
1 使用表单获取到数据以后,是对象类型的数据如下图 而后台需要返回的数据是这种key:value的形式传入 2 废话不多说直接上代码(代码只截取部分,仅供参考跑不起来,最后又一个小demo可以运行 ...