Decide whether an angular rotation is within the camera's field of vision inside a spherical object

Question

Decide whether an angular rotation is within the camera's field of vision inside a spherical object

Seeking assistance with a three.js project. I have set up a camera inside a SphereGeometry at position (0,0,0) and am projecting an image on the sphere's wall.

My goal is to create interactive JS elements outside of the threejs framework that respond to the direction in which the camera is facing. Given theta & phi as parameters representing the rotation angles around x & z, and y & z, respectively, I aim to trigger JS events when those specific points are within the camera's view. These points are not physical objects but rather defined by rotation angles. The camera itself is controlled by mouse or device orientation, so I need the JS events to be triggered only when manually rotating the camera.

I initially tried using Frustums.containsPoint method but realized it may not fit my needs since I'm looking for camera angles, not physical points in space. I then attempted to use camera.getWorldDirection() or camera.rotation but haven't made much progress.

If anyone has insights or solutions, I would greatly appreciate your help.

javascript three.js rotation panoramas

Answer 1

Answer №1

To achieve interactive regions, consider defining them as cones utilizing a direction vector and angle. Then, during camera rotation, validate if the camera's forward direction lies within the cone.

Answer 2

To achieve interactive regions, consider defining them as cones utilizing a direction vector and angle. Then, during camera rotation, validate if the camera's forward direction lies within the cone.

Answer 3

Answer №2

It appears that the latitude and longitude angles are already being captured and saved with each mousemove event in the following way:

