Erstes three.js Beispiel

Erstes three.js Beispiel

Hey,

also ich hatte heute einmal kurz Zeit mir den Tutorial-Code von threejs.org zum Erstellen einer simplen Szene ansehen und ich habe den ziemlich genau übernommen in meinem Beispiel hier unten.

Erstes Beispiel einer simplen Szene

Und nun zu dem Code

Die einzigen Änderungen zum Code der Documentation sind eine leicht andere Rotation des Würfels, sowie eine kleine Änderung der Farbe des Würfels und des Hintergrundes.

Da der Code sehr kurz ist, werde ich ihn zur Gänze hier posten, in zukünftigen Posts werde ich dann aber nur mehr die neuen Funktionen und wichtigen Teile hier posten.

<html>
	<head>
		<title>My first three.js app</title>

		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>

		<script src="https://ajax.googleapis.com/ajax/libs/threejs/r84/three.min.js"></script>
	</head>

	<body>
		<script>
			/// Setup of the scene and the camera
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 100 );

			/// Create a renderer and append it to the body DOM element
			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			renderer.setClearColor( 0xcccccc, 1 );
			document.body.appendChild( renderer.domElement );

			/// Create a geometric objet (cube) and a material
			var geometry = new THREE.BoxGeometry( 1, 1, 1 );
			var material = new THREE.MeshBasicMaterial( { color: 0x33ff33 } );

			/// Create a Mesh object from the geometry and the material
			var cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			/// Set the camera's distance form the origin
			camera.position.z = 5;

			/// Render function used to redraw the scene
			var render = function () {
				/// Request an animation frame for this function
				requestAnimationFrame( render );

				/// Update the rotation of the cube mesh
				cube.rotation.x += 0.03;
				cube.rotation.y += 0.01;
				cube.rotation.z += 0.005;
				
				/// Actually render the scene
				renderer.render(scene, camera);
			};

			///Start the rendering loop
			render();
		</script>
	</body>
</html>

<html>

<head>

<title>My first three.js app</title>

<style>

body { margin: 0; }

canvas { width: 100%; height: 100% }

</style>

</head>

<body>

/// Setup of the scene and the camera

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 100 );

/// Create a renderer and append it to the body DOM element

var renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

renderer.setClearColor( 0xcccccc, 1 );

document.body.appendChild( renderer.domElement );

/// Create a geometric objet (cube) and a material

var geometry = new THREE.BoxGeometry( 1, 1, 1 );

var material = new THREE.MeshBasicMaterial( { color: 0x33ff33 } );

/// Create a Mesh object from the geometry and the material

var cube = new THREE.Mesh( geometry, material );

scene.add( cube );

/// Set the camera's distance form the origin

camera.position.z = 5;

/// Render function used to redraw the scene

var render = function () {

/// Request an animation frame for this function

requestAnimationFrame( render );

/// Update the rotation of the cube mesh

cube.rotation.x += 0.03;

cube.rotation.y += 0.01;

cube.rotation.z += 0.005;

/// Actually render the scene

renderer.render(scene, camera);

};

///Start the rendering loop

render();

</script>

</body>

</html>

Der Code ist zwar kommentiert, aber ich gehe noch einmal kurz durch, denn im Endeffekt ist hier nur zu sehen, was wirklich immer vorhanden sein muss.

    /// Setup of the scene and the camera
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    /// Create a renderer and append it to the body DOM element
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor( 0x999999, 1 );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

/// Setup of the scene and the camera

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

/// Create a renderer and append it to the body DOM element

var renderer = new THREE.WebGLRenderer();

renderer.setClearColor( 0x999999, 1 );

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

Zuerst wird ein THREE Scene Objekt erstellt. Diese Szene ist sozusagen der Container für all unsere Objekte, die wir später auf dem Bildschirm darstellen wollen.

Es folgt die Definition einer Kamera. Ohne Kamera gibt klarerweise auch kein Bild und daher brauchen wir eine 🙂 . Wir erstellen eine PerspectiveCamera (es gibt auch noch andere Kameratypen), wobei wir einen field of view (also das Sichtfeld in Grad) angeben, eine aspect (Seitenverhältnis des Bildes), near (also der Minimalabstand der Kamera zu den Objekten) und far (also der Maximalabstand der Kamera zu den Objekten) angeben müssen.

Die field of view regelt dabei wie viel von der Szene man später auch sehen kann. Ein Mensch hat ca. eine field of view von 180°, wobei jedoch der Fokus-Bereich kleiner ist. Ich verwende normalerweise selten Werte, die größer als 90° sind. Der aspect gibt das Seitenverhältnis unserer Ausgabe an. Sobald sich die Größe der Ausgabe ändert, muss später auch die aspect (ratio) aktualisiert werden, um Verzerrungen zu vermeiden.

