ThreeJS 掏洞术

Melody132

发布于 2020-03-11 18:11:45

3.6K1

发布于 2020-03-11 18:11:45

文章被收录于专栏：时光笔记

前言

最近闲来无事，于是我就想用 ThreeJS 画个房子 ๑乛◡乛๑ 。而我选择从画 ‘墙’ 开始下手，其实说白了‘墙’ 就是个立方体而已，但是窗户、门呢，所以就需要在立方体上边掏个洞。

那么本文将‘简单描述’一下掏洞的过程，我之所以说‘简单描述’是因为本文中不会掺杂 ‘墙’ 这个话题，在本文中只简述《如何在ThreeJS中的立方体上掏洞》的干货。

示例

由于ThreeJS本身并没有提供用于几何体布尔运算的函数，那么首先认识一个可以实现对几何体布尔运算的扩展库 ThreeBSP ，它来自GitHub，它可以帮我们获取两个几何体的相同部分、将两个几何体合并、从一个几何体中删除与另一个几何体重合的部分。

名称	描述
intersect（交集）	获取两个几何体的相同部分
union（并集）	将两个几何体合并
subtract（差集）	从一个几何体中删除与另一个几何体重合的部分。

思路

大体思路就是，创建一个‘被掏洞’的几何体，然后创建‘洞’的几何体，将两个几何体重合，然后调用ThreeBSP的subtract函数取差集实现！下面是具体操作步骤：

创建一个‘被挖洞’的几何体！意思就是，你要挖山洞，你起码得有个山吧！
创建一个‘洞’的几何体！意思就是，你要挖山洞，不光要找好被挖的山，还要设计一个洞！
调用ThreeBSP的subtract函数进行几何体布尔运算！意思就是，找工程队开挖！

实现

创建一个‘被挖洞’的几何体

let wall = new THREE.Mesh(
        new THREE.BoxGeometry(500, 300, 10),
        new THREE.MeshBasicMaterial({color:0x00ff00})
    );

wall.position.x = 0;
wall.position.y = 0;
wall.position.z = 0;

创建一个‘洞’的几何体，并与‘被挖洞’的几何体坐标重合

let window1 = new THREE.Mesh(
        new THREE.BoxGeometry(350, 150, 10),
        new THREE.MeshBasicMaterial({color:0xff0000})
    );

window1.position.x = 0;
window1.position.y = 0;
window1.position.z = 0;

可以先将两个几何体添加到场景中看一下视觉效果，看完记得从场景中将其删除，这两个几何体不需要出现到场景中

调用ThreeBSP的subtract函数进行几何体布尔运算，并将结果添加到场景当中

//将两个几何体转换成BSP对象
let bsp_wall = new ThreeBSP(wall);
let bsp_window1 = new ThreeBSP(window1);
//开始计算从bsp_wall减去bsp_window1后的BSP对象
let BSP = bsp_wall.subtract(bsp_window1);
//获取结算结果中的geometry对象
let geometry = BSP.toMesh().geometry;
//生成计算结果的几何体
let res = new THREE.Mesh(
        geometry,
        new THREE.MeshBasicMaterial({color:0x00ff00})
    );
//将几何体添加到场景中
scene.add(res);

掏完的效果请看: