three.js
geometrieën
Zoeken…
Opmerkingen
Voorbeelden werken vanaf three.js R79 (revisie 79).
THREE.BoxGeometry
THREE.BoxGeometry bouwt dozen zoals kubussen en kubussen.
Cubes
Kubussen gemaakt met THREE.BoxGeometry zouden voor alle zijden dezelfde lengte gebruiken.
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();
Let op de functie 'renderen'. Dit geeft de kubus 60 keer per seconde weer.
Volledige code (met 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>
balken
De var geometry = new THREE.BoxGeometry( 1, 1, 1 ); geeft ons een kubus. Om een kubus te maken, wijzigt u gewoon de parameters - deze bepalen respectievelijk de lengte, hoogte en diepte van de kubus.
Voorbeeld:
...
//Longer cuboid
var geometry = new THREE.BoxGeometry( 2, 1, 1 );
...
Meer (bewijzen dat de kubus driedimensionaal is)
De kubus lijkt misschien maar een vierkant te zijn. Om te bewijzen dat het zonder twijfel driedimensionaal is, voegt u de volgende coderegels toe aan de functie 'render':
...
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
...
En kijk hoe de vrolijke kubus ronddraait ... en rond ... en rond ...
Kleurrijk
Niet voor angsthazen ...
De uniforme kleur voor de hele kubus is ... groen. Saai. Om elk gezicht een andere kleur te geven, moeten we naar de gezichten van de geometrie graven.
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);
OPMERKING: De methode voor het kleuren van de gezichten is niet de beste methode, maar het werkt goed (genoeg).
Notes
Waar is het canvas in het hoofdgedeelte van het HTML-document?
Het is niet nodig om handmatig een canvas aan de body toe te voegen. De volgende drie regels
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
maak de renderer, het canvas en voeg het canvas aan de DOM.
THREE.CylinderGeometry
THREE.CylinderGeometry build cilinders.
Cilinder
In navolging van het vorige voorbeeld kan de code om het vak te maken worden vervangen door de onderstaande.
//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 );
Om helemaal opnieuw te bouwen, hier is de 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();
Meer (bewijzen dat de cilinder driedimensionaal is)
De cilinder lijkt misschien gewoon ... tweedimensionaal te zijn. Om te bewijzen dat het zonder twijfel driedimensionaal is, voegt u de volgende coderegels toe aan de functie 'render':
...
cylinder.rotation.x += 0.05;
cylinder.rotation.z += 0.05;
...
En de gelukkige heldere cilinder zou willekeurig draaien, te midden van een donkere, zwarte achtergrond ...