g
/
g


<!DOCTYPE html><html lang="en">	<head>		<title>three.js webgl - teapot buffer 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: absolute;				padding: 10px;				width: 100%;				text-align: center;				color: #fff;			}
			a { color: blue; }
		</style>	</head>	<body>		<script src="js/three.min.js"></script>
		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/Detector.js"></script>
		<script src='js/libs/dat.gui.min.js'></script>
		<script src='js/geometries/TeapotBufferGeometry.js'></script>
		<script>
			////////////////////////////////////////////////////////////////////////////////			// Utah/Newell Teapot demo			////////////////////////////////////////////////////////////////////////////////			/*global THREE, Detector, container, dat, window */
			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
			var camera, scene, sceneCube, renderer;			var cameraControls;			var effectController;			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, flatMaterial, gouraudMaterial, phongMaterial, texturedMaterial, reflectiveMaterial;
			var teapot;
			// allocate these just once			var diffuseColor = new THREE.Color();			var specularColor = new THREE.Color();
			init();			render();
			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 );
				// EVENTS				window.addEventListener( 'resize', onWindowResize, false );
				// CONTROLS				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );				cameraControls.target.set( 0, 0, 0 );				cameraControls.addEventListener( 'change', render );
				// 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 } ) ;
				flatMaterial = new THREE.MeshPhongMaterial( { color: materialColor, specular: 0x0, 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 );
				// scene itself				scene = new THREE.Scene();
				scene.add( ambientLight );				scene.add( light );
				// GUI				setupGui();
			}
			// EVENT HANDLERS
			function onWindowResize() {
				var canvasWidth = window.innerWidth;				var canvasHeight = window.innerHeight;
				renderer.setSize( canvasWidth, canvasHeight );
				camera.aspect = canvasWidth / canvasHeight;				camera.updateProjectionMatrix();
				render();
			}
			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();
				h = gui.addFolder( "Lighting" );
				h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name( "hue" ).onChange( render );				h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name( "saturation" ).onChange( render );				h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name( "lightness" ).onChange( render );				h.add( effectController, "ka", 0.0, 1.0, 0.025 ).name( "ambient" ).onChange( render );
				// light (directional)
				h = gui.addFolder( "Light direction" );
				h.add( effectController, "lx", -1.0, 1.0, 0.025 ).name( "x" ).onChange( render );				h.add( effectController, "ly", -1.0, 1.0, 0.025 ).name( "y" ).onChange( render );				h.add( effectController, "lz", -1.0, 1.0, 0.025 ).name( "z" ).onChange( render );			}

			//
			function render() {
				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;
					createNewTeapot();
				}
				// We're a bit lazy here. We could check to see if any material attributes changed and update				// only if they have. But, these calls are cheap enough and this is just a demo.				phongMaterial.shininess = effectController.shininess;				texturedMaterial.shininess = effectController.shininess;
				diffuseColor.setHSL( effectController.hue, effectController.saturation, effectController.lightness );				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 );				flatMaterial.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 );
			}
			// Whenever the teapot changes, the scene is rebuilt from scratch (not much to it).			function createNewTeapot() {
				if ( teapot !== undefined ) {
					teapot.geometry.dispose();					scene.remove( teapot );
				}
				var teapotGeometry = new THREE.TeapotBufferGeometry( teapotSize,					tess,					effectController.bottom,					effectController.lid,					effectController.body,					effectController.fitLid,					! effectController.nonblinn );
				teapot = new THREE.Mesh(					teapotGeometry,					shading === "wireframe" ? wireMaterial : (					shading === "flat" ? flatMaterial : (					shading === "smooth" ? gouraudMaterial : (					shading === "glossy" ? phongMaterial : (					shading === "textured" ? texturedMaterial : reflectiveMaterial ) ) ) ) );	// if no match, pick Phong
				scene.add( teapot );
			}
		</script>
	</body></html>