javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486
							<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>three.js canvas/webgl - geometry - text</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
		<style type="text/css">
			body {
				font-family: Monospace;
				background-color: #000000;
                /*f0f0f0*/
				margin: 0px;
				overflow: hidden;
			}
			
			#info {
				position: absolute;
				top: 10px; 
				width: 100%;
				padding: 5px;
				text-align: center;
				color: white;
			}
			
		</style>
	</head>
	<body>
			<div id="info">
				Drag to spin the text
				<br/>Simple Dynamic 3D Text WebGL Example by <a href="http://www.lab4games.net/zz85/blog">zz85</a>
			</div>
			
			
<!--
        <script type="text/javascript" src="http://mrdoob.github.com/three.js/build/Three.js"></script>

-->
		<script type="text/javascript" src="../build/Three.js"></script>
		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
		<script type="text/javascript" src="js/Stats.js"></script>
       
     
		<link href="js/gui/gui.css" media="screen" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/gui/gui.min.js"></script>
		 <script type="text/javascript" src="../src/extras/geometries/Text.js"></script> 
            <!--  
        
         http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/dejavu_serif-normal-normal.js
  optimer-normal-normal.js
  gentilis-normal-normal
  http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/helvetiker-normal-normal.js
	http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/dejavu_sans-normal-normal.js

	http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/optimer-normal-normal.js
	http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/gentilis-normal-normal.js
	optimer-bold-normal
  -->
	<script type="text/javascript" src="http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/gentilis-normal-normal.js"></script>

        	<script type="text/javascript" src="js/helvetiker-normal-normal.js"></script>
		<script type="text/javascript">

			var container, stats;

			var camera, scene, renderer;

			var text, plane;

			var targetRotation = 0;
			var targetRotationOnMouseDown = 0;

			var mouseX = 0;
			var mouseXOnMouseDown = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
			var mouseY = 0;
			var materials;
			
			init();
			animate();

			function init() {
                //ThreeFont.face = 'optimer';
				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
				
				var originalCamPos = new THREE.Vector3(0,150,500);
				camera.position = originalCamPos;
				//camera.position.z = 500;
				//camera.target.position.y = 150;

				scene = new THREE.Scene();

                //THREE.FontUtils.weight = "bold";
                
				// Materials
				
				var materials = [];

				for ( var i = 0; i < 6; i ++ ) {

					materials.push( [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff , wireframe:false} ) ] );

				}

				var generatedTexture = new THREE.Texture( generateTexture() );
				generatedTexture.needsUpdate = true;
 
				//var 
				materials = [];
				materials.push( new THREE.MeshLambertMaterial( { map: generatedTexture } ) );
				materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading } ) );
				materials.push( new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ) );
				materials.push( new THREE.MeshNormalMaterial( ) );
				materials.push( new THREE.MeshBasicMaterial( { color: 0x665500, blending: THREE.AdditiveBlending } ) );
				materials.push( new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.SubtractiveBlending } ) );
 
				materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.SmoothShading } ) );
				materials.push( new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading } ) );
				materials.push( new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } ) );
				materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ) );
 
				materials.push( new THREE.MeshDepthMaterial() );
				materials.push( new THREE.MeshBasicMaterial( { map: generatedTexture } ) );
                
                
			function generateTexture() {
 
				var canvas = document.createElement( 'canvas' );
				canvas.width = 256;
				canvas.height = 256;
 
				var context = canvas.getContext( '2d' );
				var image = context.getImageData( 0, 0, 256, 256 );
 
				var x = 0, y = 0;
 
				for ( var i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
 
					x = j % 256;
					y = x == 0 ? y + 1 : y;
 
					image.data[ i + 2 ] = Math.floor( x ^ y );
					image.data[ i + 3 ] = 255;
 
				}
 
				context.putImageData( image, 0, 0 );
 
				return canvas;
 
			}
 
                var theText = "B"; //Hello three.js :)
                 var hash = document.location.hash.substr(1);
                  if (hash.length === 0) {
                    
                  } else {
                   theText = hash;
                  }
                
				textParams = {
						size: 80, 
						height:40,
						curveSegments:2,
						font: "gentilis" //gentilis helvetiker
					};
				
				//var
				   text3d = new THREE.Text(theText, textParams);//dejavu sans
					
                //MEsh Normal MeshBasic
                //MeshPhongMaterial MeshLambertMaterial MeshPhongMaterial
                // new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff, wireframe:false} )
				//text = new THREE.Mesh( text3d, materials[6] );  materials[3]
                //new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff, wireframe:false } )
                
                // Math.random() *
