一、挖空原理说明

subtract 用墙面减去与门重叠的部分，产生一个新的对象，导入材质安装门即可

  1. //参与减去几何体
  2. //平行于x轴门
  3. var meshH4Door = new ThreeBSP( meshHDoor );
  4. //平行x轴横墙面
  5. var meshWall4 = new ThreeBSP( meshH4 );
  6.  
  7. //平行x轴横墙面meshWall4对象 减去与meshH4Door门重叠部分
  8. var subtract_bsp = meshWall4.subtract( meshH4Door );
  9. var result = subtract_bsp.toMesh( new THREE.MeshLambertMaterial({
  10. 	shading: THREE.SmoothShading,
  11. 	map: THREE.ImageUtils.loadTexture('./img/floor-1.jpg'),
  12. 	color: 0xff0000}) );
  13. result.geometry.computeVertexNormals();
  14. //添加至场景中
  15. scene.add( result );  　

效果图

源代码如下

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>threejs中挖空解决闪烁bug</title>
  6.         <style>
  7.             #canvas-frame {
  8.                 width: 100%;
  9.                 height: 450px;
  10.             }
  11.         </style>
  12.     </head>
  13.     <body onload="threeStart()">
  14.         <div id="canvas-frame" ></div>
  15.     </body>
  16.     <script type="text/javascript" src="./lib/three.js" ></script>
  17.     <!-- 运算挖门 解决闪烁bug -->
  18.     <script type="text/javascript" src="lib/ThreeCSG.js"></script>
  19.     <script type="text/javascript">
  20.             var renderer, //渲染器
  21.                 width = document.getElementById('canvas-frame').clientWidth, //画布宽
  22.                 height = document.getElementById('canvas-frame').clientHeight; //画布高
  23.             //照相机配置
  24.             var fov = 45,//拍摄距离  视野角值越大，场景中的物体越小
  25.                 near = 1,//最小范围
  26.                 far = 1000;//最大范围
  27.             //DOM对象
  28.             var canvas = null;
  29.             //初始化DOM对象
  30.             function initDOM(){
  31.                 canvas = document.getElementById("canvas-frame");
  32.             }
  33.             //初始化渲染器
  34.             function initThree(){
  35.                 renderer = new THREE.WebGLRenderer({
  36.                      antialias : true
  37.                      //canvas: document.getElementById('canvas-frame')
  38.                 });
  39.                 renderer.setSize(width, height);
  40.                 renderer.setClearColor(0xFFFFFF, 1.0);
  41.                 document.getElementById('canvas-frame').appendChild(renderer.domElement);
  42.                     renderer.setClearColor(0xFFFFFF, 1.0);
  43.             }
  44.             //初始化场景
  45.             var scene;
  46.             function initScene(){
  47.                 scene = new THREE.Scene();
  48.             }
  49.             var camera;
  50.             function initCamera() {  //透视相机
  51.                 camera = new THREE.PerspectiveCamera(fov,  width/height , near, far);
  52.                 camera.position.x = 150;
  53.                 camera.position.y = 150;
  54.                 camera.position.z =450;
  55.                 camera.up.x = 0;
  56.                 camera.up.y = 1; //相机朝向--相机上方为y轴
  57.                 camera.up.z = 0;
  58.                 camera.lookAt({  //相机的中心点
  59.                     x : 0,
  60.                     y : 0,
  61.                     z : 0
  62.                 });
  63.             }
  64.             function initLight(){
  65.                 // light--这里使用环境光
  66.                 //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
  67.                 //light.position.set(600, 1000, 800);
  68.                 var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
  69.                 light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置
  70.                 scene.add(light);
  71.             }
  72.             function initObject(){  //初始化对象
  73.                 //初始化地板
  74.                 initFloor();
  75.                 initWall();
  76.             }
  77.             function initGrid(){ //辅助网格
  78.                 var helper = new THREE.GridHelper( 1000, 50 );
  79.                 helper.setColors( 0x0000ff, 0x808080 );
  80.                 scene.add( helper );
  81.             }
  82.             function initFloor(){
  83.  
  84.             	 //导入材质
  85.                 var texture = THREE.ImageUtils.loadTexture('img/floor-1.jpg', {}, function() {
  86.                     renderer.render(scene, camera);
  87.                 });
  88.                 /**
  89.                  * 关于material材料注意点说明
  90.                  * MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框。
  91.                  * MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体。
  92.                  * MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体。
  93.                  */
  94.                 var material = new THREE.MeshLambertMaterial({
  95.                     map: texture
  96.                 });
  97.  
  98.                 //创建一个立方体
  99.                 var geometry = new THREE.BoxGeometry(400, 20, 400);
  100.                  for ( var i = 0; i < geometry.faces.length; i += 2 ) {
  101.                     var hex = Math.random() * 0xffffff;
  102.                     geometry.faces[ i ].color.setHex( hex );
  103.                     geometry.faces[ i + 1 ].color.setHex( hex );
  104.                 }
  105.                 //var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
  106.                 //将material材料添加到几何体geometry
  107.                 var mesh = new THREE.Mesh(geometry, material);
  108.                 mesh.position = new THREE.Vector3(0,0,0);
  109.                 scene.add(mesh);
  110.             }
  111.             //墙面
  112.             function initWall(){
  113.  
  114.             	 //导入墙面材质(后面墙面共用)
  115.                 var texture = THREE.ImageUtils.loadTexture('img/floor-1.jpg', {}, function() {
  116.                     renderer.render(scene, camera);
  117.                 });
  118.                 /**
  119.                  * 关于material材料注意点说明
  120.                  * MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框。
  121.                  * MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体。
  122.                  * MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体。
  123.                  */
  124.                 var material = new THREE.MeshLambertMaterial({
  125.                     map: texture
  126.                 });
  127.  
  128.                 /*--------平行z轴横墙面3、x轴为墙面的厚度、 z轴为墙面长度、y轴为墙面高度--------------------*/
  129.             	//平行z轴横墙面1   x轴为墙面厚度
  130.             	var geometryH1 = new THREE.BoxGeometry(10, 65, 360);
  131.             	/*var materialH1 = new THREE.MeshBasicMaterial( { color:0xFF0000 } );*/
  132.             	//将material材料添加到几何体geometry
  133. 	            var meshH1 = new THREE.Mesh(geometryH1, material);
  134. 	            meshH1.position.x = 180;
  135. 	            meshH1.position.y = 45;
  136. 	            //scene.add(meshH1);
  137. 	            var meshWall1 = new ThreeBSP( meshH1 );
  138.  
  139. 	            var geometryHDoor1 = new THREE.BoxGeometry(10, 56, 35);
  140.             	var materialHDoor1 = new THREE.MeshBasicMaterial( { color:0x00BBAA} );
  141.             	//将material材料添加到几何体geometry
  142. 	            var meshHDoor1 = new THREE.Mesh(geometryHDoor1, materialHDoor1);
  143. 	            meshHDoor1.position.x = 180;
  144. 	            meshHDoor1.position.y = 45;
  145. 	            meshHDoor1.position.z = 0;
  146. 	            //scene.add(meshHDoor2);
  147. 	            var meshHDoor1 = new ThreeBSP( meshHDoor1 );
  148. 	            //墙面减去重叠的门
  149. 	            subtractMesh(meshHDoor1, meshWall1);
  150.  
  151. 	            //为墙面1安装门
  152. 	            var geometryHDoor1 = new THREE.BoxGeometry(10, 56, 35);
  153. 	            //加载材质
  154. 	            var textureDoor1 = THREE.ImageUtils.loadTexture('img/door.png', {}, function() {
  155. 	                renderer.render(scene, camera);
  156. 	            });
  157. 	            var materialDoor1 = new THREE.MeshBasicMaterial({
  158. 	                map: textureDoor1
  159. 	            });
  160.             	//var materialHDoor2 = new THREE.MeshBasicMaterial( { color:0x00BBAA} );
  161.             	//将material材料添加到几何体geometry
  162. 	            var meshHDoor1 = new THREE.Mesh(geometryHDoor1, materialDoor1);
  163. 	            meshHDoor1.position.x = 180;
  164. 	            meshHDoor1.position.y = 45;
  165. 	            meshHDoor1.position.z = 0;
  166. 	            scene.add(meshHDoor1);
  167.  
  168. 	            //平行z轴横墙面2 x轴为墙面厚度
  169.             	var geometryH2 = new THREE.BoxGeometry(10, 65, 360);
  170.             	var materialH2 = new THREE.MeshBasicMaterial( { color:0xFF00FF } );
  171.             	//将material材料添加到几何体geometry
  172. 	            var meshH2 = new THREE.Mesh(geometryH2, materialH2);
  173. 	            meshH2.position.x = -180;
  174. 	            meshH2.position.y = 45;
  175. 	            var meshWall2 = new ThreeBSP( meshH2 );
  176. 	            //scene.add(meshH2);
  177.  
  178. 	            var geometryHDoor2 = new THREE.BoxGeometry(10, 56, 35);
  179.             	var materialHDoor2 = new THREE.MeshBasicMaterial( { color:0x00BBAA} );
  180.             	//将material材料添加到几何体geometry
  181. 	            var meshHDoor2 = new THREE.Mesh(geometryHDoor2, materialHDoor2);
  182. 	            meshHDoor2.position.x = -180;
  183. 	            meshHDoor2.position.y = 45;
  184. 	            meshHDoor2.position.z = 0;
  185. 	            var meshHDoor2 = new ThreeBSP( meshHDoor2 );
  186. 	            //scene.add(meshHDoor2);
  187. 	            //墙面减去重叠的门
  188. 	            subtractMesh(meshHDoor2, meshWall2);
  189.  
  190. 	            //为墙面2安装门
  191. 	            var geometryHDoor2 = new THREE.BoxGeometry(10, 56, 35);
  192. 	            //加载材质
  193. 	            var textureDoor2 = THREE.ImageUtils.loadTexture('img/door.png', {}, function() {
  194. 	                renderer.render(scene, camera);
  195. 	            });
  196. 	            var materialDoor2 = new THREE.MeshBasicMaterial({
  197. 	                map: textureDoor2
  198. 	            });
  199.             	//var materialHDoor2 = new THREE.MeshBasicMaterial( { color:0x00BBAA} );
  200.             	//将material材料添加到几何体geometry
  201. 	            var meshHDoor2 = new THREE.Mesh(geometryHDoor2, materialDoor2);
  202. 	            meshHDoor2.position.x = -180;
  203. 	            meshHDoor2.position.y = 45;
  204. 	            meshHDoor2.position.z = 0;
  205. 	            scene.add(meshHDoor2);
  206. 	        /*--------平行z轴横墙面3、x轴为墙面的厚度、 z轴为墙面长度、y轴为墙面高度--------------------*/
  207.  
  208. 	       /*--------平行x轴横墙面3、x轴为墙面长度、 z轴为墙面厚度、y轴为墙面高度--------------------*/
  209. 	       //平行x轴横墙面3   z轴为墙面厚度
  210.             	var geometryH3 = new THREE.BoxGeometry(365, 65, 10);
  211.             	var materialH3 = new THREE.MeshBasicMaterial( { color:0x808080 } );
  212.             	//将material材料添加到几何体geometry
  213. 	        var meshH3 = new THREE.Mesh(geometryH3, material);
  214. 	            meshH3.position.x = 0;
  215. 	            meshH3.position.y = 45;
  216. 	            meshH3.position.z = -180;
  217. 	            var meshWall3 = new ThreeBSP( meshH3 );
  218. 	            //scene.add(meshH3);
  219.  
  220. 	            //平行x轴横重叠门3 z轴为墙面厚度
  221.             	var geometryHDoor = new THREE.BoxGeometry(35, 50, 10);
  222.             	var materialHDoor = new THREE.MeshBasicMaterial( { color:0x00BBAA} );
  223.             	//将material材料添加到几何体geometry
  224. 	            var meshHDoor = new THREE.Mesh(geometryHDoor, materialHDoor);
  225. 	            meshHDoor.position.x = 0;
  226. 	            meshHDoor.position.y = 45;
  227. 	            meshHDoor.position.z = -180;
  228. 	            var meshHDoor3 = new ThreeBSP( meshHDoor );
  229. 	            //scene.add(meshHDoor);
  230. 	            //墙面减去重叠的门
  231. 	            subtractMesh(meshHDoor3, meshWall3);
  232.  
  233. 	            //平行x轴横墙面3安装门
  234.                 var geometryDoor3 = new THREE.BoxGeometry(35, 50, 10);
  235.                 //加载材质
  236. 	            var textureDoor3 = THREE.ImageUtils.loadTexture('img/door.png', {}, function() {
  237. 	                renderer.render(scene, camera);
  238. 	            });
  239. 	            var materialDoor3 = new THREE.MeshBasicMaterial({
  240. 	                map: textureDoor3
  241. 	            });
  242.                 door3 = new THREE.Mesh( geometryDoor3,materialDoor3);
  243.                 door3.position.x = 0;
  244. 	            door3.position.y = 45;
  245. 	            door3.position.z = -180;
  246.                 scene.add(door3);
  247.                  /*--------平行x轴横墙面3、 z轴为墙面厚度、y轴为墙面高度--------------------*/
  248.  
  249. 	            /*--------平行x轴横墙面4、 z轴为墙面厚度、y轴为墙面高度--------------------*/
  250. 	            //平行x轴横墙面4 z轴为墙面厚度
  251.             	var geometryH4 = new THREE.BoxGeometry(365, 65, 10);
  252.             	var materialH4 = new THREE.MeshBasicMaterial( { color:0x00AABB,  wireframe: true} );
  253.             	//将material材料添加到几何体geometry
  254. 	            var meshH4 = new THREE.Mesh(geometryH4, materialH4);
  255. 	            meshH4.position.x = 0;
  256. 	            meshH4.position.y = 45;
  257. 	            meshH4.position.z = 180;
  258. 	            //平行x轴横墙面4  挖出一道门
  259. 				var meshWall4 = new ThreeBSP( meshH4 );
  260. 	            //scene.add(meshH4);
  261.  
  262. 	            //平行x轴横重叠门4 z轴为墙面厚度
  263.             	var geometryHDoor = new THREE.BoxGeometry(35, 50, 10);
  264.             	var materialHDoor = new THREE.MeshBasicMaterial( { color:0x00BBAA} );
  265.             	//将material材料添加到几何体geometry
  266. 	            var meshHDoor = new THREE.Mesh(geometryHDoor, materialHDoor);
  267. 	            meshHDoor.position.x = 0;
  268. 	            meshHDoor.position.y = 45;
  269. 	            meshHDoor.position.z = 180;
  270. 	            //scene.add(meshHDoor);
  271. 	            //重叠门
  272. 	            var meshHDoor4 = new ThreeBSP( meshHDoor );
  273. 	            //墙面减去重叠的门
  274. 	            subtractMesh(meshHDoor4, meshWall4);
  275.  
  276. 				//平行x轴横墙面4安装门
  277.                 var geometryDoor4 = new THREE.BoxGeometry(35, 50, 10);
  278.                 //加载材质
  279. 	            var textureDoor4 = THREE.ImageUtils.loadTexture('img/door.png', {}, function() {
  280. 	                renderer.render(scene, camera);
  281. 	            });
  282. 	            var materialDoor4 = new THREE.MeshBasicMaterial({
  283. 	                map: textureDoor4
  284. 	            });
  285.                 door4 = new THREE.Mesh( geometryDoor4,materialDoor4);
  286.                 door4.position.x = 0;
  287. 	            door4.position.y = 45;
  288. 	            door4.position.z = 180;
  289.                 scene.add(door4);
  290.                 /*--------平行x轴横墙面3、x轴为墙面长度、 z轴为墙面厚度、y轴为墙面高度-------------------*/
  291.  
  292.             }
  293.  
  294.             //运算减去
  295.             /*
  296.              * meshDoor 门面
  297.              * meshWall 墙面
  298.              */
  299.             function subtractMesh(meshDoor,meshWall){
  300.             	//平行x轴横墙面4减去与meshHDoor门重叠部分
  301. 				var subtract_bsp = meshWall.subtract( meshDoor );
  302. 				var result = subtract_bsp.toMesh( new THREE.MeshLambertMaterial({
  303. 					shading: THREE.SmoothShading,
  304. 					map: THREE.ImageUtils.loadTexture('./img/floor-1.jpg')
  305. 				}));
  306. 				result.geometry.computeVertexNormals();
  307. 				scene.add( result );
  308.             }
  309.             //初始化页面加载
  310.             function threeStart(){
  311.                 //初始化DOM对象
  312.                 initDOM();
  313.                 //初始化渲染器
  314.                 initThree();
  315.                 //初始化场景
  316.                 initScene();
  317.                 //初始透视化相机
  318.                 initCamera();
  319.                 //初始化光源
  320.                 initLight();
  321.                 //模型对象
  322.                 initObject();
  323.                 //初始化网格辅助线
  324.                 initGrid();
  325.                 //渲染
  326.                 //renderer.render(scene, camera);
  327.                 //实时动画
  328.                 animation();
  329.                 //监听鼠标滚动事件
  330.                 canvas.addEventListener('mousewheel', mousewheel, false);
  331.             }
  332.             function animation(){
  333.                 //相机围绕y轴旋转，并且保持场景中的物体一直再相机的视野中
  334.                 //实时渲染成像
  335.                 var timer = Date.now()*0.0001;
  336.                 camera.position.x = Math.cos(timer)*400;
  337.                 camera.position.z = Math.sin(timer)*400;
  338.                 camera.lookAt(scene.position);
  339.                 renderer.render(scene, camera);
  340.                 requestAnimationFrame(animation);
  341.             }
  342. 	        //鼠标滑轮-鼠标上下滑轮实现放大缩小效果
  343. 	        function mousewheel(e) {
  344. 	            e.preventDefault();
  345. 	            //e.stopPropagation();
  346. 	            if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
  347. 	                if (e.wheelDelta > 0) { //当滑轮向上滚动时
  348. 	                    fov -= (near < fov ? 1 : 0);
  349. 	                }
  350. 	                if (e.wheelDelta < 0) { //当滑轮向下滚动时
  351. 	                    fov += (fov < far ? 1 : 0);
  352. 	                }
  353. 	            } else if (e.detail) {  //Firefox滑轮事件
  354. 	                if (e.detail > 0) { //当滑轮向上滚动时
  355. 	                    fov -= 1;
  356. 	                }
  357. 	                if (e.detail < 0) { //当滑轮向下滚动时
  358. 	                    fov += 1;
  359. 	                }
  360. 	            }
  361. 	            //改变fov值，并更新场景的渲染
  362. 	            camera.fov = fov;
  363. 	            camera.updateProjectionMatrix();
  364. 	            renderer.render(scene, camera);
  365. 	            //updateinfo();
  366. 	        }
  367.     </script>
  368. </html>

