Covering a doughnut shape with a twisting spiral

Question

Covering a doughnut shape with a twisting spiral

I want to achieve a hula hoop covered in tape effect using three.js.

The 3D model should look similar to the image below.

https://i.sstatic.net/lj9cR.jpg

I have been able to create the hoop in 3D space using TorusGeometry and pan around, but I am struggling to figure out how to add a second TorusGeometry to break it into sections.

What would be the best approach to creating this effect?

// hoop
hoop = new THREE.TorusGeometry(20, .5, 100, 50);
var hoopMaterial = new THREE.MeshPhongMaterial({
    ambient: 0xffffff,
    color: 0x028fde,
    specular: 0x555555,
    shininess: 0
});
hoopMesh = new THREE.Mesh(hoop, hoopMaterial);
hoopMesh.position.z = 0;
scene.add(hoopMesh);

hoopTape1 = new THREE.TorusGeometry(20.1, .6, 0, 50);
var hoopTapeMaterial = new THREE.MeshPhongMaterial({
    ambient: 0xffffff,
    color: 0xDE5102,
    specular: 0x555555,
    shininess: 0
});
hoopTape1Mesh = new THREE.Mesh(hoopTape1, hoopTapeMaterial);
hoopMesh.position.z = 0;
scene.add(hoopTape1Mesh);

jsfiddle with the current working code.

javascript three.js

Answer 1

Answer №1

To achieve the desired effect, you must use a seamless texture for your torus. The texture should closely resemble the one provided in the link below:

https://i.sstatic.net/I0fOV.jpg

Next, utilize the following code structure:

var geometry = new THREE.TorusBufferGeometry( 6, 0.4, 16, 64 );

var loader = new THREE.TextureLoader();
var texture = loader.load( 'stripe.jpg', function ( texture ) {
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set( 16, 0.5 ); // adjust values as needed
    render();
} );

var material = new THREE.MeshPhongMaterial( {
    color: 0x998877, 
    specular: 0x050505,
    shininess: 50,
    map: texture
} );

var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

Compatible with three.js version r.77

Answer 2

To achieve the desired effect, you must use a seamless texture for your torus. The texture should closely resemble the one provided in the link below:

https://i.sstatic.net/I0fOV.jpg

Next, utilize the following code structure:

var geometry = new THREE.TorusBufferGeometry( 6, 0.4, 16, 64 );

var loader = new THREE.TextureLoader();
var texture = loader.load( 'stripe.jpg', function ( texture ) {
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set( 16, 0.5 ); // adjust values as needed
    render();
} );

var material = new THREE.MeshPhongMaterial( {
    color: 0x998877, 
    specular: 0x050505,
    shininess: 50,
    map: texture
} );

var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

Compatible with three.js version r.77

Covering a doughnut shape with a twisting spiral

Answer №1

Similar questions

The command "npm run build" is failing and encountering errors within the webpack project

Is it possible that the method of wrapping options using an array is not functioning correctly in the quiz app being managed in React?

Can you please tell me the event that is triggered when an option is unselected in Vue.Drag

Issue encountered when attempting to retrieve elements within an HTA's IFrame

Is there a method to automatically create .stories.ts files in Angular Storybook?

Error: Expecting only one React element child to be passed into React.Children.only() function

What are the steps to create a connect4 board featuring rounded corners and curved sides?

Error: The request to /api/auth/login in Postman failed unexpectedly

Adjusting specific sections of a container in real-time

"Enhancing Real-Time Communication in Angular with Websockets and $rootScope's Apply

Execute the function numerous times that is associated with an asynchronous function in JavaScript

Popup showing values that are not defined

Issue with Click event not functioning properly following an ajax request in a dynamic element within the Backbone framework

Problematic Angular 6 Lazy Loading Situation

Is there a way to extract an icon from an object or array?

Combine the elements of an array to form a cohesive string

Tips on invoking a function from an array in JavaScript when a button is clicked

When attempting to declare a functional component in React utilizing styled-components in TypeScript, an error is encountered stating "No overload matches this call."

A guide to accessing the currently hovered element on a Line Chart with Recharts

displaying a Google Map within a designated container