十、Three场景实现多个物体的合并

9月前作者：arguments_zd 分类：Toy博客阅读(42) 违法举报

这篇具有很好参考价值的文章主要介绍了十、Three场景实现多个物体的合并。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Three场景实现多个物体的合并

目的
产品需求是让物体的光柱墙包含一个多边形的区域，二而我的多边形只能使用原型，方向，多边形。那么再研究的时候就需要将这些多边形合并成为一个形状，那么就行实现了。

原先的图形

十、Three场景实现多个物体的合并,3D开发专栏,arcgis,3d,前端,three

如上图，是两个mesh组成的。首先寻找mesh合并的方法。

第一步。

在网上找了一下，能够npm直接安装的只有一个。Threebsp

先用 npm 下载了三方包
npm i three-js-csg
再使用
const ThreeBSP = require(‘three-js-csg’)(THREE)
出现一下报错
十、Three场景实现多个物体的合并,3D开发专栏,arcgis,3d,前端,three

查了是因为require 是webpack 里的 vite不支持所以找不到
然后我就尝试使用 import的方法引入
import ThreeBSP from ‘three-js-csg’;
结果又出现了如下的报错
十、Three场景实现多个物体的合并,3D开发专栏,arcgis,3d,前端,three

threeBSP 这个现在已经不更新了【对新版本不支持了geometry新版中移除了】<文章来源地址https://www.toymoban.com/news/detail-796822.html

到了这里，关于十、Three场景实现多个物体的合并的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

Three.js教程：第一个3D场景

推荐：将 NSDT场景编辑器加入你3D工具链其他工具系列： NSDT简石数字孪生下面的代码完整展示了通过three.js引擎创建的一个三维场景，在场景中绘制并渲染了一个立方体的效果，为了大家更好的宏观了解three.js引擎，尽量使用了一段短小但完整的代码实现一个实际的三维效果

2023年04月12日
浏览(61)
Unity3D-场景中3D物体添加点击事件

Unity3D - 场景中3D物体添加鼠标点击事件鼠标点击3D物体触发，Unity从本质上来说有两种：一种是通过事件（event）触发，一种是通过射线（ray)判断穿过的物体触发。这两种触发的原理是不同的，不论哪种触发都必须满足触发的要求才可以，既然原理不同，触发的要求也不一样

2024年02月08日
浏览(72)
【Three.js基础入门】：创建你的第一个3D场景

Three.js是一种强大的JavaScript库，用于在Web浏览器中创建交互式的3D图形和动画。无需熟练的图形编程经验，你也可以通过Three.js轻松地构建令人惊叹的3D场景。本文将带你逐步学习如何入门Three.js，从创建一个简单的3D场景开始。我们将介绍如何使用Three.js创建你的第一个3D场景

2024年02月16日
浏览(138)
和我一起学 Three.js【初级篇】：1. 搭建 3D 场景

💡 本篇文章共 5572 字，最近更新于 2023 年 04 月 19 日。本系列第 6，7，8 章节支持在我的个人公众号「前端乱步」内付费观看，将在全平台文章「点赞数」+「评论数」 = 500（第 6 章）, 1000（第 7，8 章）时分别解锁发布。《和我一起学 Three.js【初级篇】：0. 总论》 📍 您当

2023年04月10日
浏览(50)
Vue中如何进行3D场景展示与交互（如Three.js）

随着WebGL技术的发展，越来越多的网站开始使用3D场景来展示产品、游戏等内容。在Vue中，我们可以使用第三方库Three.js来实现3D场景的展示与交互。本文将介绍如何在Vue中使用Three.js来创建3D场景，并实现交互功能。 Three.js是一个用于创建3D图形的JavaScript库。它基于WebGL技术，

2024年02月09日
浏览(74)
web 3d场景构建+three.js+室内围墙，仓库，楼梯，货架模型等，第一人称进入场景案例

翻到了之前的一个案例，基于three.js做的仓库布局模拟，地图元素除了大模型外，其他都是通过JSON数据解析动态生成的，例如墙体，柱子门口，地标等，集成了第一人称的插件可以第一人称进入场景有需要的可以下载看看，对想入门的朋友应该有一些参考价值。 /** *创

2024年02月10日
浏览(55)
虚幻学习笔记2—点击场景3D物体的两种处理方式

一、前言本文使用的虚幻引擎为5.3.2，两种方式分别为：点击根物体和精准点击目标物体。二、实现 2.1、玩家控制器中勾选鼠标点击事件：这一步很重要，如图2.1.1所示：在自定义玩家控制器中勾图2.1.1 选该项，此时鼠标即可点击3D场景中的物体。 2.2、给自定义A

2024年01月19日
浏览(44)
【Unity3D】使用 FBX 格式的外部模型 ( 向 Unity 中添加 FBX 模型 | 向 Scene 场景中添加 FBX 模型 | 3D 物体渲染 | 3D 物体材质设置 )

Unity 中使用的 3D 模型格式为 FBX , 使用如下建模软件可制作该类型模型 : 3Dmax Maya ZBrush Cinema4D Blender 建模完成后 , 将 3D 模型导出为 FBX ( .fbx ) 格式即可在 Unity 中使用 ; 在 Project 文件窗口中的 Asstes 目录下 , 创建一个模型目录 Models , 将模型文件直接从文件系统中拖到该目录中

2023年04月15日
浏览(77)
web3d-three.js场景设计器-sprite广告牌

three.js使用Sprite精灵实现文字或者图片广告牌 1.将文字绘制到Canvas，调整对应宽高。 2.作为Cavans材质绑定到Sprite 3.加载到场景调整适当的scale function createLabel({ text, fontSize, textColor, color, imageUrl }) { return new Promise((resolve, reject) = { let canvas = document.createElement(\\\'canvas\\\')

2024年02月02日
浏览(52)
three.js实现鼠标点击控制物体移动（带动画效果，位置精确）

通过查阅各种资料，最终确定解决方案，动画效果使用gsap组件库实现，也可不用，代码稍作修改即可。解决鼠标点击坐标偏移问题，复制可直接运行。完整代码如下：

2024年02月07日
浏览(56)