使用Three.js挖空安装门来解决重叠闪烁的问题的更多相关文章

  1. windows下node.js+sublime中安装coffeescript

    node.js中安装Coffeescript 1.我的node.js安装目录 2.node.js 全局模块所在目录   3.node.js安装coffeescript npm install -g c ...

  2. node.js的npm安装

    我不打算引进node.js的npm安装,但发现node.js通过管理一些包npm实现,或给一个简短的npm. 1.npm什么        npm是一个node包管理和分发工具,已经成为了非官方的公布 ...

  3. Node.js 多版本安装

    Node.js 多版本安装 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine(Node.js 是一个基于 ...

  4. <亲测>CentOS 7.3下Node.js 8.6安装配置（含NPM以及PM2）

    CentOS 7.3下Node.js 8.6安装配置 2017年09月30日 14:12:02 阅读数:2245更多 个人分类: Nodejs   版权声明:本文为博主原创文章,未经博主允许不得转载. ...

  5. ArcGIS案例学习笔记-批处理擦除挖空挖除相减

    ArcGIS案例学习笔记-批处理擦除挖空挖除相减 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:批处理擦除.挖空.挖除.相减 数据源:chp13/ex5/pa ...

  6. ArcGIS案例学习笔记-手动编辑擦除挖空挖除相减

    ArcGIS案例学习笔记-手动编辑擦除挖空挖除相减 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:手动编辑擦除.挖空.挖除.相减 1. 选中内部要素 2. c ...

  7. js判断是否安装flash player及当前版本 和 检查flash版本是否需要升级

    一.js检查flash版本升级 for (var i = 0, len = navigator.plugins.length; i < len; i++) { var plugin = navi ...

  8. light，node.js，webStorm 安装项目搭建

    light,是一个移动应用开发平台,旨在降低H5.APP的开发门槛.运维成本.提升移动应用产品的持续交付能力. 用light可以做什么 快速组织移动H5应用的协作开发.调试.应用发布,发布的应用可直接 ...

  9. vue.js 2.0 --- 安装node环境,webpack和脚手架(入门篇)

    1.环境搭建 1.1.安装node.js 1.2 安装过程很简单,一路“下一步”就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号 ...

随机推荐

  1. 南大算法设计与分析课程OJ答案代码（5）--割点与桥和任务调度问题

    问题 A: 割点与桥 时间限制: 1 Sec  内存限制: 5 MB提交: 475  解决: 34提交 状态 算法问答 题目描述 给出一个无向连通图,找到所有的割点和桥 输入 第一行:点的个数,如果点 ...

  2. 启动sql2012时出现Cannot find one or more components.Please reinstall the application

    ①在运行中输入regedit.exe,启动注册表工具 ②找到注册表中的此处路径“HKEY_CURRENT_USER\Software\Microsoft\SQL Server Management S ...

  3. 类似aaa?a=1&b=2&c=3&d=4，如何将问号以后的数据变为键值对

    string result = "aaa?a=1&b=2&c=3&d=4"; string[] array = result.Split('?'); //s ...

  4. [转]Rabbitmq的使用及Web监控工具使用

    本文转自:https://blog.csdn.net/xingxing513234072/article/details/51014850 一.文档资料        1.官方网站:http://ww ...

  5. [转]c# System.IO.Ports SerialPort Class

    本文转自:https://docs.microsoft.com/en-us/dotnet/api/system.io.ports.serialport?redirectedfrom=MSDN& ...

  6. ProtoBuf使用指南（C++）

    ProtoBuf使用指南(C++) Created: Mar 12, 2019 6:47 PM Last Edited Time: Mar 22, 2019 1:51 PM 1.安装部署 去官网(gi ...

  7. MySQL分页查询性能优化

    当需要从数据库查询的表有上万条记录的时候,一次性查询所有结果会变得很慢,特别是随着数据量的增加特别明显,这时需要使用分页查询.对于数据库分页查询,也有很多种方法和优化的点.下面简单说一下我知道的一些方 ...

  8. SVN服务器本地搭建与使用

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6623026.html  使用SVN进行代码管理,需要搭建服务端资源库,然后在使用SVN的电脑安装SVN客户端或 ...

  9. Excel通用类工具(一)

    前言 最近项目中遇到要将MySQL数据库中的某些数据导出为Excel格式保存,在以前也写过这样的功能,这次就准备用以前的代码,但是看了一下,这次却不一样,因为在以前用到的都是导出一种或几种数据,种类不 ...

  10. 精心收集的 48 个 JavaScript 代码片段，仅需 30 秒就可理解！

    原文:https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates 作者:Chalaran ...