three.js
geometrier
Sök…
Anmärkningar
Exempel fungerar från Three.js R79 (revision 79).
THREE.BoxGeometry
THREE.BoxGeometry bygger lådor som cuboids och kuber.
kuber
Kuber skapade med THREE.BoxGeometry skulle använda samma längd för alla sidor.
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();
Lägg märke till "render" -funktionen. Detta gör kuben 60 gånger per sekund.
Full kod (med 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
Linjen var geometry = new THREE.BoxGeometry( 1, 1, 1 ); ger oss en kub. För att skapa en cuboid, ändra bara parametrarna - de definierar kubens längd, höjd och djup.
Exempel:
...
//Longer cuboid
var geometry = new THREE.BoxGeometry( 2, 1, 1 );
...
Mer (att bevisa att kuben är tredimensionell)
Kuben kan tyckas vara bara en kvadrat. För att bevisa att det utan tvekan är tredimensionellt, lägg till följande kodrader till 'render' -funktionen:
...
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
...
Och se när den glada kuben snurrar runt ... och runt ... och runt ...
Färgrik
Inte för svaghjärtade ...
Den enhetliga färgen för hela kuben är ... grön. Tråkig. För att göra varje ansikte till en annan färg måste vi gräva till geometriets ansikten.
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);
OBS! Metoden för färgning av ansikten är inte den bästa metoden, men den fungerar bra (tillräckligt).
anteckningar
Var är canvas i HTML-dokumentets kropp?
Det finns inget behov av att lägga till en canvas manuellt. Följande tre rader
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
skapa renderaren, dess canvas och lägg till canvas till DOM.
THREE.CylinderGeometry
THREE.CylinderGeometry bygger cylindrar.
Cylinder
Fortsätter från föregående exempel kan koden för att skapa rutan ersättas med nedan.
//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 );
För att bygga från grunden, här är koden.
//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();
Mer (bevisar att cylindern är tredimensionell)
Cylindern kan tyckas vara ... tvådimensionell. För att bevisa att det utan tvekan är tredimensionellt, lägg till följande kodrader till 'render' -funktionen:
...
cylinder.rotation.x += 0.05;
cylinder.rotation.z += 0.05;
...
Och den lyckliga ljusa cylindern skulle snurra slumpmässigt, mitt i en mörk, svart bakgrund ...