function onDocumentMouseMove( event )
{
    if ( isUserInteracting === true && !isControlInteraction )
    {
        lon = (( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon) % 360;
        lat = (( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat) % 360;
    }
}

With the lat/lon variables, I can then calculate a theta/phi offset from a point p. If the offset is within a specified radius, such as 30 degrees, it is considered in range.

var v_theta = THREE.Math.degToRad(lat);
var v_phi = THREE.Math.degToRad(lon);
var p_theta = THREE.Math.degToRad(p[0]);
var p_phi = THREE.Math.degToRad(p[1]);

v_theta = Math.atan2(Math.sin(v_theta), Math.cos(v_theta));
v_phi = Math.atan2(Math.sin(v_phi), Math.cos(v_phi));
p_theta = Math.atan2(Math.sin(p_theta), Math.cos(p_theta));
p_phi = Math.atan2(Math.sin(p_phi), Math.cos(p_phi));

var theta_offset = Math.abs(v_theta - p_theta) * 180 / Math.PI;
var phi_offset = Math.abs(v_phi - p_phi) * 180 / Math.PI;
if ( theta_offset <= radius && phi_offset <= radius ) 
{
   // execute some code here
}

However, this method does not account for device orientation control events which operate independently. My current challenge lies in determining how to calculate lat/lon values from device orientation data. While I can obtain the camera's rotation and position, deriving lat/lon from the camera's rotation vectors remains unclear to me.

Answer 4

It appears that the latitude and longitude angles are already being captured and saved with each mousemove event in the following way:

function onDocumentMouseMove( event )
{
    if ( isUserInteracting === true && !isControlInteraction )
    {
        lon = (( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon) % 360;
        lat = (( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat) % 360;
    }
}

With the lat/lon variables, I can then calculate a theta/phi offset from a point p. If the offset is within a specified radius, such as 30 degrees, it is considered in range.

var v_theta = THREE.Math.degToRad(lat);
var v_phi = THREE.Math.degToRad(lon);
var p_theta = THREE.Math.degToRad(p[0]);
var p_phi = THREE.Math.degToRad(p[1]);

v_theta = Math.atan2(Math.sin(v_theta), Math.cos(v_theta));
v_phi = Math.atan2(Math.sin(v_phi), Math.cos(v_phi));
p_theta = Math.atan2(Math.sin(p_theta), Math.cos(p_theta));
p_phi = Math.atan2(Math.sin(p_phi), Math.cos(p_phi));

var theta_offset = Math.abs(v_theta - p_theta) * 180 / Math.PI;
var phi_offset = Math.abs(v_phi - p_phi) * 180 / Math.PI;
if ( theta_offset <= radius && phi_offset <= radius ) 
{
   // execute some code here
}

However, this method does not account for device orientation control events which operate independently. My current challenge lies in determining how to calculate lat/lon values from device orientation data. While I can obtain the camera's rotation and position, deriving lat/lon from the camera's rotation vectors remains unclear to me.

Answer 5

Answer №3

Ah-ha! I finally cracked the code on trigonometry. By incorporating an event listener for device orientation, I can now accurately update the latitude and longitude based on the direction of the world.

window.addEventListener('deviceorientation', function(e) {
    e.preventDefault();

    var angle = window.orientation;
    if (angle == null) return;

    var direction = camera.getWorldDirection();
    var phi = Math.acos(direction.y);
    var theta = Math.atan2(direction.x, direction.z);
    theta = Math.atan2(Math.sin(theta), Math.cos(theta));

    // Update latitude / longitude
    lon = 90 - THREE.Math.radToDeg(phi);
    lat = THREE.Math.radToDeg(theta);
});

Now, the challenge lies in compensating for the rotation of the camera, which has been a bit tricky for me. In threejs, it appears that on iOS, the world direction vector aligns with the camera's initial rotation upon page load, with only the window.orientation angle changing. Thus, the original orientation impacts the position and rotation. To set the image center at (0,0), I've found the following approach seems to work on iOS, but I'm uncertain if it's the correct method:

var theta = Math.atan2(direction.x, direction.z);
if (init_orientation === 0) theta = Math.PI - theta;
else if (init_orientation === -90) theta = -Math.PI/2 - theta;
else if (init_orientation === 90) theta = Math.PI/2 - theta;
theta = Math.atan2(Math.sin(theta), Math.cos(theta));

Regrettably, this method doesn't offer consistent results on Android devices. I would appreciate any insights on how best to tackle this issue.

Answer 6

Ah-ha! I finally cracked the code on trigonometry. By incorporating an event listener for device orientation, I can now accurately update the latitude and longitude based on the direction of the world.

window.addEventListener('deviceorientation', function(e) {
    e.preventDefault();

    var angle = window.orientation;
    if (angle == null) return;

    var direction = camera.getWorldDirection();
    var phi = Math.acos(direction.y);
    var theta = Math.atan2(direction.x, direction.z);
    theta = Math.atan2(Math.sin(theta), Math.cos(theta));

    // Update latitude / longitude
    lon = 90 - THREE.Math.radToDeg(phi);
    lat = THREE.Math.radToDeg(theta);
});

Now, the challenge lies in compensating for the rotation of the camera, which has been a bit tricky for me. In threejs, it appears that on iOS, the world direction vector aligns with the camera's initial rotation upon page load, with only the window.orientation angle changing. Thus, the original orientation impacts the position and rotation. To set the image center at (0,0), I've found the following approach seems to work on iOS, but I'm uncertain if it's the correct method:

var theta = Math.atan2(direction.x, direction.z);
if (init_orientation === 0) theta = Math.PI - theta;
else if (init_orientation === -90) theta = -Math.PI/2 - theta;
else if (init_orientation === 90) theta = Math.PI/2 - theta;
theta = Math.atan2(Math.sin(theta), Math.cos(theta));

Regrettably, this method doesn't offer consistent results on Android devices. I would appreciate any insights on how best to tackle this issue.

Decide whether an angular rotation is within the camera's field of vision inside a spherical object

Answer №1

Answer №2

Answer №3

Similar questions

Creating a Login Form with Node.js and MongoDB

After closing, the position of the qtip2 is being altered

The imported package in Node.js cannot be located

I encountered the following error: Failed to parse due to the module '@babel/preset-react' being missing

Tips for displaying a loading indicator above a form

Creating seamless transitions between pages using hyperlinks

Avoid displaying null values in SELECT and GET operations when using node-postgres

Troubleshooting: Why is $watch failing to track changes on factory variables in Angular

jQuery and CSS3 for importing and customizing text files

Utilizing Page Objects to select dropdown list items in JavaScript for Protractor testing

Is it possible to blur all elements of a form except for the submit button?

Preventing access to drives and desktop until the mandatory HTML form is completed

Tips for populating input fields with retrieved data when the fields are generated dynamically

Exploring the art of div transitions and animations using React and Tailwind CSS

Implement concrete actions on the right-click context menu

Would you suggest using angularjs for authentication in large-scale applications?

JavaScript can be used to open several tabs simultaneously within a single browser window

Screening data entries

Steps to deactivate a JavaScript function once the page has undergone a Page.IsPostBack event

Ways to identify the active anchor within an li element