//0xf0f0f0
	
	/*
	*  color: <hex>,
	 *  ambient: <hex>,
	 *  specular: <hex>,
	 *  shininess: <float>,2
	 *  opacity: <float>,
	*/
                var textMaterial = new THREE.MeshPhongMaterial( { color: 0xa0a0a0, wireframe:false, opacity:1,shininess:100,ambient:0xff0000 , specular:0x00ff00,reflectivity:100});
				textMaterial = materials[2];

                text = new THREE.Mesh( text3d, textMaterial);
                
                text.overdraw = true;
                text.doubleSided = false;
                text.position.y = 15;
                
                text.position.z = 0;
                text.rotation.x = 0*Math.PI;
                text.rotation.y = Math.PI*2;
                
				text.overdraw = false;
				scene.addObject( text );
                //scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
                
                
				ambientLight = new THREE.AmbientLight( 0xffffff ) ;
				scene.addLight(ambientLight );
                
                pointLight = new THREE.PointLight( 0xffffff, 1 );
 
                pointLight.position.x = 0;
                pointLight.position.y = 150;
                pointLight.position.z = 450;
				
                
				scene.addLight( pointLight );
                //Math.random() *
                
                 directionalLight = new THREE.DirectionalLight(  0xffffff );
				/*
                directionalLight.position.x = Math.random() - 0.5;
				directionalLight.position.y = Math.random() - 0.5;
				directionalLight.position.z = Math.random() - 0.5;
				*/
                directionalLight.position.x = 50;
                directionalLight.position.y = 50;
                directionalLight.position.z = 50;
                
                directionalLight.position.normalize();
                directionalLight.lookAt(text);
				directionalLight.castShadow = true;
				//intensity, distance, castShadow
                
				scene.addLight( directionalLight );
                
                //0x202020

				// Plane
                // ,reflectivity:1,refractionRatio:0
                //, shading:THREE.FlatShading
                //new THREE.MeshBasicMaterial( { color: 0xe0e0e0, wireframe:false} )
