javascript
/
three.js
镜像来自 https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
							
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - materials - cube reflection [cars]</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 {
				background:#000;
				color:#fff;
				padding:0;
				margin:0;
				overflow:hidden;
				font-family:georgia;
				text-align:center;
			}
			h1 { }
			a { color:skyblue; text-decoration:none }
			/*canvas { pointer-events:none; z-index:10; position:relative; }*/

			#d { position:absolute; width: 100%; text-align:center; margin:1em 0 -4.5em 0; z-index:1000; }

			.bwrap { margin:0.5em 0 0 0 }
			button { font-family:georgia; border:0; background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px; }
			button:hover { background:#333 }
			#buttons_cars button { color:#fa0 }

			#car_info { text-align:center; }
			#car_name { font-size:1em }
			#car_author { font-size:1em }

			.dg { z-index: 100 }

			#oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
		</style>
	</head>

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

		<script src="js/loaders/BinaryLoader.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>
		
		<div id="info">


			<a href="http://threejs.org" target="_blank">three.js</a> - webgl environment mapping example<br/>
			Equirectangular Map by <a href="http://gl.ict.usc.edu/Data/HighResProbes/">University of Southern California</a><br/>
			Spherical Map by <a href="http://www.pauldebevec.com/Probes/">Paul Debevec</a>

		</div>

		<script>

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

			var STATS_ENABLED = false;

			var container, stats;

			var controls, camera, scene, renderer;
			var cameraCube, sceneCube;
			var textureEquirec, textureCube, textureSphere;
			var cubeMesh, sphereMesh;
			var sphereMaterial;
			var refract;

			var m, mi;

			var directionalLight, pointLight;

			var mouseX = 0, mouseY = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			// var loader = new THREE.BinaryLoader( true );
			// document.body.appendChild( loader.statusDomElement );

			init();
			animate();

			function init() {

				params = {
					stuff: 0.4,
					useCube: function() {
						cubeMesh.material = cubeMaterial;
						sphereMaterial.envMap = textureCube;
						sphereMaterial.needsUpdate = true;
					},
					useEquirect: function() {
						cubeMesh.material = equirectMaterial;
						sphereMaterial.envMap = textureEquirec;
						sphereMaterial.needsUpdate = true;
					},
					useSphere: function() {
						cubeMesh.material = equirectMaterial;
						sphereMaterial.envMap = textureSphere;
						sphereMaterial.needsUpdate = true;
					},
					toggleRefraction: function() {
						refract = !refract;
						if ( refract ) {
							textureEquirec.mapping = THREE.EquirectangularRefractionMapping;
							textureCube.mapping = THREE.CubeRefractionMapping;
							textureSphere.mapping = THREE.SphericalRefractionMapping;
						}
						else {
							textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
							textureCube.mapping = THREE.CubeReflectionMapping;
							textureSphere.mapping = THREE.SphericalReflectionMapping;
						}
						sphereMaterial.needsUpdate = true;
					}
				};

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

				// CAMERAS

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
				camera.position.set( 550, 0, 550 );
				cameraCube = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );

				controls = new THREE.OrbitControls( camera );
				controls.minDistance = 500;
				controls.maxDistance = 2500;


				// SCENE

				scene = new THREE.Scene();
				sceneCube = new THREE.Scene();

				// LIGHTS

				var ambient = new THREE.AmbientLight( 0xffffff );
				scene.add( ambient );

				// directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
				// directionalLight.position.set( 2, 1.2, 10 ).normalize();
				// scene.add( directionalLight );

				// directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
				// directionalLight.position.set( -2, 1.2, -10 ).normalize();
				// scene.add( directionalLight );

				// pointLight = new THREE.PointLight( 0xffaa00, 2 );
				// pointLight.position.set( 2000, 1200, 10000 );
				// scene.add( pointLight );

				// Skybox

				var equirectShader = THREE.ShaderLib[ "equirect" ];
				// shader.uniforms[ "tCube" ].value = textureCube;

				var equirectMaterial = new THREE.ShaderMaterial( {
					fragmentShader: equirectShader.fragmentShader,
					vertexShader: equirectShader.vertexShader,
					uniforms: equirectShader.uniforms,
					depthWrite: false,
					side: THREE.BackSide
				} );

				var cubeShader = THREE.ShaderLib[ "cube" ];
				var cubeMaterial = new THREE.ShaderMaterial( {
					fragmentShader: cubeShader.fragmentShader,
					vertexShader: cubeShader.vertexShader,
					uniforms: cubeShader.uniforms,
					depthWrite: false,
					side: THREE.BackSide
				} );

				cubeMesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), cubeMaterial );
				sceneCube.add( cubeMesh );

				renderer = new THREE.WebGLRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setFaceCulling( THREE.CullFaceNone );
				renderer.autoClear = false;

				container.appendChild( renderer.domElement );

				if ( STATS_ENABLED ) {

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

				}

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );

				var r = "textures/cube/Bridge2/";
				var urls = [ r + "posx.jpg", r + "negx.jpg",
							 r + "posy.jpg", r + "negy.jpg",
							 r + "posz.jpg", r + "negz.jpg" ];

				textureCube = THREE.ImageUtils.loadTextureCube( urls );
				textureCube.format = THREE.RGBFormat;
				textureCube.mapping = THREE.CubeReflectionMapping;
				cubeMaterial.uniforms[ "tCube" ].value = textureCube;

				textureEquirec = THREE.ImageUtils.loadTexture( "textures/environment/grace-new.jpg" );
				textureEquirec.format = THREE.RGBAFormat;
				textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
				textureEquirec.magFilter = THREE.LinearFilter;
				textureEquirec.minFilter = THREE.LinearMipMapLinearFilter;
				// textureEquirec.anisotropy = 8.0;
				// textureEquirec.generateMipmaps = true;
				equirectMaterial.uniforms[ "tEquirect" ].value = textureEquirec;

				textureSphere = THREE.ImageUtils.loadTexture( "textures/environment/grace_probe.jpg" );
				textureSphere.mapping = THREE.SphericalReflectionMapping;

				var gui = new dat.GUI();
				// gui.domElement.style['z-index'] = 100;
				gui.add( params, 'toggleRefraction' );
				gui.add( params, 'useCube' );
				gui.add( params, 'useEquirect' );
				gui.add( params, 'useSphere' );
				gui.open();

				createScene();
				
				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				cameraCube.aspect = window.innerWidth / window.innerHeight;
				cameraCube.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}


			function createScene(  ) {
				var geometry = new THREE.SphereGeometry( 400.0, 24, 24 );
				sphereMaterial = new THREE.MeshLambertMaterial( { envMap: textureCube } );
				sphereMesh = new THREE.Mesh( geometry, sphereMaterial );

				// sphereMesh.scale.x = mesh.scale.y = mesh.scale.z = s;

				scene.add( sphereMesh );
				
			}

			function onDocumentMouseMove(event) {

				mouseY = ( event.clientY - window.innerHeight );

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				render();

				controls.update();

			}

			function render() {

				var timer = -0.0002 * Date.now();

				// camera.position.x = 1000 * Math.cos( timer );
				// camera.position.y += ( - mouseY - camera.position.y ) * .05;
				// camera.position.z = 1000 * Math.sin( timer );

				camera.lookAt( scene.position );
				cameraCube.rotation.copy( camera.rotation );

				renderer.render( sceneCube, cameraCube );
				renderer.render( scene, camera );

				if ( STATS_ENABLED ) stats.update();

			}

		</script>

	</body>
</html>