three.js
Geometrien
Suche…
Bemerkungen
Beispiele funktionieren ab drei. Js R79 (Revision 79).
DREI.BoxGeometry
THREE.BoxGeometry erstellt Boxen wie Cuboids und Cubes.
Würfel
Mit THREE.BoxGeometry erstellte Würfel verwenden für alle Seiten dieselbe Länge.
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();
Beachten Sie die Funktion "Rendern". Dadurch wird der Würfel 60 Mal pro Sekunde gerendert.
Vollständiger Code (mit 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>
Cuboids
Die Linie var geometry = new THREE.BoxGeometry( 1, 1, 1 ); gibt uns einen Würfel Um einen Quader zu erstellen, ändern Sie einfach die Parameter - sie definieren jeweils Länge, Höhe und Tiefe des Würfels.
Beispiel:
...
//Longer cuboid
var geometry = new THREE.BoxGeometry( 2, 1, 1 );
...
Mehr (der Beweis, dass der Würfel dreidimensional ist)
Der Würfel scheint nur ein Quadrat zu sein. Um zu beweisen, dass es zweifellos dreidimensional ist, fügen Sie der 'render'-Funktion die folgenden Codezeilen hinzu:
...
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
...
Und schau zu, wie sich der lustige Würfel dreht ... und rund ... und rund ...
Bunt
Nicht für schwache Nerven...
Die einheitliche Farbe für den gesamten Würfel ist ... grün. Langweilig. Um jedem Gesicht eine andere Farbe zu geben, müssen wir zu den Gesichtern der Geometrie graben.
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);
HINWEIS: Die Methode zum Färben der Gesichter ist nicht die beste Methode, funktioniert jedoch gut (genug).
Anmerkungen
Wo befindet sich die canvas im Hauptteil des HTML-Dokuments?
Es ist nicht notwendig, dem Körper eine canvas manuell hinzuzufügen. Die folgenden drei Zeilen
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Erstellen Sie den Renderer und seine canvas und fügen Sie die canvas zum DOM hinzu.
DREI.ZylinderGeometrie
THREE.CylinderGeometry baut Zylinder auf.
Zylinder
In Fortsetzung des vorherigen Beispiels könnte der Code zum Erstellen der Box durch den folgenden Code ersetzt werden.
//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 );
Um von Grund auf zu bauen, hier der 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();
Mehr (der Beweis, dass der Zylinder dreidimensional ist)
Der Zylinder scheint nur zweidimensional zu sein. Um zu beweisen, dass es zweifellos dreidimensional ist, fügen Sie der 'render'-Funktion die folgenden Codezeilen hinzu:
...
cylinder.rotation.x += 0.05;
cylinder.rotation.z += 0.05;
...
Und der fröhlich helle Zylinder würde sich zufällig unter einem dunklen, schwarzen Hintergrund drehen ...