three.js THREE.CylinderGeometry


Exemple

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 ...