diff --git a/examples/files.js b/examples/files.js index bfa03c81cfdd71e3e26a61a30499626df4cec364..14a291ae9ee50ceeb13ac02bf40e79c0d4be3102 100644 --- a/examples/files.js +++ b/examples/files.js @@ -172,6 +172,7 @@ var files = { "webgl_materials_texture_manualmipmap", "webgl_materials_texture_partialupdate", "webgl_materials_texture_rotation", + "webgl_materials_translucency", "webgl_materials_transparency", "webgl_materials_variations_basic", "webgl_materials_variations_lambert", diff --git a/examples/webgl_materials_translucency.html b/examples/webgl_materials_translucency.html index 540441e82f92497559a78549baafd05f6576865f..0c374b4914a5badf60615b41ccc8b2344b3018fb 100644 --- a/examples/webgl_materials_translucency.html +++ b/examples/webgl_materials_translucency.html @@ -42,9 +42,9 @@ if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); - var container, stats, font; - + var container, stats; var camera, scene, renderer, controls; + var model; init(); animate(); @@ -53,7 +53,6 @@ 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 ); @@ -100,74 +99,82 @@ 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"); + 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 shader = new THREE.TranslucentShader(); + var uniforms = THREE.UniformsUtils.clone( shader.uniforms ); - var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true }; - var material = new THREE.ShaderMaterial( parameters ); + 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 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) { - loadedModel(object, 1, material); - }); - } + 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 ); + + } ); - 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 ); + if ( model ) model.rotation.y = performance.now() / 5000; + renderer.render( scene, camera ); + }