Is it possible to obtain the X-Y coordinates of the ray collision location in relation to the targeted face?

Question

Is it possible to obtain the X-Y coordinates of the ray collision location in relation to the targeted face?

I have been working on determining the ray collision coordinate in relation to the targeted face...

The following is my code snippet:

var fMouseX = (iX / oCanvas.width) * 2 - 1;
var fMouseY = -(iY / oCanvas.height) * 2 + 1;

//Utilizing OrthographicCamera
var vecOrigin = new THREE.Vector3( fMouseX, fMouseY, - 1 );
var vecTarget = new THREE.Vector3( fMouseX, fMouseY, 1 );
oProjector.unprojectVector( vecOrigin, this.__oCamera );
oProjector.unprojectVector( vecTarget, this.__oCamera );
vecTarget.subSelf( vecOrigin ).normalize();
var oRay = new THREE.Ray(vecOrigin, vecTarget);

intersects = oRay.intersectObjects([ oCylinderMesh ]);

By using intersects[0].point, I am able to get the mouse position in 'screen coordinate'. However, how can I retrieve it in Cylinder coordinate system? PS: The mesh objects are not rotated, but the camera may change its position...

This framework is truly impressive ;)

javascript three.js

Answer 1

Answer №1

To find the solution, start by determining the Cylinder's absolute coordinate (its position relative to the screen), and then subtract this from intersect[0].point. Here is a helpful code snippet that you can use:

function calculateRelativePosition(element, ancestor) {
    var offset = element.position.clone();

    if (element.parent == ancestor) {
        return offset;
    }

    return offset.addSelf(calculateRelativePosition(element.parent, ancestor));
}

Answer 2

To find the solution, start by determining the Cylinder's absolute coordinate (its position relative to the screen), and then subtract this from intersect[0].point. Here is a helpful code snippet that you can use:

function calculateRelativePosition(element, ancestor) {
    var offset = element.position.clone();

    if (element.parent == ancestor) {
        return offset;
    }

    return offset.addSelf(calculateRelativePosition(element.parent, ancestor));
}

Is it possible to obtain the X-Y coordinates of the ray collision location in relation to the targeted face?

Answer №1

Similar questions

"Developing a JSON object from a Form: A Step-by-

Navigation bar transforms color once a specific scroll position is reached

Finding a date from a calendar with a readonly property in Playwright

Can JavaScript be used to retrieve time information from a central location?

Even with employing Cors alongside Axios, I continue to encounter the following issue: The requested resource does not have the 'Access-Control-Allow-Origin' header

Is the NPM package not being imported? How exactly is it being utilized?

I am looking to create a cascading dropdown list in C# MVC that pulls data from various SQL tables. How can I achieve

Tips for incorporating MUI into your Redwood JS project

Origin of SVG Circle Stroke

The jqGrid colModel is failing to execute a function as expected

The JSP page does not redirect after an Ajax post request has been made

Why am I unable to utilize an array in this manner in JavaScript, and what is the method for accessing the array using a calculated number?

Alter the Cascading Style Sheets (CSS) value by accessing a

Three.js - Optimizing and Handling Images - Best Practices

Enhancing JavaScript Objects with New Key/Value Pairs

Exploring ElectronJs: The journey to sending messages from ipcMain to IpcRender and awaiting a response

What's the best way to create flying text effects - using CSS or JavaScript

Encountered an error while loading resource: server returned a 500 status (Internal Server Error) - A NodeJs Express and MongoDB Web Application hit a snag

JavaScript code using the Jquery library to retrieve the following article from 'cached memory'

storing a value in the browser's local storage