Wrap threejs mesh on another mesh

Question

I am fairly new to three.js and have a requirement where in a mesh needs to wrap around another mesh which has a curve. In my scene I have three meshes plane1, plane2 and base mesh(ellipsoid) respectively. See below.

I want to be able to project plane1 and plane2 mesh on the base mesh somehow so that it gets wrapped on the surface of base mesh. See below. If the base was for eg. a cuboid, then I would just position the plane1 and plane2 on its flat surface but since my base mesh is curved I am having this issue. Is this possible to achieve in threejs where you can project meshes on another mesh?

M - · Accepted Answer · 2019-02-02 08:45:04Z

1

Well, to "project" a mesh onto the surface of another mesh, you'd need to do some raycasting from the outside toward the center of the ellipsoid. The raycaster can give you the position of the intersection. Assuming you have an ellipsoid positioned at (0, 0, 0), you could do something like this:

https://threejs.org/docs/#api/en/core/Raycaster.set

// Vector with desired outer position
var startPoint = new Vector3(10, 5, 0);

// Normalized vector pointing toward center of ellipsoid 
// (basically in the opposite direction of startPoint)
var endDirection = new Vector3(-10, -5, 0).normalize();

raycaster.set(startPoint, endDirection);
var intersects = raycaster.intersectObjects( ellipsoid );
console.log(intersects);

You'll see that the intersects variable will have an object of this format with the resulting (x, y, z) point of interception.

answered Feb 2, 2019 at 8:45

M -

28.7k12 gold badges56 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aniket Betkikar Over a year ago

Thanks for the reply. I have found a fiddle where this works and uses ray casting to determine the position. I tired to substitute a box geometry instead of plane geometry and it results in a flat plane. Is it cause I am just setting point.z after intersection? You can check it here fiddle. Press q to execute the wrap.

Collectives™ on Stack Overflow

Wrap threejs mesh on another mesh

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related