使用Three.js挖空安装门来解决重叠闪烁的问题

最新推荐文章于 2024-06-05 15:10:42 发布
最新推荐文章于 2024-06-05 15:10:42 发布
阅读量790 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zjf-1992/p/6278547.html
版权

    一、挖空原理说明

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

//参与减去几何体 
//平行于x轴门
var meshH4Door = new ThreeBSP( meshHDoor );  
//平行x轴横墙面
var meshWall4 = new ThreeBSP( meshH4 );

//平行x轴横墙面meshWall4对象 减去与meshH4Door门重叠部分  
var subtract_bsp = meshWall4.subtract( meshH4Door );
var result = subtract_bsp.toMesh( new THREE.MeshLambertMaterial({ 
	shading: THREE.SmoothShading,
	map: THREE.ImageUtils.loadTexture('./img/floor-1.jpg'),
	color: 0xff0000}) );
result.geometry.computeVertexNormals();
//添加至场景中
scene.add( result );  　

效果图

源代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>threejs中挖空解决闪烁bug</title>
        <style>
            #canvas-frame {
                width: 100%;
                height: 450px;
            }
        </style>
    </head>
    <body οnlοad="threeStart()">
        <div id="canvas-frame" ></div>
    </body>
    <script type="text/javascript" src="./lib/three.js" ></script>
    <!-- 运算挖门 解决闪烁bug -->
    <script type="text/javascript" src="lib/ThreeCSG.js"></script>
    <script type="text/javascript">
            var renderer, //渲染器
                width = document.getElementById('canvas-frame').clientWidth, //画布宽
                height = document.getElementById('canvas-frame').clientHeight; //画布高
            //照相机配置
            var fov = 45,//拍摄距离  视野角值越大，场景中的物体越小
                near = 1,//最小范围
                far = 1000;//最大范围
            //DOM对象
            var canvas = null;
            //初始化DOM对象   
            function initDOM(){
                canvas = document.getElementById("canvas-frame");
            }
            //初始化渲染器
            function initThree(){
                renderer = new THREE.WebGLRenderer({
                     antialias : true
                     //canvas: document.getElementById('canvas-frame')
                });
                renderer.setSize(width, height);
                renderer.setClearColor(0xFFFFFF, 1.0);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                    renderer.setClearColor(0xFFFFFF, 1.0);
            }
            //初始化场景
            var scene;
            function initScene(){
                scene = new THREE.Scene();
            }
            var camera;
            function initCamera() {  //透视相机
                camera = new THREE.PerspectiveCamera(fov,  width/height , near, far);
                camera.position.x = 150;
                camera.position.y = 150;
                camera.position.z =450;
                camera.up.x = 0;
                camera.up.y = 1; //相机朝向--相机上方为y轴
                camera.up.z = 0;
                camera.lookAt({  //相机的中心点
                    x : 0,
                    y : 0,
                    z : 0
                });
            }
            function initLight(){
                // light--这里使用环境光
                //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
                //light.position.set(600, 1000, 800);
                var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
                light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置
                scene.add(light);
            }
            function initObject(){  //初始化对象
                //初始化地板
                initFloor();
                initWall();
            }
            function initGrid(){ //辅助网格
                var helper = new THREE.GridHelper( 1000, 50 );
                helper.setColors( 0x0000ff, 0x808080 );
                scene.add( helper );
            }
            function initFloor(){
            	
            	 //导入材质
                var texture = THREE.ImageUtils.loadTexture('img/floor-1.jpg', {}, function() {
                    renderer.render(scene, camera);
                });
                /**
                 * 关于material材料注意点说明 
                 * MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框。
                 * MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体。
                 * MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体。
                 */
                var material = new THREE.MeshLambertMaterial({
                    map: texture
                });
                
                //创建一个立方体
                var geometry = new THREE.BoxGeometry(400, 20, 400);
                 for ( var i = 0; i < geometry.faces.length; i += 2 ) {
                    var hex = Math.random() * 0xffffff;
                    geometry.faces[ i ].color.setHex( hex );
                    geometry.faces[ i + 1 ].color.setHex( hex );
                }
                //var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
                //将material材料添加到几何体geometry
                var mesh = new THREE.Mesh(geometry, material);
                mesh.position = new THREE.Vector3(0,0,0);
                scene.add(mesh);
            }
            //墙面
            function initWall(){
            	
            	 //导入墙面材质(后面墙面共用)
                var texture = THREE.ImageUtils.loadTexture('img/floor-1.jpg', {}, function() {
                    renderer.render(scene, camera);
                });
                /**
                 * 关于material材料注意点说明 
                 * MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框。
                 * MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体。
                 * MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体。
                 */
                var material = new THREE.MeshLambertMaterial({
                    map: texture
                });
                
                /*--------平行z轴横墙面3、x轴为墙面的厚度、 z轴为墙面长度、y轴为墙面高度--------------------*/
            	//平行z轴横墙面1   x轴为墙面厚度
            	var geometryH1 = new THREE.BoxGeometry(10, 65, 360);
            	/*var materialH1 = new THREE.MeshBasicMaterial( { color:0xFF0000 } );*/
            	//将material材料添加到几何体geometry
	            var meshH1 = new THREE.Mesh(geometryH1, material);
	            meshH1.position.x = 180;
	            meshH1.position.y = 45;
	            //scene.add(meshH1);
	            var meshWall1 = new ThreeBSP( meshH1 );
	            
	            var geometryHDoor1 = new THREE.BoxGeometry(10, 56, 35);
            	var materialHDoor1 = new THREE.MeshBasicMaterial( { color:0x00BBAA} );
            	//将material材料添加到几何体geometry
	            var meshHDoor1 = new THREE.Mesh(geometryHDoor1, materialHDoor1);
	            meshHDoor1.position.x = 180;
	            meshHDoor1.position.y = 45;
	            meshHDoor1.position.z = 0;
	            //scene.add(meshHDoor2);
	            var meshHDoor1 = new ThreeBSP( meshHDoor1 );
	            //墙面减去重叠的门
	            subtractMesh(meshHDoor1, meshWall1);
	            
	            //为墙面1安装门
	            var geometryHDoor1 = new THREE.BoxGeometry(10, 56, 35);
	            //加载材质
	            var textureDoor1 = THREE.ImageUtils.loadTexture('img/door.png', {}, function() {
	                renderer.render(scene, camera);
	            });
	            var materialDoor1 = new THREE.MeshBasicMaterial({
	                map: textureDoor1
	            });
            	//var materialHDoor2 = new THREE.MeshBasicMaterial( { color:0x00BBAA} );
            	//将material材料添加到几何体geometry
	            var meshHDoor1 = new THREE.Mesh(geometryHDoor1, materialDoor1);
	            meshHDoor1.position.x = 180;
	            meshHDoor1.position.y = 45;
	            meshHDoor1.position.z = 0;
	            scene.add(meshHDoor1);
	            
	            //平行z轴横墙面2 x轴为墙面厚度
            	var geometryH2 = new THREE.BoxGeometry(10, 65, 360);
            	var materialH2 = new THREE.MeshBasicMaterial( { color:0xFF00FF } );
            	//将material材料添加到几何体geometry
	            var meshH2 = new THREE.Mesh(geometryH2, materialH2);
	            meshH2.position.x = -180;
	            meshH2.position.y = 45;
	            var meshWall2 = new ThreeBSP( meshH2 );
	            //scene.add(meshH2);
	            
	            var geometryHDoor2 = new THREE.BoxGeometry(10, 56, 35);
            	var materialHDoor2 = new THREE.MeshBasicMaterial( { color:0x00BBAA} );
            	//将material材料添加到几何体geometry
	            var meshHDoor2 = new THREE.Mesh(geometryHDoor2, materialHDoor2);
	            meshHDoor2.position.x = -180;
	            meshHDoor2.position.y = 45;
	            meshHDoor2.position.z = 0;
	            var meshHDoor2 = new ThreeBSP( meshHDoor2 );
	            //scene.add(meshHDoor2);
	            //墙面减去重叠的门
	            subtractMesh(meshHDoor2, meshWall2);
	            
	            
	            //为墙面2安装门
	            var geometryHDoor2 = new THREE.BoxGeometry(10, 56, 35);
	            //加载材质
	            var textureDoor2 = THREE.ImageUtils.loadTexture('img/door.png', {}, function() {
	                renderer.render(scene, camera);
	            });
	            var materialDoor2 = new THREE.MeshBasicMaterial({
	                map: textureDoor2
	            });
            	//var materialHDoor2 = new THREE.MeshBasicMaterial( { color:0x00BBAA} );
            	//将material材料添加到几何体geometry
	            var meshHDoor2 = new THREE.Mesh(geometryHDoor2, materialDoor2);
	            meshHDoor2.position.x = -180;
	            meshHDoor2.position.y = 45;
	            meshHDoor2.position.z = 0;
	            scene.add(meshHDoor2);
	        /*--------平行z轴横墙面3、x轴为墙面的厚度、 z轴为墙面长度、y轴为墙面高度--------------------*/
	            
	            
	       /*--------平行x轴横墙面3、x轴为墙面长度、 z轴为墙面厚度、y轴为墙面高度--------------------*/
	       //平行x轴横墙面3   z轴为墙面厚度
            	var geometryH3 = new THREE.BoxGeometry(365, 65, 10);
            	var materialH3 = new THREE.MeshBasicMaterial( { color:0x808080 } );
            	//将material材料添加到几何体geometry
	        var meshH3 = new THREE.Mesh(geometryH3, material);
	            meshH3.position.x = 0;
	            meshH3.position.y = 45;
	            meshH3.position.z = -180;
	            var meshWall3 = new ThreeBSP( meshH3 );
	            //scene.add(meshH3);
	            
	            //平行x轴横重叠门3 z轴为墙面厚度
            	var geometryHDoor = new THREE.BoxGeometry(35, 50, 10);
            	var materialHDoor = new THREE.MeshBasicMaterial( { color:0x00BBAA} );
            	//将material材料添加到几何体geometry
	            var meshHDoor = new THREE.Mesh(geometryHDoor, materialHDoor);
	            meshHDoor.position.x = 0;
	            meshHDoor.position.y = 45;
	            meshHDoor.position.z = -180;
	            var meshHDoor3 = new ThreeBSP( meshHDoor );
	            //scene.add(meshHDoor);
	            //墙面减去重叠的门
	            subtractMesh(meshHDoor3, meshWall3);
	            
	            //平行x轴横墙面3安装门
                var geometryDoor3 = new THREE.BoxGeometry(35, 50, 10);
                //加载材质
	            var textureDoor3 = THREE.ImageUtils.loadTexture('img/door.png', {}, function() {
	                renderer.render(scene, camera);
	            });
	            var materialDoor3 = new THREE.MeshBasicMaterial({
	                map: textureDoor3
	            });
                door3 = new THREE.Mesh( geometryDoor3,materialDoor3);
                door3.position.x = 0;
	            door3.position.y = 45;
	            door3.position.z = -180;
                scene.add(door3);
                 /*--------平行x轴横墙面3、 z轴为墙面厚度、y轴为墙面高度--------------------*/
	            
	            /*--------平行x轴横墙面4、 z轴为墙面厚度、y轴为墙面高度--------------------*/
	            //平行x轴横墙面4 z轴为墙面厚度
            	var geometryH4 = new THREE.BoxGeometry(365, 65, 10);
            	var materialH4 = new THREE.MeshBasicMaterial( { color:0x00AABB,  wireframe: true} );
            	//将material材料添加到几何体geometry
	            var meshH4 = new THREE.Mesh(geometryH4, materialH4);
	            meshH4.position.x = 0;
	            meshH4.position.y = 45;
	            meshH4.position.z = 180;
	            //平行x轴横墙面4  挖出一道门
				var meshWall4 = new ThreeBSP( meshH4 );
	            //scene.add(meshH4);
	            
	            //平行x轴横重叠门4 z轴为墙面厚度
            	var geometryHDoor = new THREE.BoxGeometry(35, 50, 10);
            	var materialHDoor = new THREE.MeshBasicMaterial( { color:0x00BBAA} );
            	//将material材料添加到几何体geometry
	            var meshHDoor = new THREE.Mesh(geometryHDoor, materialHDoor);
	            meshHDoor.position.x = 0;
	            meshHDoor.position.y = 45;
	            meshHDoor.position.z = 180;
	            //scene.add(meshHDoor);
	            //重叠门
	            var meshHDoor4 = new ThreeBSP( meshHDoor );
	            //墙面减去重叠的门
	            subtractMesh(meshHDoor4, meshWall4);
	            
				//平行x轴横墙面4安装门
                var geometryDoor4 = new THREE.BoxGeometry(35, 50, 10);
                //加载材质
	            var textureDoor4 = THREE.ImageUtils.loadTexture('img/door.png', {}, function() {
	                renderer.render(scene, camera);
	            });
	            var materialDoor4 = new THREE.MeshBasicMaterial({
	                map: textureDoor4
	            });
                door4 = new THREE.Mesh( geometryDoor4,materialDoor4);
                door4.position.x = 0;
	            door4.position.y = 45;
	            door4.position.z = 180;
                scene.add(door4);
                /*--------平行x轴横墙面3、x轴为墙面长度、 z轴为墙面厚度、y轴为墙面高度-------------------*/
                
            }
            
            //运算减去
            /*
             * meshDoor 门面
             * meshWall 墙面  
             */
            function subtractMesh(meshDoor,meshWall){
            	//平行x轴横墙面4减去与meshHDoor门重叠部分
				var subtract_bsp = meshWall.subtract( meshDoor );
				var result = subtract_bsp.toMesh( new THREE.MeshLambertMaterial({
					shading: THREE.SmoothShading, 
					map: THREE.ImageUtils.loadTexture('./img/floor-1.jpg') 
				}));
				result.geometry.computeVertexNormals();
				scene.add( result );
            }
            //初始化页面加载
            function threeStart(){
                //初始化DOM对象
                initDOM();
                //初始化渲染器
                initThree();
                //初始化场景
                initScene();
                //初始透视化相机
                initCamera();
                //初始化光源
                initLight();
                //模型对象
                initObject();
                //初始化网格辅助线
                initGrid();
                //渲染
                //renderer.render(scene, camera);
                //实时动画
                animation();
                //监听鼠标滚动事件
                canvas.addEventListener('mousewheel', mousewheel, false);
            }
            function animation(){
                //相机围绕y轴旋转，并且保持场景中的物体一直再相机的视野中
                //实时渲染成像
                var timer = Date.now()*0.0001;
                camera.position.x = Math.cos(timer)*400;
                camera.position.z = Math.sin(timer)*400;
                camera.lookAt(scene.position);
                renderer.render(scene, camera);
                requestAnimationFrame(animation);
            }
	        //鼠标滑轮-鼠标上下滑轮实现放大缩小效果
	        function mousewheel(e) {
	            e.preventDefault();
	            //e.stopPropagation();
	            if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
	                if (e.wheelDelta > 0) { //当滑轮向上滚动时
	                    fov -= (near < fov ? 1 : 0);
	                }
	                if (e.wheelDelta < 0) { //当滑轮向下滚动时
	                    fov += (fov < far ? 1 : 0);
	                }
	            } else if (e.detail) {  //Firefox滑轮事件
	                if (e.detail > 0) { //当滑轮向上滚动时
	                    fov -= 1;
	                }
	                if (e.detail < 0) { //当滑轮向下滚动时
	                    fov += 1;
	                }
	            }
	            //改变fov值，并更新场景的渲染
	            camera.fov = fov;
	            camera.updateProjectionMatrix();
	            renderer.render(scene, camera);
	            //updateinfo();
	        }
    </script>
