Cross-sections of OBJ in three.js using ThreeCSG

问题:

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.

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:

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).

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 );
    }
} );

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.

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?

回答1:

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.