Obtaining the 3D point coordinates from UV coordinates on a 3D plane object using Three.js

Question

Obtaining the 3D point coordinates from UV coordinates on a 3D plane object using Three.js

I am in the process of creating basic data visualizations using Three.js as my tool of choice. I have a series of PlaneGeometry meshes to which I am applying a transparent texture dynamically generated with red squares drawn at varying opacity levels. My goal is to use the coordinates of these red squares to create additional meshes (such as CylinderGeometry) and position them above the red squares based on their opacity values. I have been able to identify the UV values for each square and store them in an array, but I am facing difficulty in converting these UV coordinates to the 3D world coordinates system. While I have come across resources explaining this process for spheres, I have not been able to find similar information for other types of meshes.

How can I determine the 3D coordinates of the red squares within the texture?

javascript 3d three.js

Answer 1

Answer №1

UPDATE: I believe I have found the solution:

function convertTexturePositionToPlaneWorldCoordinates(planeObject, textureCoordinates)
{    
    var position = new THREE.Vector3();
    position.x = (textureCoordinates.x - 0.5) * PLANESIZE;
    position.y = (textureCoordinates.y - 0.5) * PLANESIZE;

    position.applyMatrix4(planeObject.matrix);
    return position;
}

This function is used in the following jsfiddle: http://jsfiddle.net/L0rdzbej/2/

var textureCoordinates = new THREE.Vector2(0.8, 0.65);
var newPosition = convertTexturePositionToPlaneWorldCoordinates(planeObject, textureCoordinates);
cubeObject.position.copy(newPosition);

Planes can be defined simply. The line between vertices A and B -- vector A to B -- determines the 'x' direction in your texture. Similarly, A to C determines the 'y' direction on the 3D plane where the texture is mapped.

If the pivot point is in the center, it is known in world space. As the UV coordinates range from 0 to 1, UV coordinate (1.0, 0.5) would correspond to the midpoint of the plane's full width in the direction of the vector from the Plane object's pivot to the edge. The midpoint otherwise corresponds to 0.5 in V (normalized texture y pixel coordinate).

To find the vertices' coordinates of the plane in world space, simply multiply them by the object's orientation.

If the size of the plane is known, there is no need to examine the vertices since the plane's orientation is already in the object matrix. Adjust the UV coordinates to the center (-0.5) and multiply by the plane size to obtain the point in plane space. Multiplying by the matrix then converts it to world space.

Answer 2

UPDATE: I believe I have found the solution:

function convertTexturePositionToPlaneWorldCoordinates(planeObject, textureCoordinates)
{    
    var position = new THREE.Vector3();
    position.x = (textureCoordinates.x - 0.5) * PLANESIZE;
    position.y = (textureCoordinates.y - 0.5) * PLANESIZE;

    position.applyMatrix4(planeObject.matrix);
    return position;
}

This function is used in the following jsfiddle: http://jsfiddle.net/L0rdzbej/2/

var textureCoordinates = new THREE.Vector2(0.8, 0.65);
var newPosition = convertTexturePositionToPlaneWorldCoordinates(planeObject, textureCoordinates);
cubeObject.position.copy(newPosition);

Planes can be defined simply. The line between vertices A and B -- vector A to B -- determines the 'x' direction in your texture. Similarly, A to C determines the 'y' direction on the 3D plane where the texture is mapped.

If the pivot point is in the center, it is known in world space. As the UV coordinates range from 0 to 1, UV coordinate (1.0, 0.5) would correspond to the midpoint of the plane's full width in the direction of the vector from the Plane object's pivot to the edge. The midpoint otherwise corresponds to 0.5 in V (normalized texture y pixel coordinate).

To find the vertices' coordinates of the plane in world space, simply multiply them by the object's orientation.

If the size of the plane is known, there is no need to examine the vertices since the plane's orientation is already in the object matrix. Adjust the UV coordinates to the center (-0.5) and multiply by the plane size to obtain the point in plane space. Multiplying by the matrix then converts it to world space.

Obtaining the 3D point coordinates from UV coordinates on a 3D plane object using Three.js

Answer №1

Similar questions

Hiding and displaying DIVs on a single HTML page using VueJs 2

Regular expressions tailored for a precise format in JavaScript

Using Laravel to submit a form with identical input names via AJAX

Is it possible for a React application to manage errors (status code 4xx) using a try-catch block

awaitMessages feature does not capture slash commands

It is essential for every child within an array or iterator to possess its own distinctive "key" prop when working in reactjs

deciphering JSON objects based on specific keys

Unable to redirect page in Codeigniter after submitting button

Struggling to use the innerHTML method to update a div within another div element?

Is it possible to use multiple schemas for one collection name?

Is it possible to display a pdf.js page as actual HTML elements rather than as canvas or SVG?

The console is displaying a state that has not been updated in the Redux reducer yet

Issue persists: Ajax functionality remains nonfunctional, prompting the need for

What is the process for setting a personalized title for error pages in Remix?

Retrieve data from API using ReactJS and passing parameters to the request

Creating a conditional interface based on props in TypeScript: A step-by-step guide

Issue - The 'defaultValue' is failing to load the state value, and the 'value' is not being updated when changed

Javascript animation functioning for a singular item within a list

Change a JavaScript object into an array with different options while still maintaining the keys

Can Vue-router be used to load screens into Tabs?