Startseite Erkunden Hilfe
Anmelden
javascript
/
three.js
Mirror von https://github.com/tazdij/three.js.git
2
0
Fork 0
Dateien Issues 0 Wiki
Quellcode durchsuchen

RaytracingRenderer: Added basic shadows.

Mr.doob vor 11 Jahren
Ursprung
16ee65ef48
Commit
7c25550d10
2 geänderte Dateien mit 54 neuen und 41 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 46 9
      examples/js/renderers/RaytracingRenderer.js
  2. 8 32
      examples/raytracer_sandbox.html

+ 46 - 9
examples/js/renderers/RaytracingRenderer.js
Datei anzeigen 

@@ -18,8 +18,7 @@ THREE.RaytracingRenderer = function ( parameters ) {
 
 
 	var clearColor = new THREE.Color( 0x000000 );
 
 
-	var blockX = 0;
 
-	var blockY = 0;
 
+	var blockX, blockY;
 
 	var blockSize = 64;
 
 
 	var canvasBlock = document.createElement( 'canvas' );
 
@@ -33,15 +32,16 @@ THREE.RaytracingRenderer = function ( parameters ) {
 
 	var imagedata = contextBlock.getImageData( 0, 0, blockSize, blockSize );
 
 	var data = imagedata.data;
 
 
-	var viewMatrix = new THREE.Matrix4();
 
-	var viewProjectionMatrix = new THREE.Matrix4();
 
+	var color = new THREE.Color();
 
 
 	var origin = new THREE.Vector3();
 
 	var direction = new THREE.Vector3();
 
 
 	var raycaster = new THREE.Raycaster( origin, direction );
 
+	var raycasterLight = new THREE.Raycaster();
 
 
 	var objects;
 
+	var lights = [];
 
 
 	this.domElement = canvas;
 
 
@@ -99,19 +99,39 @@ THREE.RaytracingRenderer = function ( parameters ) {
 
 
 					var intersection = intersections[ 0 ];
 
 
+					var point = intersection.point;
 
 					var object = intersection.object;
 
 					var material = object.material;
 
-					var face = intersection.face;
 
-
 
-					var color;
 
 
 					if ( material.vertexColors === THREE.NoColors ) {
 
 
-						color = material.color;
 
+						color.copy( material.color );
 
 
 					} else if ( material.vertexColors === THREE.FaceColors ) {
 
 
-						color = face.color;
 
+						color.copy( intersection.face.color );
 
+
 
+					}
 
+
 
+					if ( lights.length > 0 ) {
 
+
 
+						raycasterLight.ray.origin.copy( point );
 
+
 
+						for ( var i = 0, l = lights.length; i < l; i ++ ) {
 
+
 
+							var light = lights[ i ];
 
+
 
+							raycasterLight.ray.direction.copy( light.position ).sub( point ).normalize();
 
+
 
+							var intersections = raycasterLight.intersectObjects( objects, true );
 
+
 
+							if ( intersections.length > 0 ) {
 
+
 
+								color.multiplyScalar( 0.25 );
 
+
 
+							}
 
+
 
+						}
 
 
 					}
 
 
@@ -150,10 +170,27 @@ THREE.RaytracingRenderer = function ( parameters ) {
 
 
 		if ( this.autoClear === true ) this.clear();
 
 
+		blockX = 0;
 
+		blockY = 0;
 
+
 
 		origin.copy( camera.position );
 
 
 		objects = scene.children;
 
 
+		// collect lights
 
+
 
+		lights.length = 0;
 
+
 
+		scene.traverse( function ( object ) {
 
+
 
+			if ( object instanceof THREE.Light ) {
 
+
 
+				lights.push( object );
 
+
 
+			}
 
+
 
+		} )
 
+
 
 		renderBlock();
 
 
 	}

+ 8 - 32
examples/raytracer_sandbox.html
Datei anzeigen 

@@ -16,8 +16,6 @@
 
 	<body>
 
 
 		<script src="../build/three.min.js"></script>
 
-
 
-		<script src="js/controls/TrackballControls.js"></script>
 
 		<script src="js/renderers/RaytracingRenderer.js"></script>
 
 
 		<script>
 
@@ -28,8 +26,6 @@
 
 
 			var torus, cube;
 
 
-			var start = Date.now();
 
-
 
 			init();
 
 			render();
 
 
@@ -49,8 +45,6 @@
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				camera.position.z = 600;
 
 
-				controls = new THREE.TrackballControls( camera );
 
-
 
 				scene = new THREE.Scene();
 
 
 				var geometry = new THREE.TorusKnotGeometry( 150 );
 
@@ -77,42 +71,24 @@
 
 				cube = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, vertexColors: THREE.FaceColors } ) );
 
 				scene.add( cube );
 
 
+				var light = new THREE.PointLight( 0xffffff );
 
+				light.position.set( 300, 300, 300 );
 
+				scene.add( light );
 
+
 
+				var light = new THREE.PointLight( 0xffffff );
 
+				light.position.set( - 300, - 300, 300 );
 
+				scene.add( light );
 
+
 
 				renderer = new THREE.RaytracingRenderer();
 
 				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 				container.appendChild( renderer.domElement );
 
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
 			}
 
 
-			//
 
-
 
 			function render() {
 
 
-				var timer = Date.now() - start;
 
-
 
-				torus.position.y = Math.sin( timer * 0.002 ) * 150;
 
-				torus.rotation.x = timer * 0.0003;
 
-				torus.rotation.z = timer * 0.0002;
 
-
 
-				cube.rotation.x = timer * 0.0002;
 
-				cube.rotation.z = timer * 0.0003;
 
-
 
-				controls.update();
 
-
 
 				renderer.render( scene, camera );
 
 
 			}