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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
							<!DOCTYPE html>
<html lang="en">
  <head>
	<title>three.js webgl - Fast subsurface scattering in Blinn-Phong shading demo</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;

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

	  #info {
			position: absolute;
			top: 0px; width: 100%;
			padding: 5px;
	  }
	</style>
  </head>
  <body>

	<div id="container"></div>
	<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a>
		<br/>Fast subsurface scattering in Blinn-Phong shading demo<br/>
		[Thanks for the art support from <a href="https://github.com/shaochun">Shaochun Lin</a>]
	</div>
	<script src="../build/three.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/loaders/FBXLoader.js"></script>
	<script src="js/ShaderTranslucent.js"></script>

	<script>

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

		var container, stats, font;

		var camera, scene, renderer, controls;

		init();
		animate();

		function init() {

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

			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 5000 );
			camera.position.set( 0.0, 300, 400 * 4 );

			scene = new THREE.Scene();

			// Lights

			scene.add( new THREE.AmbientLight( 0x888888 ) );

			var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.03 );
			directionalLight.position.set( 0.0, 0.5, 0.5 ).normalize();
			scene.add( directionalLight );

			var pointLight1 = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x888888 } ) );
			pointLight1.add( new THREE.PointLight( 0x888888, 7.0, 300 ) );
			scene.add( pointLight1 );
			pointLight1.position.x = 0;
			pointLight1.position.y = 0;
			pointLight1.position.z = 350;

			var pointLight2 = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x888800 } ) );
			pointLight2.add( new THREE.PointLight( 0x888800, 1.0, 500 ) );
			scene.add( pointLight2 );
			pointLight2.position.x = 150;
			pointLight2.position.y = -100;
			pointLight2.position.z = -250;

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

			renderer.gammaInput = true;
			renderer.gammaOutput = true;

			//

			stats = new Stats();
			container.appendChild( stats.dom );

			controls = new THREE.OrbitControls( camera );

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

			initMaterial();
		}

		function initMaterial() {
			var shader = new THREE.TranslucentShader();
			var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

			// Materials

			var loader = new THREE.TextureLoader();
			var imgTexture = loader.load("models/fbx/white.jpg");
			var thicknessTexture = loader.load("models/fbx/bunny_thickness.png");
			imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;

			uniforms[ "map" ].value = imgTexture;

			uniforms[ "diffuse" ].value = new THREE.Vector3(1.0, 0.2, 0.2);
			uniforms[ "shininess" ].value = 500;

			uniforms[ "thicknessMap" ].value = thicknessTexture;
			uniforms[ "thicknessColor" ].value = new THREE.Vector3(0.5, 0.3, 0.3);
			uniforms[ "thicknessDistortion" ].value = 0.1;
			uniforms[ "thicknessAmbient" ].value = 0.1;
			uniforms[ "thicknessAttenuation" ].value = 0.8;
			uniforms[ "thicknessPower" ].value = 2;
			uniforms[ "thicknessScale" ].value = 10.0;

			var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
			var material = new THREE.ShaderMaterial( parameters );
			material.extensions.derivatives = true;

			// LOADER

			var loader = new THREE.FBXLoader();
			loader.load("models/fbx/stanford-bunny.fbx", function(object) {
				loadedModel(object, 1, material);
			});
		}

		function loadedModel(object, scale, material) {
			object.children[0].position.x = 0;
			object.children[0].position.y = 0;
			object.children[0].position.z = 10;
			object.children[0].scale.set(scale, scale, scale);
			object.children[0].material = material;
			scene.add(object);
		}

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

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

		//

		function animate() {
			requestAnimationFrame( animate );

			render();
			stats.update();
		}

		function render() {
			var timer = Date.now() * 0.00025;

			camera.lookAt( scene.position );
			renderer.render( scene, camera );
		}

	</script>

  </body>
</html>