Using Three.js, generate a series of meshes that combine to create a seamless 90-degree donut shape

Question

Using Three.js, generate a series of meshes that combine to create a seamless 90-degree donut shape

I'm on a quest to discover an algorithm that can create the following shape in Three.js. Here is my rough sketch of the expected shape The number of meshes needed to form the 90 degree donut, as well as the thickness and spacing between them, should all be adjustable parameters.

I've attempted to achieve this using TorusGeometry and setting the radial segments to 2, but that approach didn't give me the separate meshes I require, as shown in my desired outcome. After some more research, I came across ShapeGeometry which seems to be the better option.

const generateArc = (padding, thickness, count) => {
     const arcShape = new THREE.Shape()
        .moveTo( 50, 10 )
        .absarc( 10, 10, 40, 0, Math.PI * 2, false );
}

However, I'm struggling to calculate the correct values to generate these individual mesh arcs. Do you think my choice of ShapeGeometry is on the right track? If so, could you guide me on how to create the appropriate mesh shapes using ShapeGeometry?

javascript three.js geometry shapes mesh

Answer 1

Answer №1

Make sure to include the 5th parameter, which represents the arc, in the constructor for TorusGeometry. It seems like you're missing this crucial parameter.

The syntax for TorusGeometry is as follows:

TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)

By specifying the arc, you can create a torus with less than 90 degrees. The arc is measured in radians, so for example, to create 3 segments within a 90-degree angle, you would use (Math.PI / 2) / 3 or Math.PI / 6. See the code snippet below for a working example:

var camera, scene, renderer;

init();
render();

function init() {
    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 50 );
    camera.position.set( 0, 0, 15 );

    scene = new THREE.Scene();
    const MARGIN = Math.PI / 100;
    
    var torusArc = Math.PI / 6 - MARGIN;
    var geometry = new THREE.TorusGeometry( 5, 1, 16, 32, torusArc);
    
    var material = new THREE.MeshNormalMaterial({side: THREE.DoubleSide});

    var mesh1 = new THREE.Mesh( geometry, material );
    var mesh2 = new THREE.Mesh( geometry, material );
    mesh2.rotation.z = Math.PI / 6 + MARGIN;
    var mesh3 = new THREE.Mesh( geometry, material );
    mesh3.rotation.z = (Math.PI / 6 + MARGIN) * 2;

    scene.add( mesh1 );
    scene.add( mesh2 );
    scene.add( mesh3 );

    renderer = new THREE.WebGLRenderer( { antialias: false } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    new THREE.OrbitControls( camera, renderer.domElement );

    window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );
}


function render(time) {
    camera.positi
    renderer.render( scene, camera );
    requestAnimationFrame( render );
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a7e62786f6f4a3a243b3e3a243a">[email protected]</a>/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6a2bea4b3b396e6f8e7e2e6f8e6">[email protected]</a>/examples/js/controls/OrbitControls.js"></script>

Answer 2

Make sure to include the 5th parameter, which represents the arc, in the constructor for TorusGeometry. It seems like you're missing this crucial parameter.

The syntax for TorusGeometry is as follows:

TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)

By specifying the arc, you can create a torus with less than 90 degrees. The arc is measured in radians, so for example, to create 3 segments within a 90-degree angle, you would use (Math.PI / 2) / 3 or Math.PI / 6. See the code snippet below for a working example:

var camera, scene, renderer;

init();
render();

function init() {
    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 50 );
    camera.position.set( 0, 0, 15 );

    scene = new THREE.Scene();
    const MARGIN = Math.PI / 100;
    
    var torusArc = Math.PI / 6 - MARGIN;
    var geometry = new THREE.TorusGeometry( 5, 1, 16, 32, torusArc);
    
    var material = new THREE.MeshNormalMaterial({side: THREE.DoubleSide});

    var mesh1 = new THREE.Mesh( geometry, material );
    var mesh2 = new THREE.Mesh( geometry, material );
    mesh2.rotation.z = Math.PI / 6 + MARGIN;
    var mesh3 = new THREE.Mesh( geometry, material );
    mesh3.rotation.z = (Math.PI / 6 + MARGIN) * 2;

    scene.add( mesh1 );
    scene.add( mesh2 );
    scene.add( mesh3 );

    renderer = new THREE.WebGLRenderer( { antialias: false } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    new THREE.OrbitControls( camera, renderer.domElement );

    window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );
}


function render(time) {
    camera.positi
    renderer.render( scene, camera );
    requestAnimationFrame( render );
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a7e62786f6f4a3a243b3e3a243a">[email protected]</a>/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6a2bea4b3b396e6f8e7e2e6f8e6">[email protected]</a>/examples/js/controls/OrbitControls.js"></script>

Using Three.js, generate a series of meshes that combine to create a seamless 90-degree donut shape

Answer №1

Similar questions

A guide to showcasing data within PrimeNG's pie chart component using either JavaScript or Angular

Creating a Powerful Application with Typescript and NodeJS

Is nextJS SSR the optimal solution for handling undefined variables in the window object to enable optional chaining in cases where global variables are not supported?

The validation using regex is unsuccessful when the 6th character is entered

When the drop-down selection changes in AngularJS, the textbox value becomes empty

Is it possible for the client to prevent the blocking of the Cross-Origin Resource Sharing (CORS) error?

Count Scroller - Finding a Solution for _.debounce

Error in React Native JS: Cannot call the `map` function on variable `l`

Vue component fails to render on a specific route

Using the find() function in Mongoose allows the use of a variable as a model

The scroll animation feature was not functioning properly in Next.js, however, it was working flawlessly in create react app

jQuery Does Not Iterate Through Arrays

Using jQuery functions on inputs within a Bootstrap Modal

Using AngularJS with the Chosen Plugin to pre-select a value in a dropdown menu

Using the _id String in a GraphQL query to retrieve information based on the Object ID stored in a

experiencing a problem with the scrollTo() function

Guide for verifying the minimum and maximum values when selecting a particular product from a dropdown menu

Encountering a 404 error while sending a session ID in a Post request using AngularJS

Utilizing Javascript Conditional for Substitution

React Table Pagination Bug with Material UI Library