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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
							<!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" target="_blank" rel="noopener">Shaochun Lin</a>]
	</div>
	<script src="../build/three.js"></script>
	<script src="js/controls/OrbitControls.js"></script>

	<script src="js/WebGL.js"></script>
	<script src="js/libs/stats.min.js"></script>
	<script src="js/libs/dat.gui.min.js"></script>
	<script src="js/loaders/FBXLoader.js"></script>
	<script src="js/ShaderTranslucent.js"></script>

	<script>

		if ( WEBGL.isWebGLAvailable() === false ) {

			document.body.appendChild( WEBGL.getWebGLErrorMessage() );

		}

		var container, stats;
		var camera, scene, renderer;
		var model;

		init();
		animate();

		function init() {

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

			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 = - 50;
			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 = - 100;
			pointLight2.position.y = 20;
			pointLight2.position.z = - 260;

			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 );

			var controls = new THREE.OrbitControls( camera, container );

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

			initMaterial();

		}

		function initMaterial() {

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

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

			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.0 );
			uniforms[ 'thicknessDistortion' ].value = 0.1;
			uniforms[ 'thicknessAmbient' ].value = 0.4;
			uniforms[ 'thicknessAttenuation' ].value = 0.8;
			uniforms[ 'thicknessPower' ].value = 2.0;
			uniforms[ 'thicknessScale' ].value = 16.0;

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

			// LOADER

			var loader = new THREE.FBXLoader();
			loader.load( 'models/fbx/stanford-bunny.fbx', function ( object ) {

				model = object.children[ 0 ];
				model.position.set( 0, 0, 10 );
				model.scale.setScalar( 1 );
				model.material = material;
				scene.add( model );

			} );

			initGUI( uniforms );

		}

		function initGUI( uniforms ) {

			var gui = new dat.GUI();

			var ThicknessControls = function () {

				this.distoration = uniforms[ 'thicknessDistortion' ].value;
				this.ambient = uniforms[ 'thicknessAmbient' ].value;
				this.attenuation = uniforms[ 'thicknessAttenuation' ].value;
				this.power = uniforms[ 'thicknessPower' ].value;
				this.scale = uniforms[ 'thicknessScale' ].value;

			};

			var thicknessControls = new ThicknessControls();
			var thicknessFolder = gui.addFolder( 'Thickness Control' );

			thicknessFolder.add( thicknessControls, 'distoration' ).min( 0.01 ).max( 1 ).step( 0.01 ).onChange( function () {

				uniforms[ 'thicknessDistortion' ].value = thicknessControls.distoration;

			} );

			thicknessFolder.add( thicknessControls, 'ambient' ).min( 0.01 ).max( 5.0 ).step( 0.05 ).onChange( function () {

				uniforms[ 'thicknessAmbient' ].value = thicknessControls.ambient;

			} );

			thicknessFolder.add( thicknessControls, 'attenuation' ).min( 0.01 ).max( 5.0 ).step( 0.05 ).onChange( function () {

				uniforms[ 'thicknessAttenuation' ].value = thicknessControls.attenuation;

			} );

			thicknessFolder.add( thicknessControls, 'power' ).min( 0.01 ).max( 16.0 ).step( 0.1 ).onChange( function () {

				uniforms[ 'thicknessPower' ].value = thicknessControls.power;

			} );

			thicknessFolder.add( thicknessControls, 'scale' ).min( 0.01 ).max( 50.0 ).step( 0.1 ).onChange( function () {

				uniforms[ 'thicknessScale' ].value = thicknessControls.scale;

			} );

			thicknessFolder.open();

		}

		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() {

			if ( model ) model.rotation.y = performance.now() / 5000;

			renderer.render( scene, camera );

		}

	</script>

  </body>
</html>