CODEWITHSUNDEEP
javascriptthree.jsgeometry
sajith
sajith

Reputation: 2702

threejs corrugated sheet custom shape

I am building a house like structure with corrugated sheets like below.Here I have used BoxGeometry to draw the structure and updated vertices to make corrugated sheet wall.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 2, 5);
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 directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, 1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, 1, -1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, -1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, -1, -1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, 1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, 1, -1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, -1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, -1, -1);
  scene.add( directionalLight1 );


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

var geom = new THREE.BoxGeometry(50, 50, 0.1, 500, 1, 1);
geom.vertices.forEach(function(v){
	var 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.z =  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.z =  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);


render();
function render(){
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
body {
  overflow: hidden;
  margin: 0;
}
<html>
  <head>
    <script src="https://threejs.org/build/three.min.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js">			</script>
  </head>
  <body>
    
  </body>
</html>

I want to build front side wall with the corrugated sheet as in the below shape

enter image description here I have tried with the below code using shape.and tried to updated vertices as the first example.But not getting the desired corrugated pattern.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 2, 5);
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 directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, 1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, 1, -1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, -1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, -1, -1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, 1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, 1, -1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, -1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, -1, -1);
  scene.add( directionalLight1 );

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

var wallShape = new THREE.Shape();

wallShape.moveTo( -50, 0 );
wallShape.bezierCurveTo( -50, 33, -50, -66, -50, 100);
wallShape.bezierCurveTo( -32, 116, -16, 132, 0, 150 );
wallShape.bezierCurveTo( 16, 132, 32, 116, 50, 100 );
wallShape.bezierCurveTo( 50, 66, 50, 33, 50, 0 );
wallShape.lineTo(-50, 0 );

var extrudeSettings = { amount: 0.1, bevelEnabled: false, curveSegments: 500};

var geometry = new THREE.ExtrudeGeometry( wallShape, extrudeSettings );

geometry.vertices.forEach(function(v){
        var yval = Math.abs(v.y);
        if((yval % 9) < 0.75 || (yval % 9) > 8.25){
          var m = parseInt(yval/9) *9;
          var l = 0.75 - (m - yval);
          v.z =  v.z + 0.75 * Math.sin(l* Math.PI/1.5);
        }
});



geometry.computeFaceNormals();
geometry.computeVertexNormals();

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

render();
function render(){
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
body {
  overflow: hidden;
  margin: 0;
}
<html>
  <head>
    <script src="https://threejs.org/build/three.min.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js">			</script>
  </head>
  <body>
    
  </body>
</html>

Any suggestions on how to make the desired corrugated structure?

Upvotes: 0

Views: 147

Answers (1)

prisoner849
prisoner849

Reputation: 17596

I agree with Mugen87 about making the things in creation tools. But, if for some reasons you don't want to use loadable stuff, then you do something like that, feeling free to transform the geometry as much as you want (a rough 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); // here you can use whatever dependency y from x :)
  }
});
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>

Upvotes: 3

Related Questions