Преглед на файлове

Sprites overlay example fixed using OrthographicCamera

fernandojsg преди 11 години
родител
ревизия
8f874092bd
променени са 1 файла, в които са добавени 22 реда и са изтрити 13 реда
  1. 22 13
      examples/webgl_sprites.html

+ 22 - 13
examples/webgl_sprites.html

@@ -24,7 +24,7 @@
 
 			var stats;
 
-			var camera, scene, renderer;
+			var camera, cameraOverlays, scene, sceneOverlays, renderer;
 
 			var mapC;
 
@@ -35,10 +35,13 @@
 
 			function init() {
 
+				cameraOverlays = new THREE.OrthographicCamera( 0,window.innerWidth, window.innerHeight, 0, -10,10);
+				
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2100 );
 				camera.position.z = 1500;
 
 				scene = new THREE.Scene();
+				sceneOverlays = new THREE.Scene();
 
 				scene.fog = new THREE.Fog( 0x000000, 1500, 2100 );
 
@@ -88,34 +91,35 @@
 				scene.add( group );
 
 				// add 2d-sprites
-
 				var createHUDSprites = function() {
 
 					var scaleX = mapA.image.width;
 					var scaleY = mapA.image.height;
-
+										
 					var materialA1 = new THREE.SpriteMaterial( { map: mapA, opacity: 0.25 } );
 					var materialA2 = new THREE.SpriteMaterial( { map: mapA, opacity: 0.5 } );
 					var materialA3 = new THREE.SpriteMaterial( { map: mapA, opacity: 1 } );
 
-					/*
-
+					// Simulating deprecated option "alignment: THREE.SpriteAlignment.topLeft"
+					var x=100+scaleX/2;
+					var y=window.innerHeight-100-scaleY/2;
+					
 					sprite = new THREE.Sprite( materialA1 );
-					sprite.position.set( 100, 100, 0 );
+					sprite.position.set( x, y, 1 );
 					sprite.scale.set( scaleX, scaleY, 1 );
-					scene.add( sprite );
+					sceneOverlays.add( sprite );
 
 					sprite = new THREE.Sprite( materialA2 );
-					sprite.position.set( 150, 150, 2 );
+					sprite.position.set( x+50, y-50, 2 );
 					sprite.scale.set( scaleX, scaleY, 1 );
-					scene.add( sprite );
+					sceneOverlays.add( sprite );
 
 					sprite = new THREE.Sprite( materialA3 );
-					sprite.position.set( 200, 200, 3 );
+					sprite.position.set( x+100, y-100, 3 );
 					sprite.scale.set( scaleX, scaleY, 1 );
-					scene.add( sprite );
+					sceneOverlays.add( sprite );
+					
 					
-					*/
 
 				}
 
@@ -124,8 +128,10 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setClearColor( 0x000000, 1 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.autoClear = false; // To allow render overlay on top of sprited sphere
+				
 				document.body.appendChild( renderer.domElement );
-
+				
 				// stats
 
 				stats = new Stats();
@@ -143,6 +149,8 @@
 			function onWindowResize() {
 
 				camera.aspect = window.innerWidth / window.innerHeight;
+				cameraOverlays = new THREE.OrthographicCamera( 0,window.innerWidth, window.innerHeight, 0, -10,10);
+				
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -196,6 +204,7 @@
 				time += 0.02;
 
 				renderer.render( scene, camera );
+				renderer.render( sceneOverlays, cameraOverlays );
 
 			}