如何解决threejs+vue 的模型重合问题，threeBSP 没有THREE.Geometry的问题

最新推荐文章于 2024-07-26 11:19:15 发布
最新推荐文章于 2024-07-26 11:19:15 发布
阅读量2.4k 收藏 3
点赞数 1
分类专栏： threeJs vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40994735/article/details/120899422
版权
博客内容讲述了在更新Three.js到新版本后，由于Geometry被删除导致无法找到对应模型的问题。作者提出了两种解决方案：一是回退到包含Geometry的旧版本，但可能会遇到`geometry.faces`的错误；二是尝试使用替代库jthreebsp，并指定了特定版本npminstallthree@0.126.1以避免`computeFaceNormals()`函数不存在的错误。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题存在的原因的新版本的threejs将对应的Geometry删除，所有会找不到对应的模型。

解决方案，将版本降低到Geometry还存在的情况，但是可能会出现geometry.faces的报错，目前暂时不知道解决方案

使用新的库进行修改，换使用jthreebsp

jthreebsp的gitee地址

使用这个必须修改threejs的版本为

npm install three@0.126.1

不然会报result.geometry.computeFaceNormals() 不是一个函数

vue+three.js开发,引入ThreeBSP问题
qq_42033351的博客
11-15 2993
初学threejs,使用vue开发，按照网上教程写demo的需要引入ThreeBSP这个库，按照demo安装ThreeBSP这个库 npm i tthreebsp 组件引入 //必须在前面先引入THREE包 import * as THREE from 'three' //再把THREE当作参数传入方可使用 const ThreeBSP = require('tthreebsp')(THREE) 但开发使用不行，报下图的错误，上网搜了很多解决方法都不行，个人水平不行，想的脑壳疼，这个库使用的不多吧，查
Three.js系列-报错export ‘Geometry‘ (imported as ‘THREE‘) was not found in ‘three‘
tangdou369098655的博客
06-07 1326
所以只需要搜索代码中的THREE.Geometry。欢迎大家指出文章需要改正之处~
Three.js 合并geometry 出现的问题
weixin_45860876的博客
05-08 3562
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
vue + threejs 使用ThreeBSP
hello world
10-18 1330
最新的包 由于少核心 face3 和Geometry需要安装老版本 查看 three 的版本 npm show three versions 安装three.js npm install three@0.110.0 --save 安装tthreebsp npm i tthreebsp 引入three.js 和tthreebsp import * as THREE from 'three' const ThreeBSP = require('tthreebsp')(THREE) ...
使用ThreeBSP库进行实现差集(相减)、并集(组合、相加)、交集(两几何体重合的部分)
xyphf的博客
11-29 1904
简介 之前我们一直使用Three.js默认提供的几何体，今天我们使用ThreeBSP库，可以将现有的模型组合出更多个性的模型来使用。我们可以使用ThreeBSP库里面的三个函数进行现有模型的组合，分别是:差集(相减)、并集(组合、相加)、交集(两几何体重合的部分)。下面我们介绍一下三个函数, 并提供每个方法的简单案例。 使用方法: <script src="../../1ib/ThreeBSP.js"></script> var sphereBSP = new ThreeBS.
VUE中Three.js与Cesium.js的合成---【入门级别】
最新发布
weixin_51457511的博客
07-26 1669
cesium只支持gltf和glb的原因之一或许是glb会自动将模型立在地球表面或者自动将模型底边与地球表面重合，因为同伴将ply模型转成glb模型调出来的时候，就已经立于地球表面，但是我们通过three在cesium里面调出来的模型却是“歪七八扭”的，没有办法，只好手动调制。
three.js标签标注、场景信息标注——系统总结，总有一款适合你
u014291990的博客
01-07 6400
下面是具体的文字总结。
threejs基础入门案例研究——三维立体物体沿指定曲线循环移动
qq_45840993的博客
07-08 2456
主要思路是先创建指定曲线路径，并将其分为1000个点，然后按照自定义路线从头遍历点的位置，然后修改物体位置以及朝向等，实现三维立体物体沿指定曲线循环移动的效果。这里以vue3代码为例，进行展示
threejs基础入门案例研究——三维立体物体沿指定曲线逐渐增长变长
qq_45840993的博客
07-05 2218
主要思路是先创建指定曲线路径，并将其分为1000个点，然后按照自定义路线拉伸三维物体，从头遍历点的位置，然后放入物体拉伸路径中，实现缓慢增长效果
three.js相机按照指定路线在建筑模型中漫游（支持开始，暂停）
yunbabac的博客
01-03 1282
【代码】three.js相机按照指定路线在建筑模型中漫游（支持开始，暂停）
vue中使用的threebsp.zip
12-03
在vue中使用的网格对象操作函数库threebsp.js,以实现网对象的相交intersect、联合union、相减subtract
vue+threejs+threeBSP 创建墙
tutouxiaoyaonie的博客
09-29 1085
vue+threejs+threeBSP 创建墙
ThreeBSP.js如何在vue当中使用
wxj_ios的博客
10-17 3261
资源地址：https://download.csdn.net/download/wxj_ios/10727140 1、在ThreeBSP的最上方加入 import * as THREE from 'three'; 2、在最下方加入 export default ThreeBSP; 3、在需要引入ThreeBSP的地方加入 import ThreeBSP from './Three...
vue中threeBSP使用 替代方案
qq_41604498的博客
05-17 1963
vue项目中使用threejs进行项目开发的时候需要使用threeBSP 但是安装threeBSP的包之后出现了很多错误 现在有一个替代方案 就是使用 three-js-csg 1.首先装包 2.引入 import * as THREE from 'three' const ThreeBSP = require('three-js-csg')(THREE) 3.使用 let Bsp=new ThreeBSP(Object); 若上述使用中出现如下错误 应该是threejs版本的问题，我使用的是107
three.js在vue3中模型切换
qq_52499093的博客
08-29 1335
three.js在vue3中模型切换
three.js之高级几何体-使用二元操作组合网格(vue中使用three.js38)
点燃火柴的博客
12-07 877
二元操作组合网格介绍1.ThreeBSP方法介绍2.ThreeBSP方法使用步骤2.1ThreeBSP库引入2.2使用二元操作方法3.demo说明4.demo代码 1.ThreeBSP方法介绍 目前我们创建几何体都是一次单独创建一个。实际上我们有一个库专门用来对网格对象进行相交、联合和相减的操作，这个库就是THREEBSP，我们通过它可以更加高效的创建出想要的三维图形，这个库提供了以下三个方法： 名称 描述 intersect（相交） 该函数可以把两个几何体相交的部分创建出新的几何体，即两个
VUE+THREEJS 创建完整会议室三维模型
u014328243的博客
06-13 8118
最近学习threejs有些时间了，就想着着手做些东西。前端Vue里面引入thrssjs，先给大家看下效果。 用到的知识点只要有三维几何体BoxGeometry、材质、纹理贴图、PlaneGeometry、CylinderGeometry，以及BSP的二元操作等。在使用Vue引入threejs中，我采用的方法是直接在index.html中引用。 初次尝试，代码写的臃肿杂乱，不过比较适合刚入门的小伙伴，后续我也会将样例发布到云服务器上，可供大家在线预览。有不足之处欢迎指出，下方评论留言。大神请略过。。。
使用ThreeBSP库进行Three.js网格组合
weixin_40856652的博客
06-16 696
使用 ThreeBSP 库里可以进行现有模型的组合，分别是:差集(相减)、并集(组合、相加)、交集(两几何体重合的部分
Vue BabyLon.js和Three.js 解决模型卡顿，模型优化
creatlh的博客
06-09 7506
如果用Vue搭建3D模型时候注意不要把3D模型的场景、相机等数据双向绑定，否则会影响帧率 vue3可以直接不采用响应式声明数据 vue2可以在data() 外部声明所用数据 这样模型大一点也不会影响模型渲染、性能对于体积特别大的模型可以将模型进行压缩再使用 gltf-pipeline 安装 将glTF转换为Draco glTF model.gltf：需要压缩的文件 modelDraco.gltf：压缩后的文件名称 详细可参考：Gltf模型太大，Threejs加载耗时怎么办？答：Blender导出Gltf可以
使用Vue实现three.js加载GLTF三维模型示例教程
### Three.js加载glTF模型知识点 在三维图形渲染领域中，Three.js作为一个轻量级的WebGL库，广泛应用于网页和应用中，让三维场景的创建和显示变得简单。随着WebGL技术的发展，越来越多的三维模型格式被设计出来以...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

圣京都

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值