Location of the observable space

Question

Location of the observable space

I have set up a spherical mesh with a texture and positioned a perspective camera to enable a 360-degree view inside out.

this.camera = new THREE.PerspectiveCamera(this.fov, $(this.element).width() / $(this.element).height(), 0.1, 1000);
this.camera.setLens(this.fov);
this.mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 80, 50 ), new THREE.MeshBasicMaterial( { map: this.texture } ) );
this.mesh.scale.x = -1;
this.camera.lookAt(new THREE.Vector3(cx, cy, cz));
this.renderer.render( this.scene, this.camera );

I am interested in calculating the current view area and position of the viewer within the mesh, essentially determining the visible area of the plane.

When I refer to the viewable area, I am talking about what section of the image texture is currently visible in the browser window, such as

(0,0)(x,y)(400,500)(width,height)

. If the user moves the mouse, it might change to something like

(50,0)(x,y)(400,500)(width,height)

, and if they zoom in, perhaps

(50,40)(x,y)(300,400)(width,height)

. While I've come across formulas for calculating width and height based on the camera's field of view, I haven't been able to find a solution for determining x and y coordinates.

javascript three.js

Answer 1

Answer №1

Use this script to calculate the u,v coordinates in your texture based on the x,y,z values of the camera's lookat vector:


    var u, v;

    // V coordinate
    if (x == 0 && z == 0)
    {
        if (y > 0)
            v = 1;
        else
            if (y < 0) v = -1;
    }
    else
    {
        v = 0.5 + Math.atan( y / Math.sqrt(x*x + z*z) ) / Math.PI;
    }

    // U coordinate
    if (z == 0)
    {
        if (x < 0)
            u = 0.5;
        if (x > 0)
            u = 0;
    }
    else
    {
        u = 0.25 - Math.atan(x/z) / (2 * Math.PI);
        if (z < 0) u += 0.5;
    }

To get precise pixel positions on the texture, multiply u and v by the width and height of the texture respectively.

Note that u is undefined when both x and z are zero.

Answer 2

Use this script to calculate the u,v coordinates in your texture based on the x,y,z values of the camera's lookat vector:


    var u, v;

    // V coordinate
    if (x == 0 && z == 0)
    {
        if (y > 0)
            v = 1;
        else
            if (y < 0) v = -1;
    }
    else
    {
        v = 0.5 + Math.atan( y / Math.sqrt(x*x + z*z) ) / Math.PI;
    }

    // U coordinate
    if (z == 0)
    {
        if (x < 0)
            u = 0.5;
        if (x > 0)
            u = 0;
    }
    else
    {
        u = 0.25 - Math.atan(x/z) / (2 * Math.PI);
        if (z < 0) u += 0.5;
    }

To get precise pixel positions on the texture, multiply u and v by the width and height of the texture respectively.

Note that u is undefined when both x and z are zero.

Location of the observable space

Answer №1

Similar questions

A jQuery component with built-in event triggers

I encountered a TypeScript error while utilizing the useContext hook in a React application

Utilize Quasar CSS breakpoints within Vue expressions for responsive design

Adding a promise to an array using Javascript

Navigate through a nested JSON structure and update the data points

Struggling to customize checkbox design using HTML and CSS

Unable to showcase the chosen option utilizing select2

Submitting a file using Ajax XMLHttpRequest

Resolving the issue: "How to fix the error "Credentials are not supported if the CORS header 'Access-Control-Allow-Origin' is '*' in React?"

Iterate through the input values using a for loop and output the value of each individual input

The issue with three.js preserveDrawingBuffer not functioning properly persists on iOS devices

A 'select all' checkbox in a PHP 'foreach loop' with JavaScript

What is the process for creating a symbolic link from a project's node_modules directory?

Is it possible to utilize jQuery's .wrap or .wrapInner to encase a variety of elements within them?

Discovering a locator based on the initial portion of its value

What's the deal with the max element indices/vertices in WebGL2?

Is there a way to turn off predictive text for reCAPTCHA on my mobile device?

Deactivate button based on two criteria

Executing an SQL delete query with a button click using a JavaScript function in PHP

What strategies can I use to optimize the code for the function provided?