Custom shaped corrugated sheet in three dimensions

Question

Custom shaped corrugated sheet in three dimensions

While constructing a house-like structure with corrugated sheets, I utilized BoxGeometry to outline the structure and adjusted vertices to create a corrugated sheet wall.

I have been experimenting with creating a facade using corrugated sheets in the shape shown below. However, my attempts at modifying the vertices as done in the initial example have not yielded the desired corrugated pattern.

Here is the code snippet I used for the front side wall:

https://i.sstatic.net/aqMgj.jpg I tried implementing the following code using shapes but could not achieve the desired corrugated effect.

In an effort to replicate the corrugated pattern, I constructed a shape for the wall and manipulated the vertices accordingly. Nevertheless, the output did not display the intended corrugated structure.

Do you have any recommendations on how to achieve the desired corrugated look?

javascript three.js geometry

Answer 1

Answer №1

I concur with Mugen87's suggestion regarding utilizing creation tools. However, if there are reasons to avoid using loadable items, you can opt for a different approach like the one outlined below, allowing for freedom in transforming the geometry as desired (presenting a basic concept here):

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 5, 15);
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);

var light = new THREE.DirectionalLight(0xffffff, .5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, .5));

var w = 5,
  h = 5;
var geom = new THREE.BoxGeometry(w, h, 0.125, 50, 1, 1);
geom.vertices.forEach(function(v) {
  if (v.y > 0) {
    v.y += (w / 2) - Math.abs(v.x); // customizing y based on x value
  }
});
geom.vertices.forEach(function(v) {
  v.z += Math.sin(v.x * Math.PI * 2) * .125;
});
geom.computeFaceNormals();
geom.computeVertexNormals();

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


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>

Answer 2

I concur with Mugen87's suggestion regarding utilizing creation tools. However, if there are reasons to avoid using loadable items, you can opt for a different approach like the one outlined below, allowing for freedom in transforming the geometry as desired (presenting a basic concept here):

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 5, 15);
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);

var light = new THREE.DirectionalLight(0xffffff, .5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, .5));

var w = 5,
  h = 5;
var geom = new THREE.BoxGeometry(w, h, 0.125, 50, 1, 1);
geom.vertices.forEach(function(v) {
  if (v.y > 0) {
    v.y += (w / 2) - Math.abs(v.x); // customizing y based on x value
  }
});
geom.vertices.forEach(function(v) {
  v.z += Math.sin(v.x * Math.PI * 2) * .125;
});
geom.computeFaceNormals();
geom.computeVertexNormals();

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


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>

Custom shaped corrugated sheet in three dimensions

Answer №1

Similar questions

Is there a way to close the menu in react by clicking anywhere on the

The absence of a closing parentheses in the argument is causing an issue when rendering

What is the best way to generate a div with a dynamically changing variable as its ID?

Manipulating an Array of Objects based on conditions in Angular 8

What is the most effective approach to integrating socket.io as a submodule into the ExpressJS framework?

I need to search through a tree structure in typescript based on a specific value without encountering a maximum stack call exceeded error

How can we make v-show reactive with each click of a checkbox or toggle in Vue.js 3?

Generating intricate JSON structures with JavaScript programming instructions

Attempting to use express and nodemailer to send an email, but there is absolutely no output appearing in either the console or the terminal

What could be the reason for this code not waiting for module imports?

Twitter API causing issues with setTimeout function in Node.js

Retrieving all options from a dropdown list in HTML using ASP.net C#

How can I get my ReactJS file to properly show the user's email address?

How can you make the table rows in jQuery scroll automatically while keeping the table header fixed in

Transmit a JSON array from a controller to a JavaScript variable

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

Changing Enum Value to Text

Making a Jquery Ajax Request in Real Time

Leveraging AngularJS to send a post request to the server through the $http

Tips for Printing a div Element with Horizontal Scrollbars