Near und far sind sehr wichtige Werte für die Kamera. Die Kamera besitzt eine gewisse Distanz zu allen Objekten der Szene. Alle Objekte, welche näher als near oder weiter weg als far positioniert sind, werden nicht auf dem Bildschirm dargestellt. Diese beiden Werte haben mit der sogenannten ProjectionMatrix zu tun und bei schlechter Wahl der Werte kann es zu Problemen wie z-Fighting etc. kommen. Am besten ist es immer, wenn alle dargestellten Objekte innerhalb des Bereiches zwischen [near…far] liegen. Die eingegebenen Werte sollen aber so eng wie möglich um die Szene herum liegen, um eine größtmögliche Genauigkeit bei den berechneten Tiefenwerte (depth) der Pixel zu gewährleisten. In diesem Beispiel habe ich die Werte nicht sehr gut an die Geometrie der Szene angepasst, das ist aber noch ok in dem Fall.

Es wird anschließend die ClearColor mittels setClearColorauf ein helles Grau gesetzt (passt besser zu meinem Theme hier 🙂 ). Die ClearColor wird verwendet, bevor das tatsächliche Zeichnen der Szene beginnt und ist sowas wie eine Hintergrundfarbe.

Mittels setSize wird eine fixe Größe der Ausgabe definiert. D.h. in diesem Beispiel, dass die Ausgabe auch nach dem Verändern der Browsergröße gleich groß bleibt. Es folgt noch das Hinzufügen des DOM-Elements des ertsellten Renderer Objektes zu der HTML-Seite.

    /// Create a geometric objet (cube) and a material
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0x33ff33 } );

    /// Create a Mesh object from the geometry and the material
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

/// Create a geometric objet (cube) and a material

var geometry = new THREE.BoxGeometry( 1, 1, 1 );

var material = new THREE.MeshBasicMaterial( { color: 0x33ff33 } );

/// Create a Mesh object from the geometry and the material

var cube = new THREE.Mesh( geometry, material );

scene.add( cube );

Die nächsten Zeilen des Codes behandeln die Erstellung unseres Würfels, welcher später am Bildschirm ausgegeben wird. Die erste Information für ein Objekt ist die Geometry des Objektes. Also wo liegen die Eckpunkte meiner Flächen, welche Punkte werden zu Flächen verbunden, etc… Zum Glück bietet Three.js einige vordefinierte Methoden zum Generieren von Geometrie-Daten, wie die hier verwendete Funktion BoxGeometry, bei welcher wir die Breite, Höhe und Länge definieren. Die zweite Information, die das zu erstellende Objekt haben muss, ist die Definition eines Materials. In unserem Fall erstellen wir ein MeshBasicMaterial mit der HEX-Farbe 0x00ff33, was ein nicht perfektes Grün ergibt.

Aus den beiden Komponenten (Geometrie und Material) wird dann ein simples Mesh Objekt erstellt und schlussendlich der Szene hinzugefügt.

    /// Set the camera's distance form the origin
    camera.position.z = 5;

1 2	/// Set the camera's distance form the origin camera.position.z = 5;

Diese Zeile ist sehr wichtig, weil ohne sie nichts zu sehen wäre. Hiermit verschieben wir die Kamera, welche standardmäßig im Koordinatenursprung sitzt, um 5 Einheiten in z-Richtung nach hinten.

    /// Render function used to redraw the scene
    var render = function () {
        /// Request an animation frame for this function
        requestAnimationFrame( render );

        /// Update the rotation of the cube mesh
        cube.rotation.x += 0.03;
        cube.rotation.y += 0.01;
        cube.rotation.z += 0.005;

        /// Actually render the scene
        renderer.render(scene, camera);
    };

    ///Start the rendering loop
    render();

/// Render function used to redraw the scene

var render = function () {

/// Request an animation frame for this function

requestAnimationFrame( render );

/// Update the rotation of the cube mesh

cube.rotation.x += 0.03;

cube.rotation.y += 0.01;

cube.rotation.z += 0.005;

/// Actually render the scene

renderer.render(scene, camera);

};

///Start the rendering loop

render();

Im letzten Teil wird eine Funktion definiert, welche zum Rendern (d.h. zum zeichnen oder darstellen) der Szene verwendet wird. Zuerst rufen wir eine JS Funktion requestAnimationFrame mit unserem Renderer als Argument auf. Dies dient dazu, dem Browser mitzuteilen, dass wir einen neuen Frame der Animation anfordern.

Weiters wird die Rotation des erstellen Würfels aktualisiert, damit man schlussendlich auch eine Animation auf dem Bildschirm wahrnehmen kann. Ohne dem Ändern dieser Werte würde sich der Würfel nur starr auf dem Bildschirm befinden (durch die immer gleiche Position und Rotation von Würfel und Kamera).

Die letzte Zeile in der Funktion rendert die Szene schlussendlich wirklich auf dem Bildschirm.

Nach der Definition der Funktion wird diese einmalig aufgerufen (allerletzte Zeile).

Ich hoffe das war erstmal alles verständlich und nicht zu schwer zu verdauen 🙂 . Meldet euch, wenn ihr über Probleme stolpert, bzw, wenn ich euch sonst irgendwie helfen kann.

Lg Franz

Erstes three.js Beispiel