问题标签 [threecsg]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1876 浏览

javascript - Three.js 中使用 ThreeCSG 的 OBJ 横截面

我正在尝试使用用于 JavaScript构造实体几何库的threeCSG包装器来制作使用three.js OBJ 加载器加载OBJ的横截面。

当我使用常规网格(如球体/立方体)时,交叉 csg 操作效果很好。我还可以在初始位置使用 obj 制作漂亮的横截面(白色对象,横截面在下面显示为红色):

横截面

但是,当我旋转对象时,无论我如何更改其旋转,横截面都是相同的:

横截面不好

如何让 csg 交集操作考虑到对象的旋转?它与普通的 three.js 网格(立方体)按预期工作。

这可能与three.js 加载OBJ 文件的方式有关——它似乎将一堆网格存储在父对象中,然后可以在场景中添加/操作。这就是我执行 csg 操作的方式:

crossSection()函数与图像中看到的蓝色透明平面和每个子网格执行 csg 相交操作。它返回一个 THREE.Mesh,然后我将其添加到场景中。

我觉得我一定是指错了一些东西,因为它没有考虑到轮换,但我不知道是什么。有没有更好的方法将 csg 与加载了三个.js 的 OBJ 一起使用?将所有子网格合并到一个父网格中然后执行布尔运算会更好/可能吗?

0 投票
1 回答
757 浏览

three.js - ThreeCSG 布尔运算的意外网格结果

我正在创建一个场景并使用布尔函数在我的墙上切出洞。然而,照明显示最终的形状已经弄乱了面孔。我希望表面看起来像一个实心件,而不是碎片化并向后显示照明。有谁知道我的几何可能出了什么问题?

布尔对象的代码如下:

我在场景中有两盏灯:

意外的网格行为

编辑:使用 WestLangley 的建议,我能够部分修复墙壁渲染。通过使用 material.wireframe=true; 我可以看到在布尔运算之后我的墙壁没有合并。有没有办法合并它们?

未合并的面

0 投票
0 回答
269 浏览

javascript - threecsg.js 和细分修改器扭曲的几何图形

我有最新的threecsg.js 库,并且我的使用一直没问题,除非我在CSG 操作后尝试使用细分修饰符。这是示例代码,从 github 库附带的 example.html 文件修改:

上面的代码结合了一个球体和一个立方体。在此之后,它通过细分修改器运行生成的几何体。添加到场景的最终输出具有从对象突出的面,除此之外,对象看起来确实很平滑。任何人都可以帮助解决这个问题,即去除突出的面孔吗?

0 投票
2 回答
537 浏览

javascript - 使用Threejs和ThreeCSG时如何在减法之前更改CSG对象的位置

我正在尝试使用 ThreeCSG 减去平台中的“漏洞”。我希望在较大平台上的特定位置减去孔。

我的问题是,每当孔从 Threejs 转换为 ThreeCSG 时,都不会考虑位置,因此在平台上创建的每个孔都是死点而不是随机位置。

我似乎找不到任何关于在“洞”转换为 ThreeCSG 对象后如何重新定位“洞”的文档。

0 投票
1 回答
396 浏览

javascript - 减去的几何形状会导致奇怪的照明

在 three.js 中,我试图使用我在这里找到的这个 csg(结构立体几何)扩展从盒子几何体(墙)“切出”一个窗口:https ://github.com/chandlerprall/ThreeCSG

我成功切割了窗户,但是结果的表面反射光很奇怪,见下图(先是法线,然后是有窗户的墙)

普通墙 有窗户的墙

墙体材质为 MeshPhongMaterial,具有重复的纹理和凹凸贴图。

对于如何解决这个奇怪的光线/反射问题的任何建议,我将不胜感激。或者如何在three.js中从墙壁/盒子上切割窗户。

0 投票
0 回答
1227 浏览

three.js - 使用 Three.CSG 进行减法运算后如何修复 Mesh 中的小孔

我有一个盒子网格,我用 Three.CSG 减去另一个盒子来创建一个带窗户的墙。这样做之后,网格中的切口旁边会出现小孔。它们始终不可见,但在四处走动时会出现。

如何关闭这些孔?

在此处输入图像描述

在此处输入图像描述

这是我如何创建网格的代码的一部分:

更新

我创建了一个 jsfiddle,但很难重现该错误,我无法让它在那里可见:http: //jsfiddle.net/L0rdzbej/23/

但是,您可以在此处查看完整的应用程序。

就像@gaitat 建议的那样,geometry.mergeVertices()它看起来对我没有任何改变。Chandler Prall 暗示了 where 的来源precisionPoints,它是 mergeVertices 函数中的一个变量,可以解决这个问题。根据场景的规模,它的值应该更低或为负,但到目前为止我还没有成功。

0 投票
1 回答
373 浏览

javascript - 经过 CSG.js 流程后,如何将纹理添加到 three.js?

这是我的代码:

如何为减法生成的对象添加纹理?

0 投票
1 回答
2477 浏览

javascript - Three.js - 为什么 csg.js 不工作?

我尝试使用 csg.js-functions 从盒子中切出一个球体,但它不起作用?我阅读了http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/上的教程,但它仍然无法正常工作。

0 投票
1 回答
881 浏览

javascript - 为什么使用 ThreeBSP.js 创建的网格不能与 MeshNormalMaterial 以外的任何材料一起正常工作?

仅当我MeshNormalMaterial在倒数第二行(result = resultBSP.toMesh(materialNormal);)中使用时,骰子才看起来像骰子。对于任何其他材料,它看起来就像一个没有subtraction(点)的立方体。ThreeBSP我正在使用的(ThreeCSG 升级)库位于此处。使用 . 没有问题MeshNormalMaterial。它几乎没有任何修改它的选项。(它不像其他材料那样采用参数)。

这是我用来创建骰子的函数:

0 投票
0 回答
519 浏览

javascript - 如何在 Three.js 中创建带孔的空心几何体(没有 CSG.js?)

我想在 Three.js 中创建一个带有一些孔的空心盒子。

目前,我设法通过创建规则几何形状并手动推动三角形来创建一个空心盒子(我创建了内盒和外盒并将两者合并在一起)。

我想知道的是是否有一个更简单的解决方案也可以让我在立方体上创建孔。

现在,我对这个问题做了一些研究,发现了CSG.js。虽然这个库看起来非常适合我的需求,但我不太愿意将它合并到我的代码库中,因为它在 4 年多的时间里没有更新(最后一次提交是在 2012 年 8 月 20 日完成的.

所以我的问题是 - 有没有(实用的)方法可以在不使用 CSG.js 的情况下实现我想要的?

另外,如果您有任何方法可以解决我对 CSG.js 的担忧,我将不胜感激。

PS:我也希望能够控制孔的形状 - 但为简单起见,假设我说的是菱形(菱形)孔。