javascript
/
three.js
kopia lustrzana https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - teapot geometry</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 {
				color: #fff;
				font-family: Monospace;
				font-size: 13px;
				text-align: center;
				font-weight: bold;

				background-color: #000;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				position: relative;
				margin: 0 auto -2.1em;
				top: 0px;
				width: 550px;
				padding: 5px;
				z-index:100;
			}

			a { color: blue; }

			#stats #fps { background: transparent !important }
			#stats #fps #fpsText { color: #444 !important }
			#stats #fps #fpsGraph { display: none }
		</style>
	</head>
	<body>
		<div id="info">
			<a href="http://threejs.org" target="_blank">three.js</a> - the Utah Teapot from the <a href="https://www.udacity.com/course/interactive-3d-graphics--cs291">Udacity Interactive 3D Graphics course</a>
		</div>

		<script src="../build/three.min.js"></script>

		<script src="js/controls/OrbitControls.js"></script>

		<script src="js/Detector.js"></script>
		<script src="js/libs/stats.min.js"></script>

		<script src='js/libs/dat.gui.min.js'></script>

		<script src='js/geometries/TeapotGeometry.js'></script>

		<script>

			////////////////////////////////////////////////////////////////////////////////
			// Utah/Newell Teapot demo
			////////////////////////////////////////////////////////////////////////////////
			/*global THREE, requestAnimationFrame, Detector, container, Stats, dat, window */

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var camera, scene, sceneCube, renderer, stats;
			var cameraControls;
			var effectController;
			var clock = new THREE.Clock();
			var teapotSize = 400;
			var ambientLight, light;
			var skybox;

			var tess = -1;	// force initialization
			var bBottom ;
			var bLid;
			var bBody;
			var bFitLid;
			var bNonBlinn;
			var shading;
			var wireMaterial, flatGouraudMaterial, gouraudMaterial, phongMaterial, texturedMaterial, reflectiveMaterial;

			init();
			animate();

			function init() {
				container = document.createElement( 'div' );
				document.body.appendChild( container );

				var canvasWidth = window.innerWidth;
				var canvasHeight = window.innerHeight;

				// CAMERA
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
				camera.position.set( -600, 550, 1300 );

				// LIGHTS
				ambientLight = new THREE.AmbientLight( 0x333333 );	// 0.2

				light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
				// direction is set in GUI

				// RENDERER
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setSize( canvasWidth, canvasHeight );
				renderer.setClearColor( 0xAAAAAA );
				renderer.gammaInput = true;
				renderer.gammaOutput = true;
				container.appendChild( renderer.domElement );

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

				// EVENTS
				window.addEventListener( 'resize', onWindowResize, false );

				// CONTROLS
				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
				cameraControls.target.set(0, 0, 0);

				// TEXTURE MAP
				var textureMap = THREE.ImageUtils.loadTexture( 'textures/UV_Grid_Sm.jpg' );
				textureMap.wrapS = textureMap.wrapT = THREE.RepeatWrapping;
				textureMap.anisotropy = 16;

				// REFLECTION MAP
				var path = "textures/cube/skybox/";
				var urls = [path + "px.jpg", path + "nx.jpg",
							path + "py.jpg", path + "ny.jpg",
							path + "pz.jpg", path + "nz.jpg" ];

				var textureCube = THREE.ImageUtils.loadTextureCube( urls );

				// MATERIALS
				var materialColor = new THREE.Color();
				materialColor.setRGB( 1.0, 1.0, 1.0 );

				wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } ) ;

				flatGouraudMaterial = new THREE.MeshLambertMaterial( { color: materialColor, shading: THREE.FlatShading, side: THREE.DoubleSide } );

				gouraudMaterial = new THREE.MeshLambertMaterial( { color: materialColor, shading: THREE.SmoothShading, side: THREE.DoubleSide } );

				phongMaterial = new THREE.MeshPhongMaterial( { color: materialColor, shading: THREE.SmoothShading, side: THREE.DoubleSide } );

				texturedMaterial = new THREE.MeshPhongMaterial( { color: materialColor, map: textureMap, shading: THREE.SmoothShading, side: THREE.DoubleSide } );

				reflectiveMaterial = new THREE.MeshPhongMaterial( { color: materialColor, envMap: textureCube, shading: THREE.SmoothShading, side: THREE.DoubleSide } );

				// SKYBOX
				var shader = THREE.ShaderLib[ "cube" ];
				shader.uniforms[ "tCube" ].value = textureCube;

				var skyboxMaterial = new THREE.ShaderMaterial( {

					fragmentShader: shader.fragmentShader,
					vertexShader: shader.vertexShader,
					uniforms: shader.uniforms,
					depthWrite: false,
					side: THREE.BackSide

				} );

				skybox = new THREE.Mesh( new THREE.BoxGeometry( 5000, 5000, 5000 ), skyboxMaterial );

				// skybox scene - keep camera centered here
				sceneCube = new THREE.Scene();
				sceneCube.add( skybox );

				// GUI
				setupGui();

			}

			// EVENT HANDLERS

			function onWindowResize() {

				var canvasWidth = window.innerWidth;
				var canvasHeight = window.innerHeight;

				renderer.setSize( canvasWidth, canvasHeight );

				camera.aspect = canvasWidth/ canvasHeight;
				camera.updateProjectionMatrix();
			}

			function setupGui() {

				effectController = {

					shininess: 40.0,
					ka: 0.17,
					kd: 0.51,
					ks: 0.2,
					metallic: true,

					hue:		0.121,
					saturation: 0.73,
					lightness:  0.66,

					lhue:		 0.04,
					lsaturation: 0.01,	// non-zero so that fractions will be shown
					llightness:  1.0,

					// bizarrely, if you initialize these with negative numbers, the sliders
					// will not show any decimal places.
					lx: 0.32,
					ly: 0.39,
					lz: 0.7,
					newTess: 15,
					bottom: true,
					lid: true,
					body: true,
					fitLid: false,
					nonblinn: false,
					newShading: "glossy"
				};

				var h;

				var gui = new dat.GUI();

				// material (attributes)

				h = gui.addFolder( "Material control" );

				h.add( effectController, "shininess", 1.0, 400.0, 1.0 ).name("Shininess");
				h.add( effectController, "ka", 0.0, 1.0, 0.025 ).name("Ka");
				h.add( effectController, "kd", 0.0, 1.0, 0.025 ).name("Kd");
				h.add( effectController, "ks", 0.0, 1.0, 0.025 ).name("Ks");
				h.add( effectController, "metallic" );

				// material (color)

				h = gui.addFolder( "Material color" );

				h.add( effectController, "hue", 0.0, 1.0, 0.025 ).name("Hue");
				h.add( effectController, "saturation", 0.0, 1.0, 0.025 ).name("Saturation");
				h.add( effectController, "lightness", 0.0, 1.0, 0.025 ).name("Lightness");

				// light (point)

				h = gui.addFolder( "Light color" );

				h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name("Hue");
				h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name("Saturation");
				h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name("Lightness");

				// light (directional)

				h = gui.addFolder( "Light direction" );

				h.add( effectController, "lx", -1.0, 1.0, 0.025 ).name("x");
				h.add( effectController, "ly", -1.0, 1.0, 0.025 ).name("y");
				h.add( effectController, "lz", -1.0, 1.0, 0.025 ).name("z");

				h = gui.addFolder( "Tessellation control" );
				h.add(effectController, "newTess", [2,3,4,5,6,8,10,15,20,30,40,50] ).name("Tessellation Level");
				h.add(effectController, "lid").name("display lid");
				h.add(effectController, "body").name("display body");
				h.add(effectController, "bottom").name("display bottom");
				h.add(effectController, "fitLid").name("snug lid");
				h.add(effectController, "nonblinn").name("original scale");

				// shading
				h = gui.add(effectController, "newShading", ["wireframe","flat","smooth","glossy","textured","reflective"] ).name("Shading");
			}


			//

			function animate() {

				requestAnimationFrame( animate );
				render();
				stats.update();

			}

			function render() {

				var delta = clock.getDelta();

				cameraControls.update( delta );

				if ( effectController.newTess !== tess ||
					effectController.bottom !== bBottom ||
					effectController.lid !== bLid ||
					effectController.body !== bBody ||
					effectController.fitLid !== bFitLid ||
					effectController.nonblinn !== bNonBlinn ||
					effectController.newShading !== shading)
				{
					tess = effectController.newTess;
					bBottom = effectController.bottom;
					bLid = effectController.lid;
					bBody = effectController.body;
					bFitLid = effectController.fitLid;
					bNonBlinn = effectController.nonblinn;
					shading = effectController.newShading;

					fillScene();
				}

				phongMaterial.shininess = effectController.shininess;
				texturedMaterial.shininess = effectController.shininess;

				var diffuseColor = new THREE.Color();
				diffuseColor.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
				var specularColor = new THREE.Color();
				if ( effectController.metallic )
				{
					// make colors match to give a more metallic look
					specularColor.copy( diffuseColor );
				}
				else
				{
					// more of a plastic look
					specularColor.setRGB(1,1,1);
				}

				diffuseColor.multiplyScalar(effectController.kd);
				flatGouraudMaterial.color.copy( diffuseColor );
				gouraudMaterial.color.copy( diffuseColor );
				phongMaterial.color.copy( diffuseColor );
				texturedMaterial.color.copy( diffuseColor );

				specularColor.multiplyScalar(effectController.ks);
				phongMaterial.specular.copy( specularColor );
				texturedMaterial.specular.copy( specularColor );

				// Ambient's actually controlled by the light for this demo
				ambientLight.color.setHSL( effectController.hue, effectController.saturation, effectController.lightness * effectController.ka );

				light.position.set( effectController.lx, effectController.ly, effectController.lz );
				light.color.setHSL( effectController.lhue, effectController.lsaturation, effectController.llightness );
				
				// skybox is rendered separately, so that it is always behind the teapot.
				if ( shading === "reflective" )
				{
					// clear to skybox
					renderer.autoClear = false;
					skybox.position.copy( camera.position );
					renderer.render( sceneCube, camera );
				}
				else
				{
					// clear to regular background color
					renderer.autoClear = true;
				}

				renderer.render( scene, camera );
			}

			function fillScene() {
				scene = new THREE.Scene();
				//scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );

				// LIGHTS

				scene.add( ambientLight );
				scene.add( light );

				var teapot = new THREE.Mesh(
					new THREE.TeapotGeometry( teapotSize,
							tess,
							effectController.bottom,
							effectController.lid,
							effectController.body,
							effectController.fitLid,
							!effectController.nonblinn ),
					shading === "wireframe" ? wireMaterial : (
					shading === "flat" ? flatGouraudMaterial : (
					shading === "smooth" ? gouraudMaterial : (
					shading === "glossy" ? phongMaterial : (
					shading === "textured" ? texturedMaterial : reflectiveMaterial )))));	// if no match, pick Phong

				scene.add( teapot );
			}

		</script>

	</body>
</html>