</html>

转载于:https://www.cnblogs.com/zjf-1992/p/6278547.html

weixin_34320159
关注
threejs中几种挖洞方式
jun279876704的博客
05-31 1741
1.earcut多边形三角划分也可以用来直接挖洞 let prehole = []; for (let i: number = 0; i < hole.length; i++) { prehole.push(hole[i].x, hole[i].z, 0); } let points = preface.concat(prehole); let holeIndexs = [];
three.js简单例子 墙上挖门
06-02
项目要用到web3d 但是webgl学习起来太麻烦，先用three.js库写这点，初期做个记录。 关于框架的基本搭建和js引入，场景相机等的基本添加就不说明了，随便搜一下就一堆说明，重点说下如何在墙壁上挖一个门出来
Three.js 透明模型材质重叠部分冲突闪烁问题
weixin_41835191的博客
02-28 717
今天渲染了一堆透明材质的模型，在推移相机的过程中发现重叠部分的材质闪烁，看起来像threejs不知道该优先渲染哪个模型哪个面。
把泥扔在墙上
danpu1174的博客
04-14 210
我一次又一次地使用在墙上扔泥巴的隐喻。 作为对我所做工作的描述，以及作为组织变革的隐喻。 当您将泥浆扔在墙上时，大部分泥浆会立即脱落。 有些会粘一会儿然后掉下来。 一点棍子永久。 也许太少了。 因此，您投入更多，同样的事情也会发生。 有时看起来好像没有泥土卡住，但实际上一点点都可以，即使您看不到它。 每次泥土掉下来都是令人悲伤的，甚至令人沮丧，但你必须不断扔。 那就是您真正能做的。 ...
Three.js人门 案例
weixin_43506403的博客
10-29 372
刚入门 Three.js 什么是 Three.js？ Three.js 是一款 webGL 框架，由于其易用性被广泛应用。Three.js 在 WebGL 的 API 接口基础上，又进行的一层封装。它是由居住在西班牙巴塞罗那的程序员 Ricardo Cabbello Miguel 所开发，他更为人知的网名是 Mr.doob。 Three.js 以简单、直观的方式封装了 3D 图形编程中常用的对象。Three.js 在开发中使用了很多图形引擎的高级技巧，极大地提高了性能。另外，由于内置了很多常用对象和极易
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip
12-10
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js...
使用 Three.js 的 3D 艺术博物馆.zip
07-14
在本项目"使用 Three.js 的 3D 艺术博物馆.zip"中，我们探讨了如何利用Three.js库创建一个互动式的3D艺术博物馆。Three.js是JavaScript的一个库，专门用于在Web浏览器中构建和展示三维图形。这个库极大地简化了WebGL...
使用THREE.js库的 WebGL 火灾模拟器.zip
07-14
THREE.js是一个强大的JavaScript库，专门用于在Web浏览器中创建3D图形，它利用WebGL技术，这是一种基于OpenGL标准的JavaScript API，允许开发者在网页上实现高性能的交互式3D图形。在这个“使用THREE.js库的WebGL...
vue使用three.js引入外部obj，mtl模型.zip
05-31
在Vue.js应用中集成Three.js库来加载外部的3D模型，如.obj和.mtl文件，是一种常见的增强网页3D视觉效果的方法。Three.js是一个强大的JavaScript库，它为WebGL提供了一个简单易用的接口，使得在浏览器中创建复杂的3D...
使用three.js实现室内路径规划demo
05-21
使用three.js基于已有的路径和节点数据 使用d算法实现室内地图点选路径规划 具体效果参见我的博客：https://blog.csdn.net/u014529917/article/details/100424812
three.js 画的3D房间布局，可用Enter件控制开门，关门。
09-20
在支持webgl的浏览器上打开room.html,即可看到效果图。如果加载不出来，打开Chrome快捷方式的属性中设置：右击Chrome浏览器快捷方式， 选择“属性”，在“目标”中加上"--allow-file-access-from-files"，注意前面有个空格，重启Chrome浏览器便可。three.js 画的3D房间布局，可用Enter件控制开门，关门。
【Threejs效果：挖空几何体】ThreeBSP实现墙体挖洞
popstarqq的博客
05-30 2381
Threejs创建墙体挖洞效果
Three.js深度冲突(模型闪烁)与解决方案
dabaooooq的博客
05-23 2996
创建两个重合的矩形平面Mesh，通过浏览器预览，当你旋转三维场景的时候，你会发现模型渲染的时候产生闪烁。 这种现象，主要是两个Mesh重合，电脑GPU分不清谁在前谁在后，这种现象，可以称为深度冲突Z-fighting。
ThreeJs：裁剪( BSP编)挖洞和贴图
太古时代的专栏
09-01 2574
ThreeBSP的下载 https://github.com/sshirokov/ThreeBSP <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body ...
ThreeJs：裁剪( Path编)挖洞和贴图
太古时代的专栏
09-03 5259
本内容是裁剪( Path编)的延申 裁剪( Path编)：https://blog.csdn.net/jinold/article/details/91345585 <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - geometry - shapes<...
Threejs墙体挖洞做门或窗
最新发布
qq_33298964的博客
06-05 448
在使用Threejs代码构建的展厅中，需要在一面墙中间挖个洞作为门或窗户。引入ThreeBSP.js
040318_three.js_开关门动画简单实现
chuigoujian9267的博客
04-03 620
<!DOCTYPE html> <html lang="en"> <head> <title>untitled</title> . .0 <meta name="viewport" content="width=de...
threejs- z-fighting 问题
目尽地平线
09-08 6292
在threejs中，使用z-buffer来处理模型的可见性，由于z-buffer是有限的，难免会出现两个面对应到同一个深度等级的情况，这种情况可能会造成模型的闪烁，破面，是使用threejs经常会遇到的一个问题。在这里做一下总结
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值