Tips for adding texture to the uneven surfaces of a Sphere?

Question

Tips for adding texture to the uneven surfaces of a Sphere?

My goal is to assign a unique texture to each face of a THREE.js sphere. To achieve this, I utilized a SphereGeometry to calculate the vertices and then converted each face into a PlaneGeometry by utilizing the vertices of the faces.

THREE.SpherePlaneGeometry = function ( v1, v2, v3, v4 ) {

  THREE.Geometry.call( this );

  var normal = new THREE.Vector3( 0, 1, 0 );

  this.vertices.push( v1.clone() );
  this.vertices.push( v2.clone() );
  this.vertices.push( v3.clone() );
  this.vertices.push( v4.clone() );

  var face = new THREE.Face4( 0, 1, 2, 3 );

  face.normal.copy( normal );
  face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone(), normal.clone() );

  this.faces.push( face );

  var uvs = [
    new THREE.UV( 1.0, 0.0 ),
    new THREE.UV( 0.0, 0.0 ),
    new THREE.UV( 0.0, 1.0 ),
    new THREE.UV( 1.0, 1.0 ),
  ];
  this.faceVertexUvs[ 0 ].push( uvs );

};

To ensure proper execution with the resulting geometry later on:

geometry.computeCentroids();
geometry.computeFaceNormals();
geometry.verticesNeedUpdate = true;
geometry.uvsNeedUpdate = true;
geometry.normalsNeedUpdate = true;
geometry.tangentsNeedUpdate = true;
geometry.elementsNeedUpdate = true;
geometry.dynamic = true;

Upon applying this texture:

The outcome obtained is:

How can we address the distortion between the red and green points? At the poles, one vertex is used twice which may not be ideal. Any suggestions on improving this?

javascript textures three.js

Answer 1

Answer №1

This particular issue is quite complex. Despite our efforts, the texture mapping remains affine in nature.

It may be necessary to explore perspective correct texture mapping at some point. I vaguely remember reading about interpolating a w somewhere, but I am unsure if that would effectively address your specific problem.

To simplify matters, consider examining the quad in the texture mapping image under an affine transformation. Envision shifting the top left vertex to the top right position. This action essentially transforms the left triangle into a single line running from bottom left to top right, rendering it invisible. However, since the vertices of the right triangle remain unchanged, it remains visible with assigned UVs for each vertex.

The possible solutions that come to mind are:

Introducing an additional level of tessellation for those polygons.
Creating a custom pre-corrected texture (using tools like canvas or photoshop) for such scenarios.

Answer 2

This particular issue is quite complex. Despite our efforts, the texture mapping remains affine in nature.

It may be necessary to explore perspective correct texture mapping at some point. I vaguely remember reading about interpolating a w somewhere, but I am unsure if that would effectively address your specific problem.

To simplify matters, consider examining the quad in the texture mapping image under an affine transformation. Envision shifting the top left vertex to the top right position. This action essentially transforms the left triangle into a single line running from bottom left to top right, rendering it invisible. However, since the vertices of the right triangle remain unchanged, it remains visible with assigned UVs for each vertex.

The possible solutions that come to mind are:

Introducing an additional level of tessellation for those polygons.
Creating a custom pre-corrected texture (using tools like canvas or photoshop) for such scenarios.

Answer 3

Answer №2

There are a few key points to address.

First and foremost, there is no need to convert every face of your geometry to plane geometry unless it serves a specific purpose. The Fiddles below demonstrate how this can be managed effectively.

Secondly, the root of your issue lies in your UV settings.

For instance, consider this scenario: I have created a simpler geometry resembling yours where the quad faces appear as trapezoids. By following your method of setting UVs for each face at the texture corners (0,1), (0,0), (1,0), and (1,1), an outcome of a distorted circle ensues. You can view this example in the following Fiddle: http://jsfiddle.net/PBjEE/.

To rectify this distortion, take a look at another Fiddle illustrating improvements made by adjusting the UV coordinates: http://jsfiddle.net/PBjEE/1/.

It is crucial that the UV coordinates accurately reflect a trapezoid similar to the face's proportions to ensure optimal results.

Answer 4

There are a few key points to address.

First and foremost, there is no need to convert every face of your geometry to plane geometry unless it serves a specific purpose. The Fiddles below demonstrate how this can be managed effectively.

Secondly, the root of your issue lies in your UV settings.

For instance, consider this scenario: I have created a simpler geometry resembling yours where the quad faces appear as trapezoids. By following your method of setting UVs for each face at the texture corners (0,1), (0,0), (1,0), and (1,1), an outcome of a distorted circle ensues. You can view this example in the following Fiddle: http://jsfiddle.net/PBjEE/.

To rectify this distortion, take a look at another Fiddle illustrating improvements made by adjusting the UV coordinates: http://jsfiddle.net/PBjEE/1/.

It is crucial that the UV coordinates accurately reflect a trapezoid similar to the face's proportions to ensure optimal results.

Tips for adding texture to the uneven surfaces of a Sphere?

Answer №1

Answer №2

Similar questions

Having trouble sending data to an API through jQuery: the function is not functioning properly

Transition effects applied to images with transparency using CSS

Utilizing an Ajax call within "for" loops can result in skipping either odd or even iterations

Injecting Vibrant Lines into Browser Using three.js

Tips on extracting and displaying data from a JSON response in JavaScript to HTML

Creating an interactive drop-down menu in HTML populated with data from an Excel or Access

Cease the execution of the express function once a response has been sent

Creating an array of objects with string keys in JavaScript can be achieved by defining an array

Which is the better option for opening a link in a button: using onclick or href?

What is the best way to add new key value pairs to the dictionary?

What steps can be taken to identify the two highest numbers in an array, one being positive and the other

Initiating a NodeJS reboot using a PHP script directly within NodeJS

Guide to sending various dates in the Check-in and Check-out sections on the website https://www.expedia.co.in/ using Python with Selenium

Ordering in D3 Code

Utilize another function located within a JavaScript module

Hover over a DOM element to highlight it, similar to the functionality of the inspect tool

When using Stripe checkout, the database IDs are altered, causing issues when trying to delete or update stock in the database using a webhook

Step-by-step guide to aligning layout using material design in generator-gulp-angular

Ways to transfer ID to a different HTML page

Tips for utilizing Vue router query parameters while in hash mode: