three.js THREE.BoxGeometry


Exemple

THREE.BoxGeometry construit des boîtes telles que cuboids et cubes.

Cubes

Les cubes créés avec THREE.BoxGeometry utiliseraient la même longueur pour tous les côtés.

JavaScript

//Creates scene and camera

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

//Creates renderer and adds it to the DOM

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//The Box!

//BoxGeometry (makes a geometry)
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
//Material to apply to the cube (green)
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
//Applies material to BoxGeometry
var cube = new THREE.Mesh( geometry, material );
//Adds cube to the scene
scene.add( cube );

//Sets camera's distance away from cube (using this explanation only for simplicity's sake - in reality this actually sets the 'depth' of the camera's position)

camera.position.z = 5;

//Rendering

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

Notez la fonction "render". Cela rend le cube 60 fois par seconde.

Code complet (avec HTML)

<!DOCTYPE html>
<html>
  
  <head>
    <title>THREE.BoxGeometry</title>
    <script src="http://threejs.org/build/three.js"></script>
  </head>

  <body>

    <script>
      //Above JavaScript goes here
    </script>

  </body>
  
</html>

Cuboïdes

La ligne var geometry = new THREE.BoxGeometry( 1, 1, 1 ); nous donne un cube. Pour créer un cuboïde, changez simplement les paramètres - ils définissent respectivement la longueur, la hauteur et la profondeur du cube.

Exemple:

...
//Longer cuboid
var geometry = new THREE.BoxGeometry( 2, 1, 1 );
...

Plus (prouver que le cube est en trois dimensions)

Le cube peut sembler être juste un carré. Pour prouver que c'est sans doute en trois dimensions, ajoutez les lignes de code suivantes à la fonction "render":

...
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
...

Et regardez comme le cube joyeux tourne rond… et rond… et rond…

Coloré

Pas pour les âmes sensibles...

La couleur uniforme du cube entier est ... verte. Ennuyeuse. Pour que chaque visage ait une couleur différente, nous devons creuser les faces de la géométrie.

var geometry = new THREE.BoxGeometry(3, 3, 3, 1, 1, 1);

/*Right of spawn face*/
geometry.faces[0].color = new THREE.Color(0xd9d9d9);
geometry.faces[1].color = new THREE.Color(0xd9d9d9);

/*Left of spawn face*/
geometry.faces[2].color = new THREE.Color(0x2196f3);
geometry.faces[3].color = new THREE.Color(0x2196f3);

/*Above spawn face*/
geometry.faces[4].color = new THREE.Color(0xffffff);
geometry.faces[5].color = new THREE.Color(0xffffff);

/*Below spawn face*/
geometry.faces[6].color = new THREE.Color(1, 0, 0);
geometry.faces[7].color = new THREE.Color(1, 0, 0);

/*Spawn face*/
geometry.faces[8].color = new THREE.Color(0, 1, 0);
geometry.faces[9].color = new THREE.Color(0, 1, 0);

/*Opposite spawn face*/
geometry.faces[10].color = new THREE.Color(0, 0, 1);
geometry.faces[11].color = new THREE.Color(0, 0, 1);

var material = new THREE.MeshBasicMaterial( {color: 0xffffff, vertexColors: THREE.FaceColors} );
var cube = new THREE.Mesh(geometry, material);

REMARQUE: La méthode de coloration des visages n'est pas la meilleure méthode, mais elle fonctionne bien (assez).

Remarques

Où est la canvas dans le corps du document HTML?

Il n'est pas nécessaire d'ajouter un canvas au corps manuellement. Les trois lignes suivantes

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

créer le rendu, son canvas et ajouter le canvas au DOM.