three.js
Géométries
Recherche…
Remarques
Les exemples fonctionnent à partir de trois.js R79 (révision 79).
THREE.BoxGeometry
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.
THREE.CylinderGeometry
THREE.CylinderGeometry construit des cylindres.
Cylindre
Dans l'exemple précédent, le code pour créer la boîte pourrait être remplacé par le code ci-dessous.
//Makes a new cylinder with
// - a circle of radius 5 on top (1st parameter)
// - a circle of radius 5 on the bottom (2nd parameter)
// - a height of 20 (3rd parameter)
// - 32 segments around its circumference (4th parameter)
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
//Yellow
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );
Pour construire à partir de zéro, voici le code.
//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 Cylinder!
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
//Yellow
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );
//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 = 30;
//Rendering
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
Plus (prouver que le cylindre est en trois dimensions)
Le cylindre peut sembler être juste ... bidimensionnel. Pour prouver que c'est sans doute en trois dimensions, ajoutez les lignes de code suivantes à la fonction "render":
...
cylinder.rotation.x += 0.05;
cylinder.rotation.z += 0.05;
...
Et le cylindre brillant et joyeux tournait au hasard, au milieu d'un fond noir et sombre ...