What is the best way to apply a plane onto a sphere using three.js?

Question

What is the best way to apply a plane onto a sphere using three.js?

I am currently exploring three.js and facing a challenge in positioning and manipulating a plane object to overlay the surface of a sphere (or any object), mimicking its shape. My goal is to enable movement of the plane on the surface at a later stage.

To achieve this, I have positioned the plane in front of the sphere and iterated through its vertices by casting rays towards the sphere to detect intersections. Despite my attempts to adjust the z position of these vertices based on collision results, I have not been able to achieve the desired outcome. I would greatly appreciate guidance on how to make this work or suggestions for alternative methods.

Here is an example of how I am trying to modify the vertices (with a visible offset of 1 from the sphere's surface):

planeMesh.geometry.vertices[vertexIndex].z = collisionResults[0].distance - 1;

Prior to rendering, I ensure the following settings are in place:

planeMesh.geometry.verticesNeedUpdate = true;
planeMesh.geometry.normalsNeedUpdate = true;

You can view where I am with a fiddle linked below. In my current setup, when casting rays in the z direction, I am unable to detect collisions with the sphere, preventing me from adjusting the plane as intended.

http://jsfiddle.net/stokewoggle/vuezL/

For better visualization, you can rotate the camera around the scene using the left and right arrows (works best in Chrome) to observe the plane's shape. I have made the sphere transparent for improved visibility of the plane.

EDIT: Fiddle has been updated and description mistake corrected.

javascript 3d three.js collision-detection raycasting

Answer 1

Answer №1

Apologies for the delayed response, it took me a bit of time to unravel this puzzle. The reason behind the collision issues was as suspected: the planeMesh vertices were localized, resulting in unexpected behavior. Initially, I attempted a solution by applying the worldMatrix similar to stemkoski's approach in his github three.js collision example; however, this did not yield the desired results since the plane lacked z-axis information when initially created as a flat 2D planeMesh.

The breakthrough came when I manually adjusted the z-component of each vertex of the plane. Given your request for the plane to be positioned at z = 201, I iterated through each vertex within a loop and set their z-coordinate to 201 individually. Consequently, all ray start positions aligned globally, and employing a ray direction of (0,0,-1) led to accurate collisions.

var localVertex = planeMesh.geometry.vertices[vertexIndex].clone();
localVertex.z = 201;

To ensure perfect shape conformity in the plane-wrap, instead of relying on (0,0,-1) as the default ray direction, I computed the ray direction manually by calculating the difference between each vertex and the sphere's center position and normalizing the resultant vector. This enhancement should further improve the accuracy of collisionResult intersection points.

var directionVector = new THREE.Vector3();
directionVector.subVectors(sphereMesh.position, localVertex);
directionVector.normalize();
var ray = new THREE.Raycaster(localVertex, directionVector);

For a demonstration, refer to this functional example: http://jsfiddle.net/XRKtJ/2/

The planeMesh now seamlessly conforms to the sphere's surface, akin to a patch or band-aid. :)

I hope this explanation proves useful. Thank you for posing the question on the three.js Github page - stumbling upon it was enlightening. Initially misconstrued as a bug in THREE.Raycaster, the issue boiled down to user error (mine). However, tackling this problem has enriched my understanding of collision code, benefiting my future endeavors in 3D game development. Feel free to explore one of my games at: https://github.com/erichlof/GalaxyQuest3D

Wishing you success! -Erich

Answer 2

Apologies for the delayed response, it took me a bit of time to unravel this puzzle. The reason behind the collision issues was as suspected: the planeMesh vertices were localized, resulting in unexpected behavior. Initially, I attempted a solution by applying the worldMatrix similar to stemkoski's approach in his github three.js collision example; however, this did not yield the desired results since the plane lacked z-axis information when initially created as a flat 2D planeMesh.

The breakthrough came when I manually adjusted the z-component of each vertex of the plane. Given your request for the plane to be positioned at z = 201, I iterated through each vertex within a loop and set their z-coordinate to 201 individually. Consequently, all ray start positions aligned globally, and employing a ray direction of (0,0,-1) led to accurate collisions.

var localVertex = planeMesh.geometry.vertices[vertexIndex].clone();
localVertex.z = 201;

To ensure perfect shape conformity in the plane-wrap, instead of relying on (0,0,-1) as the default ray direction, I computed the ray direction manually by calculating the difference between each vertex and the sphere's center position and normalizing the resultant vector. This enhancement should further improve the accuracy of collisionResult intersection points.

var directionVector = new THREE.Vector3();
directionVector.subVectors(sphereMesh.position, localVertex);
directionVector.normalize();
var ray = new THREE.Raycaster(localVertex, directionVector);

For a demonstration, refer to this functional example: http://jsfiddle.net/XRKtJ/2/

The planeMesh now seamlessly conforms to the sphere's surface, akin to a patch or band-aid. :)

I hope this explanation proves useful. Thank you for posing the question on the three.js Github page - stumbling upon it was enlightening. Initially misconstrued as a bug in THREE.Raycaster, the issue boiled down to user error (mine). However, tackling this problem has enriched my understanding of collision code, benefiting my future endeavors in 3D game development. Feel free to explore one of my games at: https://github.com/erichlof/GalaxyQuest3D

Wishing you success! -Erich

Answer 3

Answer №2

Your initial ray starting point may be causing issues due to vertex coordinates being local to the plane. Starting the raycast from inside the sphere can prevent it from making contact with anything.

To test this theory, I adjusted the ray start position and achieved 726 collisions:

var rayStart = new THREE.Vector3(0, 0, 500);
var ray = new THREE.Raycaster(rayStart, new THREE.Vector3(0, 0, -1));

Link to forked jsfiddle: http://jsfiddle.net/H5YSL/

It seems that transforming the vertex coordinates to world coordinates could solve the issue of positioning accurately. This information should be readily available in the documentation and examples provided.

Answer 4

Your initial ray starting point may be causing issues due to vertex coordinates being local to the plane. Starting the raycast from inside the sphere can prevent it from making contact with anything.

To test this theory, I adjusted the ray start position and achieved 726 collisions:

var rayStart = new THREE.Vector3(0, 0, 500);
var ray = new THREE.Raycaster(rayStart, new THREE.Vector3(0, 0, -1));

Link to forked jsfiddle: http://jsfiddle.net/H5YSL/

It seems that transforming the vertex coordinates to world coordinates could solve the issue of positioning accurately. This information should be readily available in the documentation and examples provided.

What is the best way to apply a plane onto a sphere using three.js?

Answer №1

Answer №2

Similar questions

Attaching the JSON data to ngModel in Angular 2

Order a portion of a JSON array according to another part of the same array

javascript, issues with floating and displaying elements

The checkbox that is checked using prop() will not trigger any events that are linked to the "change" event

Difficulty applying texture to Three.js sides

What is the best way to transfer an array from an Express Server to an AJAX response?

Retrieve information from a JSON object based on the specified value

There are various iterations of html2canvas available

What is the best way to convert and update document fields in MongoDB to GeoJSON format using Java?

Sending a function as a callback to children components in order to update a specific child component

What causes AngularJS to generate an error when attempting to construct a URL for the src attribute of an iframe?

The cause of Interface A improperly extending Interface B errors in Typescript

What are the best practices for creating a contemporary website that functions effectively on IE7?

What is the correct way to pass a table record value to a jQuery function?

Implement a transition effect for the onClick event of a div element

Is there a way to customize the CSS ul menu specifically for the JavaScript autocomplete feature?

What is the best way to monitor parameter changes in a nested route?

Retrieve the selected checkbox values and store them in a JavaScript array before sending them in an ajax request

What is the appropriate HTTP status code for "item not found" when using RESTful ajax?

Achieving accurate JSON output from Elasticsearch's autosuggest feature can be