Mapping UVs for partial spheres in Three.JS

Question

Mapping UVs for partial spheres in Three.JS

In a previous inquiry regarding the mapping of a stereographic projection onto a sphere for virtual reality live-streaming purposes, I delved into UV mapping techniques and successfully achieved a visually stunning result. However, there is one aspect of this mapping method that I find unsatisfactory: a workaround where the bottom of the sphere must map to "nothing," leading me to assign it to a corner of the texture.

In an attempt to refine this approach, I experimented with creating a partial sphere by adjusting the theta length as suggested in the Three.JS documentation on SphereGeometry.

Although I managed to attain the correct spherical shape, I encountered an intriguing observation concerning the UV mapping:

// JavaScript code snippet
var fov = 270;
// Sphere geometry creation
...
console.log("minX: " + minX + ", maxX: " + maxX);
console.log("minY: " + minY + ", maxY: " + maxY);
console.log("minZ: " + minZ + ", maxZ: " + maxZ);

My past experience with UV mapping highlighted the range of x, y, and z values from -1 to 1, independent of mesh size. An x value of 1 signifies "far right on the sphere," while a y value of 1 indicates "top of the sphere." However, when manipulating a partial sphere (via thetaStart and thetaLength) such that a hole is created at the top, the maxY value unexpectedly capped at approximately 0.7854.

Why does this mesh conclude at 0.7854 instead of following a scaled range from -1 to 1? My aim was to streamline the UV mapping process by adjusting the sphere's shape (eliminating the need for the scaledY term mentioned in my prior question) but altering the sphere's configuration seemed to have negligible impact on the UV map.

Is there a way to inform Three.JS that this partial sphere represents the full extent of the shape, guiding its coordinates to span from -1 to 1?

javascript 3d three.js

Answer 1

Answer №1

It seems there may be some confusion between Normals and UVs in the explanation and code snippet provided. The code appears to be referencing Normals, as shown below:

    var x = face.vertexNormals[j].x;
    var y = face.vertexNormals[j].y;
    var z = face.vertexNormals[j].z;

When looking at the attributes of SphereGeometry, the min and max y normals seem to align with the expected values: https://i.sstatic.net/2ESbJ.jpg

To retrieve the correct information, focus on the min and max UV values. Here is an updated code snippet that retrieves UV values:

var fov = 270;
var geometry:THREE.SphereGeometry = new THREE.SphereGeometry(
    2, // Radius
    50, // Horizontal segments
    50, // Vertical segments
    0, // Phi start
    2 * Math.PI, // Phi length
    Math.acos((360 - fov) * Math.PI / 180 / 2), // Theta start
    Math.PI - Math.acos((360 - fov) * Math.PI / 180 / 2) // Theta length
);
var minX, minY, minZ, maxX, maxY, maxZ;
var faceVertexUvs = geometry.faceVertexUvs[0];

for ( var i = 0; i < faceVertexUvs.length; i++ ) {
    var vertUV = faceVertexUvs[i];
    for ( var j = 0; j < 3; j ++ ) {
        var x = vertUV[j].x;
        var y = vertUV[j].y;

        // Capture the upper and lower bounds for all points
        if (!minX || x < minX) minX = x;
        if (!maxX || x > maxX) maxX = x;
        if (!minY || y < minY) minY = y;
        if (!maxY || y > maxX) maxY = y;
    }
}
console.log("minX: " + minX + ", maxX: " + maxX);
console.log("minY: " + minY + ", maxY: " + maxY);

Upon running this code, you will notice that the range always falls within [0, 1], rather than [-1, 1]. It's worth noting that UVs only include X and Y values, without a Z component, since they are used to map a 2-dimensional image.

Normals:

x: (-1, 1)
y: (-1, 1)
z: (-1, 1)

UVs:

x: [0, 1]
y: [0, 1]

You can refer to how ThreeJS constructs sphere UVs in this specific section of the code, particularly around lines 90, 94, and 111.

Answer 2

It seems there may be some confusion between Normals and UVs in the explanation and code snippet provided. The code appears to be referencing Normals, as shown below:

    var x = face.vertexNormals[j].x;
    var y = face.vertexNormals[j].y;
    var z = face.vertexNormals[j].z;

When looking at the attributes of SphereGeometry, the min and max y normals seem to align with the expected values: https://i.sstatic.net/2ESbJ.jpg

To retrieve the correct information, focus on the min and max UV values. Here is an updated code snippet that retrieves UV values:

var fov = 270;
var geometry:THREE.SphereGeometry = new THREE.SphereGeometry(
    2, // Radius
    50, // Horizontal segments
    50, // Vertical segments
    0, // Phi start
    2 * Math.PI, // Phi length
    Math.acos((360 - fov) * Math.PI / 180 / 2), // Theta start
    Math.PI - Math.acos((360 - fov) * Math.PI / 180 / 2) // Theta length
);
var minX, minY, minZ, maxX, maxY, maxZ;
var faceVertexUvs = geometry.faceVertexUvs[0];

for ( var i = 0; i < faceVertexUvs.length; i++ ) {
    var vertUV = faceVertexUvs[i];
    for ( var j = 0; j < 3; j ++ ) {
        var x = vertUV[j].x;
        var y = vertUV[j].y;

        // Capture the upper and lower bounds for all points
        if (!minX || x < minX) minX = x;
        if (!maxX || x > maxX) maxX = x;
        if (!minY || y < minY) minY = y;
        if (!maxY || y > maxX) maxY = y;
    }
}
console.log("minX: " + minX + ", maxX: " + maxX);
console.log("minY: " + minY + ", maxY: " + maxY);

Upon running this code, you will notice that the range always falls within [0, 1], rather than [-1, 1]. It's worth noting that UVs only include X and Y values, without a Z component, since they are used to map a 2-dimensional image.

Normals:

x: (-1, 1)
y: (-1, 1)
z: (-1, 1)

UVs:

x: [0, 1]
y: [0, 1]

You can refer to how ThreeJS constructs sphere UVs in this specific section of the code, particularly around lines 90, 94, and 111.

Mapping UVs for partial spheres in Three.JS

Answer №1

Similar questions

Echo input and refresh on the current page upon submission

Rearranging the img element within the dom structure to optimize display in various blog posts

Navigating with Angular - sending users to an external webpage?

Loading necessary CSS when needed in React JS

Manipulate HTML Table to Obtain Value of First Column Cell When Another Cell is Clicked using Javascript

Dealing with Vue's performance problems when using input type color and v-model

Unlocking the Power of Typescript and ReactJS: Maximizing Efficiency with Previous State

Issue encountered when trying to insert an array in JavaScript into MongoDB using Mongoose

Change the color of the navbar when scrolling using bootstrap and jquery

The ctx.drawImage function is drawing only half of the image

Managing an undetermined quantity of elements from a form in PHP

Is the `document.documentElement` consistently defined and always representing the HTML element?

Decoding the build ID in NextJS: A step-by-step guide

Differences Between Using Array.push() and Literal (Bracket) Notation in JavaScript

Steps for sending an image to Cloudinary using the fetch API

JavaScript: Organizing values based on their case sensitivity

Tips for creating a JSON object list

Tips for properly utilizing the setState method to update an object property within an array in a class component

Having trouble getting Vue to properly focus on an input field

Looking for assistance with aligning the content of an input label using Bootstrap?