ThreeJs：裁剪( BSP编)挖洞和贴图

最新推荐文章于 2024-06-05 15:10:42 发布

太古时代

最新推荐文章于 2024-06-05 15:10:42 发布

阅读量2.5k

点赞数 1

分类专栏： Canvas与WebGL

本文链接：https://blog.csdn.net/jinold/article/details/100179957

版权

Canvas与WebGL 专栏收录该内容

20 篇文章 7 订阅

订阅专栏

ThreeBSP的下载

https://github.com/sshirokov/ThreeBSP

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100%; }
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script src="js/controls/OrbitControls.js"></script>
    <script src="js/threeBSP.js"></script>
    <script>
        var scene;
		var renderer;
		var camera;
        function initScene(){
            scene = new THREE.Scene();
        }

        
        function initCamera(){
            camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 0.1, 1000);
            camera.position.z = 40;
            camera.position.y = 40;
            camera.position.x = 20;
            camera.lookAt({x:0,y:0,z:1});
            controls = new THREE.OrbitControls( camera );
        }
 
        
        function initRender(){
            renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            renderer.setClearColor(0xFFFFFF, 1.0);
        }
 
 
        function initObject(){
 
            // 墙面3
            var cubeGeometry = new THREE.BoxGeometry(1, 10, 30);
            var cube = new THREE.Mesh( cubeGeometry );            // 设置墙面位置
 
 
            // 窗户
            var door = new THREE.BoxGeometry(1, 8, 15);
            var doorMesh = new THREE.Mesh( door);
            doorMesh.position.z = 5
 
            var cubeBSP = new ThreeBSP(cube);
            var doorBSP = new ThreeBSP(doorMesh);
 
            resultBSP = cubeBSP.subtract(doorBSP); // 墙体挖窗户
            result = resultBSP.toMesh();
            
			
            var cubeGeometry = result.geometry
			
            var cubeMaterial = new THREE.MeshBasicMaterial({
            	map:THREE.ImageUtils.loadTexture('module/1.jpg')
            })
			
            qiangTiMesh = new THREE.Mesh(cubeGeometry,cubeMaterial);
            scene.add(qiangTiMesh);
        }
 
        function render() {
            requestAnimationFrame( render );
            renderer.render( scene, camera );
        }
        init();
        render();
 
        function init(){
            initRender();
            initScene();
            initCamera();
            initObject();
        }
    </script>
</body>
</html>

我们看下cubeGeometry的内容，原来用的也是face操作

关于face、faceVertexUvs的理解的说明参考

https://blog.csdn.net/jinold/article/details/97831606

其他参考文件：

http://www.yanhuangxueyuan.com/three.js_course/boolean.html

http://www.mamicode.com/info-detail-1649440.html

https://www.wjceo.com/blog/threejs/2018-02-12/53.html

太古时代

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
ThreeJs：裁剪( BSP编)挖洞和贴图

ThreeBSP的下载https://github.com/sshirokov/ThreeBSP<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> body ...
复制链接

扫一扫