Rotating around the axis of extrusion, Three.js extrudes a 2D face

Question

Rotating around the axis of extrusion, Three.js extrudes a 2D face

I am interested in creating a twisting effect during extrusion on a shape, rotating it about the Z-axis like seen in the examples below

https://i.sstatic.net/wLF2s.png

and here

https://i.sstatic.net/Aq7Db.png

My attempt at achieving a twisted cube is outlined below:

var squareShape = new THREE.Shape();
squareShape.moveTo(10,0);
squareShape.lineTo(0,10);
squareShape.lineTo(-10,0);
squareShape.lineTo(0,-10);
squareShape.lineTo(10,0);


var extrudeSettings={amount:10, bevelEnabled:false};
var geometry = new THREE.ExtrudeGeometry( gearShape, extrudeSettings );

Unfortunately, this code only extrudes the shape in a straight line along the z-axis. It seems challenging to shear the cube into a twist about the z-axis using geometry.applyMatrix( );

It is possible that manually adjusting the normals, bi-normals, and tangents of the 2D shape while extruding could achieve the desired twist. I suspect that the solution may involve extrudePath — THREE.CurvePath and frames-THREE.TubeGeometry.FrenetFrames, but I am uncertain if there is a simpler approach.

Any assistance on this issue would be highly appreciated!

javascript three.js

Answer 1

Answer №1

If you have information about the z value at which the vertices form a face, you can apply a twist to the mesh by a specific helix angle. This script rotates all the vertices with a z value of width/2 by the given angle...

function applyTwistToMesh(mesh, helixAngle, width) {
    for (var i = 0; i < mesh.geometry.vertices.length; i++) {
        if (mesh.geometry.vertices[i].z == width/2.0) {
        var updateX = mesh.geometry.vertices[i].x * Math.cos(helixAngle)
                    - mesh.geometry.vertices[i].y * Math.sin(helixAngle);
        var updateY = mesh.geometry.vertices[i].y * Math.cos(helixAngle)
                    + mesh.geometry.vertices[i].x * Math.sin(helixAngle);
        mesh.geometry.vertices[i].x = updateX;
        mesh.geometry.vertices[i].y = updateY;
        }  
    }
        return mesh;
   }

Additionally, you can modify the mesh by tapering it...

function taperMesh(mesh, scaleFactor, width) {
     for (var i = 0; i < mesh.geometry.vertices.length; i++) {
       if (mesh.geometry.vertices[i].z == width/2.0) {
        var updateX = mesh.geometry.vertices[i].x * scaleFactor;
        var updateY = mesh.geometry.vertices[i].y * scaleFactor;

        mesh.geometry.vertices[i].x = updateX;
        mesh.geometry.vertices[i].y = updateY;

        }  else {
           }
      }
        return mesh;
    }

Answer 2

If you have information about the z value at which the vertices form a face, you can apply a twist to the mesh by a specific helix angle. This script rotates all the vertices with a z value of width/2 by the given angle...

function applyTwistToMesh(mesh, helixAngle, width) {
    for (var i = 0; i < mesh.geometry.vertices.length; i++) {
        if (mesh.geometry.vertices[i].z == width/2.0) {
        var updateX = mesh.geometry.vertices[i].x * Math.cos(helixAngle)
                    - mesh.geometry.vertices[i].y * Math.sin(helixAngle);
        var updateY = mesh.geometry.vertices[i].y * Math.cos(helixAngle)
                    + mesh.geometry.vertices[i].x * Math.sin(helixAngle);
        mesh.geometry.vertices[i].x = updateX;
        mesh.geometry.vertices[i].y = updateY;
        }  
    }
        return mesh;
   }

Additionally, you can modify the mesh by tapering it...

function taperMesh(mesh, scaleFactor, width) {
     for (var i = 0; i < mesh.geometry.vertices.length; i++) {
       if (mesh.geometry.vertices[i].z == width/2.0) {
        var updateX = mesh.geometry.vertices[i].x * scaleFactor;
        var updateY = mesh.geometry.vertices[i].y * scaleFactor;

        mesh.geometry.vertices[i].x = updateX;
        mesh.geometry.vertices[i].y = updateY;

        }  else {
           }
      }
        return mesh;
    }

Rotating around the axis of extrusion, Three.js extrudes a 2D face

Answer №1

Similar questions

Troubleshooting: JavaScript code not functioning properly with variable input instead of fixed value

Can .map() be utilized to transform an array of objects into a single object?

Executing Javascript functions using a variable string name

Ensuring session data is updated when saving a mongoose model

Tips for avoiding $state refresh in Components unaffected by changes to $state.var?

JavaScript array manipulation

Exploring Elasticsearch: Uncovering search results in any scenario

A guide to implementing offline.js or online.js alongside a submit button

React Material UI Table - All switches toggled simultaneously

What is the correct way to format responses written within response.write() in NodeJS?

Observing modifications in the database is possible after executing the setInterval function

We apologize, but the module you are looking for cannot be found: Unable to locate 'fs'

Experiencing a failure in defining the factory

JQuery form serialize not triggering in Internet Explorer

What is the best way to incorporate this CodePen snippet into a Vue project?

What steps can be taken to resolve the issue of receiving the error message "Invalid 'code' in request" from Discord OAuth2?

Utilizing FabricJS to create a canvas with synchronized scrolling to the window

Problem with jQuery's UI autocomplete functionality

Automating the selection of a drop down based on a condition in Angular 2: A step-by-step guide

Focus automatically on an input component when the value in the Vuex store is updated in Vue