1.组合

  创建一个组非常简单,在组中添加子元素的效果是,你可以对组进行移动、缩放和变形,而所有的子对象都会受到影响。使用组的时候,你依然可以引用、修改每一个单独的几何体。但是,使用raycaster射线是无法获取组group,只能获取组中的元素。

var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); var cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 100, 100, 0 ); var cubeB = new THREE.Mesh( geometry, material );
cubeB.position.set( -100, -100, 0 ); //create a group and add the two cubes
//These cubes can now be rotated / scaled etc as a group
var group = new THREE.Group();
group.add( cubeA );
group.add( cubeB ); scene.add( group );

2.合并

  组里的对象还是独立的,需要对它们分别进行处理和渲染。通过合并可以将多个几何体合并起来,创建一个几何体,可以提升性能。最大的缺陷是失去了对单个对象的控制。想要移动、旋转、或者缩放某个方块是不可能的。

  合并后的组可以通过raycaster射线获取合并后的结合体。

//创建建筑
createBuilding:function(obj){
var width = obj.width || 4;//建筑长
var height = obj.height || 1;//建筑高
var depth = obj.depth || 2;//建筑宽
var floor = obj.depth || 5;//楼层数量 var groupGeometry = new THREE.Geometry(); for(var i=0;i<floor;i++){
var geometry = new THREE.BoxGeometry(width, height, depth);
var material = new THREE.MeshLambertMaterial({ color: 0x696969 });
var box = new THREE.Mesh(geometry, material);
box.position.set(0, height*i+height/2+0.02*i, 0); box.updateMatrix();
groupGeometry.merge(box.geometry, box.matrix);
} var group = new THREE.Mesh(groupGeometry, new THREE.MeshLambertMaterial({ color: 0x696969 }))
group.name="movealbe-element-" + new Date().getTime();
return group;
}

three.js的组合与合并,raycaster射线无法获取group的更多相关文章

  1. three.js的raycaster射线无法获取visible为false的网格对象

    在做网格对象拖放时,需要创建一个不可见的参考平面,如果将平面对象设置为visible,则射线对象无法获取该平面,就无法进行位置计算. onDocumentMouseMove: function (e) ...

  2. three.js raycaster射线碰撞的坑 (当canvas大小 不是屏幕大小是解决拾取物体的办法)

    这里只是记录一下坑,方便查阅,内容主要援引自:three.js Raycaster 射线拾取 canvas不占满整屏时射线拾取存在偏差 1. 世界坐标系: 世界坐标系位于屏幕的中心(0,0,0),往右 ...

  3. 使用js 设置组合快捷键

    使用js 设置组合快捷键 使用js设置快捷键的本质就是获得你要设置的这个键的keyCode 的值,如果要加ctrl,alt,shift,那么就添加一个ctrlkey,altKey,shiftKey来判 ...

  4. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  5. js或css文件合并的三种方式推荐

    源文档 <http://www.jb51.net/article/32834.htm> 在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一 ...

  6. js 排列 组合 的一个简单例子

    最近工作项目需要用到js排列组合,于是就写了一个简单的demo. 前几天在网上找到一个写全排列A(n,n)的code感觉还可以,于是贴出来了, 排列的实现方式: 全排列主要用到的是递归和数组的插入 比 ...

  7. php js css加载合并函数 宋正河整理

    <?php //php js css加载合并函数 宋正河整理 //转载请注明出处 define('COMBINE_JS',true); define('COMBINE_CSS',true);   ...

  8. 编写gulpfile.js文件:压缩合并css、js

    使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm inst ...

  9. js 可选链 & 空值合并 In Action

    js 可选链 & 空值合并 In Action const obj = { props: { name: 'eric', }, // prop, 不存在的属性 ️ }; console.log ...

随机推荐

  1. Element-ui 更新tableData 中 row的某一个属性时,没有更新视图的问题

    在一个报警音管理的页面中,每次点击试听的时候,需要把‘试听’ 更新为 ‘停止’, 起初我们给row.play=0时,显示为 试听,row.play=1时显示为停止, 但是在代码中每次为row.play ...

  2. python 操作手机

    https://blog.csdn.net/wave_1102/article/details/41630469 import os import time import subprocess i = ...

  3. 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contai

    之前一直使用的mysql5,突然换成8之后,有许多地方不一样,今天就碰到一个. 在使用sql语句创建表时,报错:  1055 - Expression #1 of ORDER BY clause is ...

  4. DAX和Power BI中的参考日期表

    本文使用Power BI模板描述DAX中的引用Date表,可以在Analysis Services模型中使用相同的技术.在Dax Date Template页面下载最新版本的模板. 为什么引用Date ...

  5. android获取Context

    如果在Activity方法中,直接使用this. 如果在Activity内部类中,使用Activity.this

  6. 浅析toString()和toLocaleString()的区别

    翻看<javascript高级程序设计>,对toString()和toLocaleString()两者的区别并没有直白的说明,简单查阅了一下 ecmascript官方文档 和 MDN 二者 ...

  7. 关于html2canvas跨域设置

    最近在做js生成图片的功能,因为有的商户logo图片在阿里云oss存储的,所以遇到了跨域的问题.跨域的话可以在服务器端设置header, 跨域的话目前的解决方案是服务端设置,Access-Contro ...

  8. python学习6---字典合并

    1.针对python3版本 d1={'gao':1,'luo':2} d2={'liu':3,'jia':4} dictMerged1=dict(d1,**d2) print(dictMerged1) ...

  9. 关于Spring中的<context:annotation-config/>配置(开启注解)

    当我们需要使用BeanPostProcessor时,直接在Spring配置文件中定义这些Bean显得比较笨拙,例如: 使用@Autowired注解,必须事先在Spring容器中声明AutowiredA ...

  10. Django-api认证

    验证过程:每一个中控机有一个key,然后获取到当前时间戳.把key和当前时间戳这两个值进行一次加密,加密之后得到加密的戳,把加密的戳和当前获取的时间戳用管道符分割开生成一个大的字符串(加密戳|时间戳) ...