diff --git a/examples/webgl_geometry_colors_lookuptable.html b/examples/webgl_geometry_colors_lookuptable.html index 3ba4ff9629616e..189faab641f50e 100644 --- a/examples/webgl_geometry_colors_lookuptable.html +++ b/examples/webgl_geometry_colors_lookuptable.html @@ -55,7 +55,7 @@ var perpCamera, orthoCamera, renderer, lut; - var mesh; + var mesh, pointLight; var scene, uiScene; var params, verticalLegendGroup, horizontalLegendGroup; @@ -89,7 +89,13 @@ orthoCamera = new THREE.OrthographicCamera( - 6, 6, 2, - 2, 1, 10 ); orthoCamera.position.set( 3, 0, 10 ); - var ambientLight = new THREE.AmbientLight( 0x444444 ); + params = { + colorMap: 'rainbow', + legendLayout: 'vertical', + moveLight: false + }; + + var ambientLight = new THREE.AmbientLight( 0x444444, 1.7 ); scene.add( ambientLight ); mesh = new THREE.Mesh( undefined, new THREE.MeshLambertMaterial( { @@ -101,15 +107,11 @@ lut = new THREE.Lut(); - params = { - colorMap: 'rainbow', - legendLayout: 'vertical' - }; loadModel( ); - var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 ); - directionalLight.position.set( 17, 9, 30 ); - scene.add( directionalLight ); + pointLight = new THREE.PointLight( 0xffffff, 1 ); + pointLight.position.set( 2, 0, 1 ); + scene.add( pointLight ); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.autoClear = false; @@ -123,6 +125,7 @@ controls.addEventListener( 'change', render ); var gui = new dat.GUI(); + gui.width = 350; gui.add( params, 'legendLayout', [ 'vertical', 'horizontal' ] ).onChange( function () { @@ -138,6 +141,11 @@ } ); + var folder = gui.addFolder( 'light' ); + folder.add( pointLight, 'intensity', 0, 3 ).step( 0.1 ).name( 'Point Light Intensity' ).onChange( render ); + folder.add( ambientLight, 'intensity', 0, 3 ).step( 0.1 ).name( 'Ambient Light Intensity' ).onChange( render ); + folder.add( params, 'moveLight' ).onChange( animate ); + } function onWindowResize() { @@ -153,6 +161,20 @@ } + function animate() { + + if ( params.moveLight ) { + + requestAnimationFrame( animate ); + + var t = Date.now() / 250; + pointLight.position.set( Math.cos( t ), Math.sin( t ) * 2, Math.cos( t / 4 ) ).multiplyScalar( 2 ); + render(); + + } + + } + function render() { renderer.clear(); @@ -293,7 +315,6 @@ } -