CODEWITHSUNDEEP
three.js
max
max

Reputation: 10464

extrusion with threejs has wrong dimensions

I'm trying to understand how to extrude a path using threejs. I looked at https://threejs.org/docs/index.html#api/en/geometries/ExtrudeGeometry which is what I need. Here is the code I tried:

// ------------------------------------------------
// BASIC SETUP
// ------------------------------------------------
// Create an empty scene
var scene = new THREE.Scene();


// Create a basic perspective camera
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 150;

// Create a renderer with Antialiasing
var renderer = new THREE.WebGLRenderer({antialias:true});

// Configure renderer clear color
renderer.setClearColor("#000000");

// Configure renderer size
renderer.setSize( window.innerWidth, window.innerHeight );

// Append Renderer to DOM
document.body.appendChild( renderer.domElement );


// ------------------------------------------------
// FUN STARTS HERE
// ------------------------------------------------

function make_graphics(){
    // clean up:
    for( var i = scene.children.length - 1; i >= 0; i--) { 
        obj = scene.children[i];
        scene.remove(obj); 
    }

    // Create a Shape Mesh with basic material
    const shape = new THREE.Shape();
    const x_len = 12;
    const y_len = 8;
    shape.moveTo( 0, 0 );
    shape.lineTo( 0, y_len );
    shape.lineTo( x_len, y_len );
    shape.lineTo( x_len, 0 );
    shape.lineTo( 0, 0 );

    const extrudeSettings = {
        steps: 2,
        depth: 12,
        bevelEnabled: true,
        bevelThickness: 1,
        bevelSize: 1,
        bevelOffset: 0,
        bevelSegments: 1
    };

    const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe:true } );
    const mesh = new THREE.Mesh( geometry, material ) ;
    scene.add( mesh );

    // Render Loop
    var render = function () {
      requestAnimationFrame( render );

      mesh.rotation.x += 0.001;
      mesh.rotation.y += 0.001;

      // Render the scene
      renderer.render(scene, camera);
    };

    render(1, 1, 1);
}

document.addEventListener("DOMContentLoaded", function(){
    make_graphics();
});
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Three.js 101</title>
  <!--  Simple reset to delete the margins  -->
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
  </style>
  <!--  Three.js CDN  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
</head>
<body>
  <!--  Our code  -->
  <script src="script.js"></script>
</body>
</html>

The extrusion is very long. It should be 12 by 8 by 12 but you can see it looks like a long rod. Does anyone know why the dimensions look wrong?

Upvotes: 0

Views: 85

Answers (1)

Phil N.
Phil N.

Reputation: 700

You're using an old version of Three.js (r83). In that version, what became the depth option in ExtrudeGeometry was called amount, and it defaults to 100 if it's not present. If you change depth to amount in your extrudeSettings object, or (preferably) change your CDN link to import a more recent version of Three.js, your code should work as expected.

Upvotes: 1

Related Questions