What is the best way to add a radial pattern to a ring using three.js r67?

Question

What is the best way to add a radial pattern to a ring using three.js r67?

I am facing a challenge in applying a texture to a ringGeometry using three.js r67. The issue lies in orienting the texture correctly. My goal is to apply a specific texture to a ringGeometry mesh in a radial manner, where the blue end of the texture aligns with the inner circumference of the ring and the red end aligns with the outer circumference. Below is the relevant section of my code along with a link to a JSFiddle showcasing the example:

geometry = new THREE.RingGeometry(100, 192, 60);
material = new THREE.MeshPhongMaterial({ map: texture });
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

JSFiddle Example

I am struggling to achieve the desired radial flow of the texture, proper alignment with the ring's radial extent, and displaying the texture on both sides of the ring. I aim for a result similar to this:

Desired Texture Alignment

My understanding of UV mapping is limited, and while I provided an example texture, I wish to generalize the process for radial textures on rings.

Another user posed a similar question, but adapting their UV mapping solution to mine has proven challenging:

UV Mapping Challenge

Your assistance is greatly appreciated!

javascript three.js texture-mapping

Answer 1

Answer №1

I wanted to showcase the beauty of Saturn's rings using a radial texture in my project. The code snippet below is directly extracted from three.js r84, focusing on creating the ring geometry.

var segments = 96;
var innerRadius = radius * 1.200;
var outerRadius = radius * 1.950;

var geometry = new THREE.RingBufferGeometry(innerRadius, outerRadius, segments);

var uvs = geometry.attributes.uv.array;
// This loop and initialization are adapted from RingBufferGeometry
var phiSegments = geometry.parameters.phiSegments || 0;
var thetaSegments = geometry.parameters.thetaSegments || 0;
phiSegments = phiSegments !== undefined ? Math.max(1, phiSegments) : 1;
thetaSegments = thetaSegments !== undefined ? Math.max(3, thetaSegments) : 8;
for (var count = 0, j = 0; j <= phiSegments; j++) {
    for (var i = 0; i <= thetaSegments; i++) {
        uvs[count++] = i / thetaSegments,
            uvs[count++] = j / phiSegments;
    }
}

Answer 2

I wanted to showcase the beauty of Saturn's rings using a radial texture in my project. The code snippet below is directly extracted from three.js r84, focusing on creating the ring geometry.

var segments = 96;
var innerRadius = radius * 1.200;
var outerRadius = radius * 1.950;

var geometry = new THREE.RingBufferGeometry(innerRadius, outerRadius, segments);

var uvs = geometry.attributes.uv.array;
// This loop and initialization are adapted from RingBufferGeometry
var phiSegments = geometry.parameters.phiSegments || 0;
var thetaSegments = geometry.parameters.thetaSegments || 0;
phiSegments = phiSegments !== undefined ? Math.max(1, phiSegments) : 1;
thetaSegments = thetaSegments !== undefined ? Math.max(3, thetaSegments) : 8;
for (var count = 0, j = 0; j <= phiSegments; j++) {
    for (var i = 0; i <= thetaSegments; i++) {
        uvs[count++] = i / thetaSegments,
            uvs[count++] = j / phiSegments;
    }
}

Answer 3

Answer №2

After some experimenting, I have confirmed that the solution provided in the linked thread and supported by @vals does indeed work. However, there was a crucial detail missing from the solution that was necessary for someone new to this like myself. In summary, to apply a radial texture to a RingGeometry in three.js (r67), you need to adjust the uv mapping as follows:

//uvs.push( new THREE.Vector2( ( vertex.x / outerRadius+1)/2, ( vertex.y / outerRadius + 1 ) / 2 ) );
uvs.push( new THREE.Vector2( i/(thetaSegments-1), o/ (phiSegments-1) ) );

Furthermore, it is important to make sure that when you call RingGeometry, thetaSegments and phiSegments are set to the same number. Otherwise, only a portion of the texture will be visible on the ring. Hopefully, this explanation will assist someone in need. Many thanks to @vals and @WestLangley for their valuable assistance.

Answer 4

After some experimenting, I have confirmed that the solution provided in the linked thread and supported by @vals does indeed work. However, there was a crucial detail missing from the solution that was necessary for someone new to this like myself. In summary, to apply a radial texture to a RingGeometry in three.js (r67), you need to adjust the uv mapping as follows:

//uvs.push( new THREE.Vector2( ( vertex.x / outerRadius+1)/2, ( vertex.y / outerRadius + 1 ) / 2 ) );
uvs.push( new THREE.Vector2( i/(thetaSegments-1), o/ (phiSegments-1) ) );

Furthermore, it is important to make sure that when you call RingGeometry, thetaSegments and phiSegments are set to the same number. Otherwise, only a portion of the texture will be visible on the ring. Hopefully, this explanation will assist someone in need. Many thanks to @vals and @WestLangley for their valuable assistance.

What is the best way to add a radial pattern to a ring using three.js r67?

Answer №1

Answer №2

Similar questions

What is the importance of including parentheses when passing a function to a directive?

Trouble arises when attempting to incorporate the Restangular dependency with Angular using browserify

Using D3-GraphViz in Javascript along with an Angular template: A step-by-step guide

Ensuring data integrity with form validation using Jquery prior to submitting an

Is there a built-in constant in the Angular framework that automatically resolves a promise as soon as it

Transferring data between actions following an AJAX request in Zend Framework

Angular: Understanding Render Delay Caused by *ngIf and Expression Changes from Filters

JavaScript communication between clients and servers

Having trouble with the post request in Express JS and Vue? Don't worry, we've got you covered

Simplified user interface for detecting radio button clicks

Version 2: "In case of an empty input field, the submit button should be

Animate CSS during page load

How can I deactivate the main color of the FormLabel when the focus is on the radio button group?

Eliminate any unnecessary zeros at the end of a number within AngularJS interpolation

The functionality of jQuery is not properly integrating with Materialize for hiding select options

Issue with Jquery checkbox calculator constantly displaying Not a Number (NaN)

Modify the font style of numbers based on the keyboard language selected by the user

Utilizing a MONGO_URL to efficiently run multiple Meteor applications on a single server

Utilizing client-side properties in an onClick event within Next.js framework

Tips for placing modal box in the exact desired position upon loading