专栏首页时光笔记ThreeJS 掏洞术

ThreeJS 掏洞术

前言

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

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

示例

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

相关函数

名称

描述

intersect(交集)

获取两个几何体的相同部分

union(并集)

将两个几何体合并

subtract(差集)

从一个几何体中删除与另一个几何体重合的部分。

资源链接:https://cdn.ttext.cn/2019/12/ThreeBSP.js

思路

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

  1. 创建一个‘被挖洞’的几何体!意思就是,你要挖山洞,你起码得有个山吧!
  2. 创建一个‘洞’的几何体!意思就是,你要挖山洞,不光要找好被挖的山,还要设计一个洞!
  3. 调用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);

掏完的效果请看:

本文到此结束,欢迎评论,提意见!


转发请注明本文链接。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JAVA生成RSA密匙对

    Melody132
  • [转发] Spring MVC请求流程

    SpringMVC框架是一个基于请求驱动的Web框架,并且使用了‘前端控制器’模型来进行设计,再根据‘请求映射规则’分发给相应的页面控制器进行处理。

    Melody132
  • Java 对象的初始化过程_上

    本文主要以白话的形式 ‘简单’ 的描述在 java 中 new 对象的过程,之所以说是 ‘简单’ 的描述是因为,在本文中不会讲述底层的加载过程。

    Melody132
  • WordPress获取文章浏览总数

    大部分 WordPress 都会安装 wp-postviews 插件来记录文章浏览量,这是一个很实用的插件。不过它并没有提供计算文章浏览总数的功能,为了弥补这个...

    张戈
  • Unity背包系统

    1.通过UIManager(单例)管理不同的Panel 2.通过BagWindow对背包进行管理 提供方法: 1)OnPackOpen此方法刷新背包中的数...

    祝你万事顺利
  • JVM基本结构及内存模型及优化

    JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模...

    攻城狮的那点事
  • Top 6 常见问题关于Java中的Map1 将Map转换成一个List2 遍历map中的键值对3 根据Map的key值排序4 根据Map的value值排序5 初始化一个静态的不可变的Map6 Has

    我们都知道Map是一种键-值对的数据结构,每个键都是唯一的!本文讨论了关于Java中Map使用的最常见的8个问题。为了叙述的简单,所有的例子都会使用泛型。并且本...

    desperate633
  • 73页PPT,教你从0到1构建用户画像系统(附下载)

    Sam Gor
  • 程序的入口

    操作系统装载应用程序后,做完初始化工作就转到程序的入口点执行。程序的默认入口点由连接程序设置, 不同的连接器选择的入口函数也不尽相同。在VC++下,连接...

    _gongluck
  • NLP之文本表示

    我们在做模型训练的时候,不是直接把文本或者词语传给计算机让其进行计算,而是需要将单词、句子、文本转换成向量或者矩阵进行计算,而如何将文本转换成向量就是本文需要介...

    prepared

扫码关注云+社区

领取腾讯云代金券