javascript
/
three.js
огледало од https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495
							<!doctype html>
<html lang="en">
    <head>
        <title>three.js webgl - glTF</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #EEF;
                margin: 0px;
                overflow: hidden;
            }
            
            #info {
				color: #fff;
                position: absolute;
                top: 10px;
                width: 100%;
                text-align: center;
                z-index: 100;
                display:block;
            }
            
            #container {
            	position: absolute;
            	top: 0px;
            	width:100%;
            	height:100%;
            	z-index: -1;
            }
            
            #controls {
            	position:absolute;
            	width:250px;
            	bottom:0%;
            	right:0%;
            	height:100px;
            	background-color:White;
            	opacity:.9;
            	font: 13px/1.231 "Lucida Grande", Lucida, Verdana, sans-serif;
            }

            #status {
            	position:absolute;
            	width:25%;
            	left:2%;
            	top:95%;
            	height:5%;
            	opacity:.9;
            	font: 13px/1.231 "Lucida Grande", Lucida, Verdana, sans-serif;
            }
            
            .control {
            	position:absolute;
            	margin-left:12px;
            	width:100%;
            	font-weight:bold;
            }
                        
            .controlValue {
            	position:absolute;
            	left:36%;
            	top:0%;
            }
            
            #scenes_control {
            	position:absolute;
            	top:8px;
            }

            #cameras_control {
            	position:absolute;
            	top:40px;
            }

            #animations_control {
            	position:absolute;
            	top:72px;
            }

            #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
        </style>
    </head>

    <body>
        <div id="info">
			<a href="http://threejs.org" target="_blank">three.js</a> - 
			<a href="http://gltf.gl/" target="_blank">glTF</a> loader - 
			<br></br>
			monster by <a href="http://www.3drt.com/downloads.htm" target="_blank">3drt</a> -
			COLLADA duck by Sony
        </div>
		<div id="container">
		</div>
		<div id="status">
		</div>
		<div id="controls">
			<div class="control" id="scenes_control">
				Model
				<select class="controlValue" id="scenes_list" size="1" onchange="selectScene();" ondblclick="selectScene();">
				</select>
			</div>
			
			<div class="control" id="cameras_control">
				Camera
				<select class="controlValue" id="cameras_list" size="1" onchange="selectCamera();" ondblclick="selectCamera();">
				</select>
			</div>
			<div class="control" id="animations_control">
				Animations
				<div class="controlValue"><input type="checkbox" checked onclick="toggleAnimations();">Play</input></div>
			</div>
		</div>
        <script src="../build/three.min.js"></script>
        <script src="js/controls/OrbitControls.js"></script>
        <script src="js/loaders/gltf/glTF-parser.js"></script>
        <script src="js/loaders/gltf/glTFLoader.js"></script>
        <script src="js/loaders/gltf/glTFLoaderUtils.js"></script>
        <script src="js/loaders/gltf/glTFAnimation.js"></script>

        <script>
        	var orbitControls = null;
            var container, camera, scene, renderer, loader;

            var cameraIndex = 0;
			var cameras = [];
			var cameraNames = [];
			var defaultCamera = null;
			var gltf = null;
			
			function onload() {

				window.addEventListener( 'resize', onWindowResize, false );
            	document.addEventListener( 'keypress', 
            			function(e) { onKeyPress(e); }, false );

                buildSceneList();
                switchScene(0);
                animate();

            }

            function initScene(index) {
                container = document.getElementById( 'container' );

                scene = new THREE.Scene();

                defaultCamera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 20000 );
                
                //defaultCamera.up = new THREE.Vector3( 0, 1, 0 );
                scene.add( defaultCamera );
                camera = defaultCamera;

                var sceneInfo = sceneList[index];

                var spot1 = null;
                if (sceneInfo.addLights) {
                    
                    var ambient = new THREE.AmbientLight( 0x888888 );
                    scene.add( ambient );

                	var directionalLight = new THREE.DirectionalLight( 0xdddddd );
                	directionalLight.position.set( 0, -1, 1 ).normalize();
                	scene.add( directionalLight );
                
	                spot1   = new THREE.SpotLight( 0xffffff, 1 );
	                spot1.position.set( -100, 200, 100 );
	                spot1.target.position.set( 0, 0, 0 );

	                if (sceneInfo.shadows) {
		                
		                spot1.shadowCameraNear      = 1;
		                spot1.shadowCameraFar      = 1024;
		                spot1.castShadow            = true;
		                spot1.shadowDarkness        = 0.3;
		                spot1.shadowBias = 0.0001;
		                spot1.shadowMapWidth = 2048;
		                spot1.shadowMapHeight = 2048;
	                }
	                scene.add( spot1 );
                }
				
                // RENDERER

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

                if (sceneInfo.shadows) {
	                renderer.shadowMapEnabled = true;
	                renderer.shadowMapSoft = true;
	        		renderer.shadowMapType = THREE.PCFSoftShadowMap;
                }
                				
                container.appendChild( renderer.domElement );

                var ground = null;
				if (sceneInfo.addGround) {
	                var groundMaterial = new THREE.MeshPhongMaterial({
	                        color: 0xFFFFFF,
	                        shading: THREE.SmoothShading,
	                    });
	                ground = new THREE.Mesh( new THREE.PlaneBufferGeometry(1024, 1024), groundMaterial);

	                if (sceneInfo.shadows) {
		                ground.receiveShadow = true;
	                }

	                if (sceneInfo.groundPos) {
		                ground.position.copy(sceneInfo.groundPos);
	                }
	                else {
		                ground.position.z = -70;
	                }
	                ground.rotation.x = -Math.PI / 2;
	                
	                scene.add(ground);
				}
				
                loader = new THREE.glTFLoader;

                var loadStartTime = Date.now();
                var status = document.getElementById("status");
                status.innerHTML = "Loading...";
                loader.load( sceneInfo.url, function(data) {

                	gltf = data;
                	
                	var object = gltf.scene;
                	
                    var loadEndTime = Date.now();

                    var loadTime = (loadEndTime - loadStartTime) / 1000;

                    status.innerHTML = "Load time: " + loadTime.toFixed(2) + " seconds.";
                    
                	if (sceneInfo.cameraPos)
                        defaultCamera.position.copy(sceneInfo.cameraPos);

                	if (sceneInfo.center) {
                        orbitControls.center.copy(sceneInfo.center);
                	}
                    
                    if (sceneInfo.objectPosition) {
                        object.position.copy(sceneInfo.objectPosition);

                        if (spot1) {
	    	                spot1.position.set(sceneInfo.objectPosition.x - 100, sceneInfo.objectPosition.y + 200, sceneInfo.objectPosition.z - 100 );
    	                	spot1.target.position.copy(sceneInfo.objectPosition);
                        }
                    }
                    
                    if (sceneInfo.objectRotation)
                        object.rotation.copy(sceneInfo.objectRotation);

                    if (sceneInfo.objectScale)
                        object.scale.copy(sceneInfo.objectScale);

                    cameraIndex = 0;
                    cameras = [];
                    cameraNames = [];
                    if (gltf.cameras && gltf.cameras.length)
                    {
                        var i, len = gltf.cameras.length;
                        for (i = 0; i < len; i++)
                        {
                            var addCamera = true;
                            var cameraName = gltf.cameras[i].parent.name;
                            if (sceneInfo.cameras && !(cameraName in sceneInfo.cameras)) {
                                    addCamera = false;
                            }

                            if (addCamera) {
                            	cameraNames.push(cameraName);
                            	cameras.push(gltf.cameras[i]);
                            }
                        }

                        updateCamerasList();
                        switchCamera(1);
                    }
                    else
                    {
                        updateCamerasList();
                        switchCamera(0);
                    }

    				if (gltf.animations && gltf.animations.length) {
    					var i, len = gltf.animations.length;
	    				for (i = 0; i < len; i++) {
	    					var animation = gltf.animations[i];
	    					animation.loop = true;
	    					// There's .3333 seconds junk at the tail of the Monster animation that
	    					// keeps it from looping cleanly. Clip it at 3 seconds
	    					if (sceneInfo.animationTime)
		    					animation.duration = sceneInfo.animationTime;
    						animation.play();
	    				}
    				}
                                       
                    scene.add( object );
                    onWindowResize();

                });

        		orbitControls = new THREE.OrbitControls(defaultCamera, renderer.domElement);
            }

			function onWindowResize() {

				defaultCamera.aspect = container.offsetWidth / container.offsetHeight;
				defaultCamera.updateProjectionMatrix();
				
				var i, len = cameras.length;
				for (i = 0; i < len; i++) // just do it for default
				{
					cameras[i].aspect = container.offsetWidth / container.offsetHeight;
					cameras[i].updateProjectionMatrix();
				}
				
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

            function animate() {
                requestAnimationFrame( animate );
                THREE.glTFAnimator.update();
                if (cameraIndex == 0)
                    orbitControls.update();
                render();
            }

            function render() {

                renderer.render( scene, camera );
            }

            
			
			function onKeyPress(event) {
				var chr = String.fromCharCode(event.keyCode);
				if (chr == ' ')
				{
					index = cameraIndex + 1;
					if (index > cameras.length)
						index = 0;
					switchCamera(index);
				}
				else {
					var index = parseInt(chr);
					if (!isNaN(index)  && (index <= cameras.length)) {
						switchCamera(index);
					}
				}
			}

			var sceneList = 
				[
		             { name : "Monster", url : "./models/gltf/monster/monster.json", 
			                 cameraPos: new THREE.Vector3(30, 10, 70), 
			                 objectScale: new THREE.Vector3(0.01, 0.01, 0.01),
			                 objectPosition: new THREE.Vector3(0, 1, 0),
			                 objectRotation: new THREE.Euler(-Math.PI / 2, 0, -Math.PI / 2),
			                 animationTime: 3,
			                 addLights:true,
			                 shadows:true,
			                 addGround:true },
	                 { name : "Duck", url : "./models/gltf/duck/duck.json", 
		                 cameraPos: new THREE.Vector3(0, 30, -50),
		                 objectScale: new THREE.Vector3(0.1, 0.1, 0.1),
		                 addLights:true,
		                 addGround:true,
		                 shadows:true },
     			];

			function buildSceneList()
			{
				var elt = document.getElementById('scenes_list');
				while( elt.hasChildNodes() ){
				    elt.removeChild(elt.lastChild);
				}

				var i, len = sceneList.length;
				for (i = 0; i < len; i++)
				{
					option = document.createElement("option");
					option.text=sceneList[i].name;
					elt.add(option);
				}		
			}
			
			function switchScene(index)
			{
				cleanup();
				initScene(index);
				var elt = document.getElementById('scenes_list');
				elt.selectedIndex = index;
			}

			function selectScene()
			{
			    var select = document.getElementById("scenes_list");
			    var index = select.selectedIndex;
				if (index >= 0)
				{
					switchScene(index);
				}
			}
			
			function switchCamera(index)
			{
				cameraIndex = index;
				
				if (cameraIndex == 0) {
					camera = defaultCamera;
				}
				if (cameraIndex >= 1 && cameraIndex <= cameras.length) {
					camera = cameras[cameraIndex - 1];
				}

				var elt = document.getElementById('cameras_list');
				elt.selectedIndex = cameraIndex;				
			}
					
			function updateCamerasList() {
				var elt = document.getElementById('cameras_list');
				while( elt.hasChildNodes() ){
				    elt.removeChild(elt.lastChild);
				}

				option = document.createElement("option");
				option.text="[default]";
				elt.add(option);
				
				var i, len = cameraNames.length;
				for (i = 0; i < len; i++)
				{
					option = document.createElement("option");
					option.text=cameraNames[i];
					elt.add(option);
				}		
			}
			
			function selectCamera() {
			    var select = document.getElementById("cameras_list");
			    var index = select.selectedIndex;
				if (index >= 0)
				{
					switchCamera(index);
				}
			}

			function toggleAnimations() {
				var i, len = gltf.animations.length;
				for (i = 0; i < len; i++) {
					var animation = gltf.animations[i];
					if (animation.running) {
						animation.stop();
					}
					else {
						animation.play();
					}
				}
			}

			function cleanup() {

				if (container && renderer)
				{
					container.removeChild(renderer.domElement);
				}

				cameraIndex = 0;
				cameras = [];
				cameraNames = [];
				defaultCamera = null;
				
				if (!loader || !gltf.animations)
					return;
				
				var i, len = gltf.animations.length;
				for (i = 0; i < len; i++) {
					var animation = gltf.animations[i];
					if (animation.running) {
						animation.stop();
					}
				}
			}
			
            onload();
        </script>

    </body>
</html>