CODEWITHSUNDEEP
javascriptthree.js
lequitzen
lequitzen

Reputation: 11

Three.js - how to create custom shapes

I´m using Three.js and trying to create some custom shapes, similar to one that appears in a project from one of agencies using threejs:

three.js featured project esample threejs featured project

How did they generated these boxes with holes inside? (on that examples boxes basically have only borders around and are empty inside).

As I saw in the code (I was trying to figure out myself) they use BoxGeometry but I have no idea how to accomplish that. Does anyone know or can give me any directions? It would be really helpfull as i´m stuck with this and have no idea on how to create them.

Upvotes: 1

Views: 805

Answers (1)

kavakava
kavakava

Reputation: 69

So in THREE.js Meshes represent any kind of 3D object. They combine Geometries and Shaders. Generally to create a mesh you call

var mesh = new THREE.Mesh( geometry, shader );

If you use any of the builtin shaders (also known as Materials [ MeshBasicMaterial, MeshLambertMaterial, etc]) they have a wireFrame boolean attribute that allows this functionality.

var geometry = new THREE.BoxGeometry( x, y, z ),
    material = new THREE.MeshBasicMaterial( { 
        wireFrame: true, // This makes the object appear wireframe
        color: 0xffffff  // You can alter other properties
    });

var box = new THREE.Mesh( geometry, material );

// You can also change it later
box.material.wireFrame = false;

Upvotes: 1

Related Questions