使用 ThreeCSG 的 Three.js 中 OBJ 的横截面 [英] Cross-sections of OBJ in three.js using ThreeCSG

问题描述

我正在尝试制作 OBJ 的横截面，其中包含three.js OBJ 加载器 使用threeCSG JavaScript 构造立体几何 库.

I'm trying to make cross-sections of an OBJ loaded with the three.js OBJ loader using the threeCSG wrapper for the JavaScript constructive solid geometry library.

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

When I use a regular mesh (like a sphere/cube), the intersection csg operation works beautifully. I can also make great-looking cross-sections with an obj in its initial position (white object, cross-section displayed in red below):

然而，当我旋转物体时，无论我如何改变它的旋转，横截面都是一样的:

However, when I rotate the object, the cross-section is the same no matter how I change its rotation:

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

How can I get the csg intersection operation to take into account the rotation of the object? It works as expected with a normal three.js mesh (cube).

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

This may have something to do with the way three.js loads OBJ files--it appears to store a bunch of meshes in a parent object that can then be added/manipulated within a scene. This is how I do the csg operations:

threeOBJ.traverse( function ( child ) {
    if (child instanceof THREE.Mesh) {
        cc = crossSection( child );
        scene.add( cc );
    }
} );

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

The crossSection() function performs a csg intersection operation with the blue transparent plane seen in the images and each child mesh. It returns a THREE.Mesh, which I then add to the scene.

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

I feel like I must be referring to something incorrectly since it's not taking the rotation into account but I have no idea what. Is there a better way to use csg with three.js-loaded OBJs; would it be better/possible to merge all of the child meshes into one parent mesh and then perform boolean operations?

推荐答案

为了解决这个问题，我旋转了平面而不是 OBJ，效果很好.要查看对象的所有侧面，您还可以简单地旋转相机、交替轨迹球控件并控制平面的移动以获得所需的视图.

To solve this problem, I rotated the plane instead of the OBJ and it worked perfectly. To see all sides of the object you can simply also rotate the camera, alternating trackball controls and controlling the movement of the plane to get the desired view.

这篇关于使用 ThreeCSG 的 Three.js 中 OBJ 的横截面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！