Is there a way to trim the current shapes in three.js?

Question

Is there a way to trim the current shapes in three.js?

I have created a shape similar to this using Box Geometry at the following link: https://jsfiddle.net/cdu96z3c/. I am looking to achieve a design like the image below by properly utilizing v.x and v.z, while maintaining the current corrugation and properties of the shape:

https://i.sstatic.net/7vlwg.jpg

var geom = new THREE.BoxGeometry(50,-.1,150,1,1,150 * 10); 
geom.vertices.forEach(function(v){
    x_val = Math.abs(v.z);
    if((x_val % 9) < 0.75 || (x_val % 9) > 8.25){
      var m = parseInt(x_val/9) *9;
      var l = 0.75 - (m - x_val);
      v.y =  v.y + 0.75 * Math.sin(l* Math.PI/1.5);
    }
    else if(x_val % 3 < 0.25 || (x_val % 3) > 2.75){
      var m = parseInt(x_val/3) * 3;
      var l = 0.25 - (m - x_val);
      v.y =  v.y + 0.25 * Math.sin(l * Math.PI / 0.5);
    }
});`

javascript three.js

Answer 1

Answer №1

When you transform your iron sheet into a corrugated form, you unlock its potential for further deformation. The following demonstration illustrates this concept:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(50, 100, 100);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.AxesHelper(10));

// Directional lights setup
for (let xCoord of [-1, 1]) {
  for (let yCoord of [-1, 1]) {
    for (let zCoord of [-1, 1]) {
      let directionalLight = new THREE.DirectionalLight(0xffffff, 0.2);
      directionalLight.castShadow = true;
      directionalLight.position.set(xCoord, yCoord, zCoord);
      scene.add(directionalLight);
    }
  }
}

scene.add(new THREE.AmbientLight(0xffffff, .5));

// Creating a corrugated mesh
var geom = new THREE.BoxGeometry(
          150,
          0.1,
          50,
          150 * 10,
          1,
          1
          );

geom.vertices.forEach(function(v){
 let x_val = Math.abs(v.x);
if((x_val % 9) < 0.75 || (x_val % 9) > 8.25){
          var m = parseInt(x_val/9) *9;
          var l = 0.75 - (m - x_val);
          v.y =  v.y + 0.75 * Math.sin(l* Math.PI/1.5);
        }
        else if(x_val % 3 < 0.25 || (x_val % 3) > 2.75){
          var m = parseInt(x_val/3) * 3;
          var l = 0.25 - (m - x_val);
          v.y =  v.y + 0.25 * Math.sin(l * Math.PI / 0.5);
        }
});
geom.computeFaceNormals();
geom.computeVertexNormals();

var corrugated = new THREE.Mesh(geom, new THREE.MeshLambertMaterial({color: "silver"}));
scene.add(corrugated);

btnCut.addEventListener("click", function(){
  
  let cutLength = 125;
  let leftLimit = (cutLength - (geom.parameters.width * 0.5)) * -1;
  
  var marker = new THREE.Mesh(new THREE.SphereGeometry(1, 4, 2), new THREE.MeshBasicMaterial({color: 'red'}));
  marker.position.set(leftLimit, 0, geom.parameters.depth * 0.5);
  scene.add(marker);
  
  geom.vertices.forEach(v => {
    v.x = v.x < leftLimit ? leftLimit : v.x;
  });
  geom.vertices.forEach(v => {
    let zSign = Math.sign(v.z);
    if (v.z < 0) {
    v.z = -(v.x - leftLimit) * Math.tan(THREE.Math.degToRad(60)) + geom.parameters.depth * 0.5;
    v.z = Math.abs(v.z) > geom.parameters.depth * 0.5 ? geom.parameters.depth * 0.5 * zSign : v.z;
    }
  });
  geom.verticesNeedUpdate = true;
}, false);

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

body{
  overflow: hidden;
  margin: 0;
}

    <script src="https://threejs.org/build/three.min.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
    <button id="btnCut" style="position: absolute;">Cut</button>

Answer 2

When you transform your iron sheet into a corrugated form, you unlock its potential for further deformation. The following demonstration illustrates this concept:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(50, 100, 100);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.AxesHelper(10));

// Directional lights setup
for (let xCoord of [-1, 1]) {
  for (let yCoord of [-1, 1]) {
    for (let zCoord of [-1, 1]) {
      let directionalLight = new THREE.DirectionalLight(0xffffff, 0.2);
      directionalLight.castShadow = true;
      directionalLight.position.set(xCoord, yCoord, zCoord);
      scene.add(directionalLight);
    }
  }
}

scene.add(new THREE.AmbientLight(0xffffff, .5));

// Creating a corrugated mesh
var geom = new THREE.BoxGeometry(
          150,
          0.1,
          50,
          150 * 10,
          1,
          1
          );

geom.vertices.forEach(function(v){
 let x_val = Math.abs(v.x);
if((x_val % 9) < 0.75 || (x_val % 9) > 8.25){
          var m = parseInt(x_val/9) *9;
          var l = 0.75 - (m - x_val);
          v.y =  v.y + 0.75 * Math.sin(l* Math.PI/1.5);
        }
        else if(x_val % 3 < 0.25 || (x_val % 3) > 2.75){
          var m = parseInt(x_val/3) * 3;
          var l = 0.25 - (m - x_val);
          v.y =  v.y + 0.25 * Math.sin(l * Math.PI / 0.5);
        }
});
geom.computeFaceNormals();
geom.computeVertexNormals();

var corrugated = new THREE.Mesh(geom, new THREE.MeshLambertMaterial({color: "silver"}));
scene.add(corrugated);

btnCut.addEventListener("click", function(){
  
  let cutLength = 125;
  let leftLimit = (cutLength - (geom.parameters.width * 0.5)) * -1;
  
  var marker = new THREE.Mesh(new THREE.SphereGeometry(1, 4, 2), new THREE.MeshBasicMaterial({color: 'red'}));
  marker.position.set(leftLimit, 0, geom.parameters.depth * 0.5);
  scene.add(marker);
  
  geom.vertices.forEach(v => {
    v.x = v.x < leftLimit ? leftLimit : v.x;
  });
  geom.vertices.forEach(v => {
    let zSign = Math.sign(v.z);
    if (v.z < 0) {
    v.z = -(v.x - leftLimit) * Math.tan(THREE.Math.degToRad(60)) + geom.parameters.depth * 0.5;
    v.z = Math.abs(v.z) > geom.parameters.depth * 0.5 ? geom.parameters.depth * 0.5 * zSign : v.z;
    }
  });
  geom.verticesNeedUpdate = true;
}, false);

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

body{
  overflow: hidden;
  margin: 0;
}

    <script src="https://threejs.org/build/three.min.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
    <button id="btnCut" style="position: absolute;">Cut</button>

Is there a way to trim the current shapes in three.js?

Answer №1

Similar questions

Struggling to iterate through the children of a variable with the help of express-handlebars?

Even after dynamically removing the class from the element, the Click event can still be detected

While iterating over the key with a variable in a loop, only one property is displayed consistently instead of four different

What is the best way to efficiently set up a scrolling text ticker for repeated use?

Unable to click on the icon when modifying Mui Text Field

Could not locate the express.js file

Is there a way to successfully include an apostrophe in a URL?

Creating an Account with Firebase

A guide on utilizing Socket.io to efficiently transfer data to a specific client within a designated chat room

Ensuring that an md-radio-group is a required field in Angular Material

Error message stating 'compression is not defined' encountered while attempting to deploy a Node.js application on Heroku

Shall we Combine JavaScript Files with Import and Require Statements?

It appears that the use of "window.location" is causing the ajax post

Loading Animation for Pages and Tables

How to retrieve items from a DynamoDB table where the fields array is not empty using JavaScript FilterExpression

Enable the Chrome extension to interact with the RESTAPI

What is the best way to pass a JSON object from R to Plumber in a format that JavaScript can interpret as an array instead of

Challenges in creating an alternative path in ExpressJS

Guide for Sending a Textnode from One Page to a Different Page within a Specific Id Element through PHP

Using express.js to transfer an uploaded image to Amazon S3