//new THREE.MeshPhongMaterial( { color: 0xf0f0f0, wireframe:false,shininess:100})
                
				plane = new THREE.Mesh( new THREE.Plane( 800, 800 ), textMaterial );
				plane.rotation.x = - 90 * ( Math.PI / 180 );
                plane.position.x = 0;
				plane.overdraw = true;
                
                
				scene.addObject( plane );

                renderer = new THREE.WebGLRenderer({antialias:true});
    			renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild( renderer.domElement );

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild( stats.domElement );


				//mousedown
				document.addEventListener( 'mousemove', onDocumentMouseDown, false );
				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
				
				
				var effectController  = {

					focus: 		1.0,
					aperture:	0.025,
					maxblur:	1.0,
					ambientLightColor: 0.5,
					directionLightX: 1,
					directionLightY: 1,
					directionLightZ: 1,
					pointLightX: 0,
					pointLightY: 1,
					pointLightZ: 1,
					pointLightDistance: 0,
					pointLightIntensity:-1,
					text: theText,
					wireframe: false

				};
				
				var textChanger = function() {
					console.log(effectController.text);
	
					/*
					text3d.set(effectController.text);
					
					text3d.__dirtyVertices = true;
					text3d.__dirtyNormals = true;
					text3d.__dirtyColors = true;
					text3d.__dirtyElements = true;
					text3d.__dirtyMorphTargets = true;
					text3d.__dirtyNormals = true;
					text3d.__dirtyTangents = true;
					text3d.__dirtyUvs = true;
					text3d.__dirtyVertices = true;
					renderer.clear();
					
					text.matrixAutoUpdate = true;
					text.updateMatrix();
					*/
					
					scene.removeChild(text);
					 text3d = new THREE.Text(effectController.text, textParams);
					text = new THREE.Mesh( text3d, textMaterial)
					scene.addChild(text);
					
				}

				var matChanger = function( ) {

					//postprocessing.bokeh_uniforms["focus"].value = effectController.focus;
					//postprocessing.bokeh_uniforms["aperture"].value = effectController.aperture;
					//postprocessing.bokeh_uniforms["maxblur"].value = effectController.maxblur;\
					
					
					ambientLight.color.setHex(effectController.ambientLightColor*0xffffff);
					directionalLight.position.x = 50 * effectController.directionLightX;
	                directionalLight.position.y = 50 * effectController.directionLightY;
	                directionalLight.position.z = 50 * effectController.directionLightZ;
					pointLight.position.x = 500 * effectController.pointLightX;
	                pointLight.position.y = 500 * effectController.pointLightY;
	                pointLight.position.z = 500 * effectController.pointLightZ;
					pointLight.distance = effectController.pointLightDistance ;
					pointLight.intensity = effectController.pointLightIntensity ;
				};

				var gui = new GUI();
				//gui.add( effectController, "focus", 0.0, 3.0, 0.025 ).onChange( matChanger );
				//gui.add( effectController, "aperture", 0.001, 0.2, 0.001 ).onChange( matChanger );
				//gui.add( effectController, "maxblur", 0.0, 3.0, 0.025 ).onChange( matChanger );
				gui.add( effectController, "text").onChange( textChanger );
				gui.add( effectController, "wireframe");
				gui.add( effectController, "ambientLightColor", 0.0, 1.0, 0.025 ).onChange( matChanger );
				gui.add( effectController, "directionLightX", -1, 1.0, 0.025 ).onChange( matChanger );
				gui.add( effectController, "directionLightY", -1, 1.0, 0.025 ).onChange( matChanger );
				gui.add( effectController, "directionLightZ", -1, 1.0, 0.025 ).onChange( matChanger );
				gui.add( effectController, "pointLightX", -1, 1.0, 0.025 ).onChange( matChanger );
				gui.add( effectController, "pointLightY", -1, 1.0, 0.025 ).onChange( matChanger );
				gui.add( effectController, "pointLightZ", -1, 1.0, 0.025 ).onChange( matChanger );
				gui.add( effectController, "pointLightDistance", -1, 1000, 0.5).onChange( matChanger );
				gui.add( effectController, "pointLightIntensity", -1, 1.0, 0.025 ).onChange( matChanger );
				gui.show();
				matChanger();
			}

			//

			function onDocumentMouseDown( event ) {

				event.preventDefault();

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
				document.addEventListener( 'mouseout', onDocumentMouseOut, false );

				mouseXOnMouseDown = event.clientX - windowHalfX;
				targetRotationOnMouseDown = targetRotation;
			}

			function onDocumentMouseMove( event ) {

				mouseX = event.clientX - windowHalfX;
				mouseY = event.clientY - windowHalfY;

				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
			}

			function onDocumentMouseUp( event ) {

				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			}

			function onDocumentMouseOut( event ) {

				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			}

			function onDocumentTouchStart( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
					targetRotationOnMouseDown = targetRotation;

				}
			}

			function onDocumentTouchMove( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

				}
			}

			//

			function animate() {

				requestAnimationFrame( animate );

				render();
				stats.update();

			}

			function render() {
				
				//console.log("targetRotation",targetRotation,text.rotation.y );

				//plane.rotation.z = 
				//text.rotation.y += ( targetRotation - text.rotation.y ) * 0.05;
				
				//camera.position.x += ( mouseX - camera.position.x ) * 0.05;
				//camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
				//camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
				//camera.position.z;
				
				//camera.useTarget = false;
				//camera.rotation.z += ( targetRotation - camera.rotation.z ) * 0.05;
				//camera.rotation.y += ( targetRotation - camera.rotation.y ) * 0.05;
				//renderer.clear();
				
				camera.position.x = Math.cos(
				(mouseX - windowHalfX)/windowHalfX * Math.PI + Math.PI/2
				) * 500 + camera.target.position.x;
				
				camera.position.z = -Math.sin(
				(mouseX - windowHalfX)/windowHalfX * Math.PI + Math.PI/2
				) * 500;
				
				// + camera.target.position.z + Math.sin(
				//(mouseY - windowHalfY)/windowHalfY * Math.PI + Math.PI/2
				//) * 500
				
				/*
				camera.position.y = Math.cos(
				(mouseY - windowHalfY)/windowHalfY * Math.PI + Math.PI/2
				) * 500 + camera.target.position.y;
				*/
				camera.position.y = (windowHalfY - mouseY)/windowHalfY *200 + camera.target.position.y;
				//	
				
				renderer.render( scene, camera );
				
				// Camera movement
				// Camera rotation
				// Text angle
				// Text rotation
				// Keydowns
				// Settings
				// Materials
			}

		</script>
        <script>
        var _gaq=[["_setAccount","UA-7549263-1"],["_trackPageview"]]; 
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
        g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
        s.parentNode.insertBefore(g,s)}(document,"script"));
        </script>

	</body>
</html>