|
|
@@ -0,0 +1,251 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <title>three.js webgl - lights - spot light</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-color: #000;
|
|
|
+ margin: 0px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ #info {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px; width: 100%;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 5px;
|
|
|
+ font-family: Monospace;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ color: #ff0080;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ a:hover {
|
|
|
+ color: #0080ff;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+
|
|
|
+ <div id="container"></div>
|
|
|
+ <div id="info">
|
|
|
+ <a href="http://threejs.org" target="_blank">three.js</a> - This animates 3 Spot Lights - by <a href="http://master-domain.com" target="_blank">Master James</a><br />
|
|
|
+ Orbit Controls are available to navigate. Click to set random color CTRL-Click for White.<br />
|
|
|
+ Where the lights converge to make white light the shadows will appear as C M Y from light color pairing.
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="../build/three.js"></script>
|
|
|
+ <script src="../examples/js/libs/dat.gui.min.js"></script>
|
|
|
+ <script src="../examples/js/controls/OrbitControls.js"></script>
|
|
|
+ <script src="js/Detector.js"></script>
|
|
|
+
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ var stats, container = document.getElementById( 'container' );
|
|
|
+
|
|
|
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
+
|
|
|
+ var rnd = new THREE.WebGLRenderer();
|
|
|
+ var cam = new THREE.PerspectiveCamera(34, window.innerWidth / window.innerHeight, 0.1, 20000);
|
|
|
+ var orb = new THREE.OrbitControls(cam, rnd.domElement);
|
|
|
+
|
|
|
+ var scn = new THREE.Scene();
|
|
|
+ var matFloor = new THREE.MeshPhongMaterial();
|
|
|
+ var matBox = new THREE.MeshPhongMaterial();
|
|
|
+ var geoFloor = new THREE.BoxGeometry(2000, 0.1, 2000);
|
|
|
+ var geoBox = new THREE.BoxGeometry(Math.PI, Math.sqrt(2), Math.E);
|
|
|
+ var mshFloor = new THREE.Mesh(geoFloor, matFloor);
|
|
|
+ var mshBox = new THREE.Mesh(geoBox, matBox);
|
|
|
+ var amb = new THREE.AmbientLight(0x121422);
|
|
|
+ var spt1 = createSpotlight( { color: 0xFF7F00, angle:0.3 } );
|
|
|
+ var spt2 = createSpotlight( { color: 0x00FF7F, angle:0.3 } );
|
|
|
+ var spt3 = createSpotlight( { color: 0x7F00FF, angle:0.3 } );
|
|
|
+ var lightHelper1, lightHelper2, lightHelper3;
|
|
|
+ var ray = new THREE.Raycaster();
|
|
|
+ var mouseDown = new THREE.Vector2();
|
|
|
+ var mouse = new THREE.Vector2();
|
|
|
+
|
|
|
+ function init() {
|
|
|
+
|
|
|
+ rnd.shadowMap.enabled = true;
|
|
|
+ rnd.shadowMap.type = THREE.PCFSoftShadowMap;
|
|
|
+ rnd.gammaInput = true;
|
|
|
+ rnd.gammaOutput = true;
|
|
|
+ rnd.antialias = true;
|
|
|
+ rnd.domElement.addEventListener('mousedown', onDocumentClick);
|
|
|
+ rnd.domElement.addEventListener('mouseup', onDocumentClick);
|
|
|
+
|
|
|
+ cam.position.set(38, 20, -32);
|
|
|
+
|
|
|
+ spt1.position.set(15, 40, 45);
|
|
|
+ spt2.position.set(0, 40, 35);
|
|
|
+ spt3.position.set(-15, 40, 45);
|
|
|
+
|
|
|
+ lightHelper1 = new THREE.SpotLightHelper( spt1 );
|
|
|
+ lightHelper2 = new THREE.SpotLightHelper( spt2 );
|
|
|
+ lightHelper3 = new THREE.SpotLightHelper( spt3 );
|
|
|
+
|
|
|
+ matFloor.color.set( 0x808080 );
|
|
|
+
|
|
|
+ mshFloor.receiveShadow = true;
|
|
|
+ mshFloor.position.set(0, -0.05, 0);
|
|
|
+
|
|
|
+ randomColor( matBox );
|
|
|
+ matBox.opacity = 0.8;
|
|
|
+ mshBox.castShadow = true;
|
|
|
+ mshBox.receiveShadow = true;
|
|
|
+ mshBox.position.set(0, 5, 0);
|
|
|
+
|
|
|
+ scn.add(cam);
|
|
|
+ scn.add(mshFloor);
|
|
|
+ scn.add(mshBox);
|
|
|
+ scn.add(amb);
|
|
|
+ scn.add( spt1 );
|
|
|
+ scn.add( spt1.shadowCameraHelper );
|
|
|
+ scn.add( spt2 );
|
|
|
+ scn.add( spt2.shadowCameraHelper );
|
|
|
+ scn.add( spt3 );
|
|
|
+ scn.add( spt3.shadowCameraHelper );
|
|
|
+ scn.add( new THREE.AxisHelper( 7 ) );
|
|
|
+ scn.add( lightHelper1, lightHelper2, lightHelper3 );
|
|
|
+
|
|
|
+ document.body.appendChild(rnd.domElement);
|
|
|
+ onResize();
|
|
|
+ window.addEventListener('resize', onResize, false);
|
|
|
+
|
|
|
+ orb.addEventListener('change', render);
|
|
|
+ orb.object.position.set(46, 22, -21);
|
|
|
+ orb.target.set(-6, 7, 2);
|
|
|
+ orb.maxPolarAngle = (Math.PI / 2);
|
|
|
+ orb.update();
|
|
|
+ };
|
|
|
+
|
|
|
+ function createSpotlight( object ) {
|
|
|
+ var newObj = new THREE.SpotLight(object.color || 0xFFFFFF);
|
|
|
+ newObj.castShadow = object.castShadow || true;
|
|
|
+ newObj.angle = object.angle || 0.777;
|
|
|
+ newObj.exponent = object.exponent || 2.0;
|
|
|
+ newObj.penumbra = object.penumbra || 0.2;
|
|
|
+ newObj.decay = object.decay || 10;
|
|
|
+ newObj.distance = object.distance || 0.0;
|
|
|
+ newObj.shadow.mapSize.width = object.shadowWidth || 2048;
|
|
|
+ newObj.shadow.mapSize.height = object.shadowHeight || 2048;
|
|
|
+ // shadow camera helper
|
|
|
+ newObj.shadowCameraHelper = new THREE.CameraHelper( newObj.shadow.camera ); // colored lines
|
|
|
+ newObj.shadow.camera.near = 0.1;
|
|
|
+ newObj.shadow.camera.far = 20000;
|
|
|
+
|
|
|
+ return newObj;
|
|
|
+ };
|
|
|
+
|
|
|
+ function onResize() {
|
|
|
+ rnd.setSize(window.innerWidth, window.innerHeight);
|
|
|
+ cam.aspect = (window.innerWidth / window.innerHeight);
|
|
|
+ cam.updateProjectionMatrix();
|
|
|
+ };
|
|
|
+
|
|
|
+ function animate(rate) {
|
|
|
+ rate = rate || 6;
|
|
|
+ if ( rate < 0.01 ) rate = 0.01;
|
|
|
+ else if ( rate > 1000 ) rate = 1000;
|
|
|
+ var targ1 = { x: ((Math.random() * 30) - 15), y: ((Math.random() * 10) + 15), z: ((Math.random() * 30) - 15) };
|
|
|
+ TweenMax.to(spt1.position, rate / 3, targ1);
|
|
|
+ TweenMax.to(spt1, rate / 2, { angle: ( (Math.random() * 0.7) + 0.1 ), penumbra: ( Math.random() + 1 ), position: targ1 } );
|
|
|
+
|
|
|
+ var targ2 = { x: ((Math.random() * 30) - 15), y: ((Math.random() * 10) + 15), z: ((Math.random() * 30) - 15) };
|
|
|
+ TweenMax.to(spt2.position, rate, targ2);
|
|
|
+ TweenMax.to(spt2, rate / 3, { angle: ( (Math.random() * 0.7) + 0.1 ), penumbra: ( Math.random() + 1 ), position: targ2 } );
|
|
|
+
|
|
|
+ var targ3 = { x: ((Math.random() * 30) - 15), y: ((Math.random() * 10) + 15), z: ((Math.random() * 30) - 15) };
|
|
|
+ TweenMax.to(spt3.position, rate / 2, targ3);
|
|
|
+ TweenMax.to(spt3, rate, { angle: ( (Math.random() * 0.7) + 0.1 ), penumbra: ( Math.random() + 1 ), position: targ3 } );
|
|
|
+
|
|
|
+ setTimeout(function() { animate(rate); }, rate * 1000);
|
|
|
+ };
|
|
|
+
|
|
|
+ function render( /* time */ ) {
|
|
|
+ if ( lightHelper1 ) lightHelper1.update();
|
|
|
+ if ( lightHelper2 ) lightHelper2.update();
|
|
|
+ if ( lightHelper3 ) lightHelper3.update();
|
|
|
+ if ( spt1.shadowCameraHelper ) spt1.shadowCameraHelper.update();
|
|
|
+ if ( spt2.shadowCameraHelper ) spt2.shadowCameraHelper.update();
|
|
|
+ if ( spt3.shadowCameraHelper ) spt3.shadowCameraHelper.update();
|
|
|
+
|
|
|
+ rnd.render(scn, cam);
|
|
|
+
|
|
|
+ window.requestAnimationFrame(render);
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ function onDocumentClick( event ) {
|
|
|
+
|
|
|
+ event.preventDefault();
|
|
|
+
|
|
|
+ var rndDom = rnd.domElement;
|
|
|
+
|
|
|
+ if( event.type === 'mousedown' ) {
|
|
|
+
|
|
|
+ mouseDown.x = ( event.clientX / rndDom.clientWidth ) * 2 - 1;
|
|
|
+
|
|
|
+ mouseDown.y = - ( event.clientY / rndDom.clientHeight ) * 2 + 1;
|
|
|
+
|
|
|
+ }
|
|
|
+ else {
|
|
|
+
|
|
|
+ mouse.x = ( event.clientX / rndDom.clientWidth ) * 2 - 1;
|
|
|
+
|
|
|
+ mouse.y = - ( event.clientY / rndDom.clientHeight ) * 2 + 1;
|
|
|
+
|
|
|
+ if (mouseDown.distanceTo(mouse) < 0.0075) {
|
|
|
+
|
|
|
+ ray.setFromCamera( mouse, cam );
|
|
|
+
|
|
|
+ var found = ray.intersectObjects( [ mshBox, mshFloor ] );
|
|
|
+
|
|
|
+ if ( found.length > 0 ) {
|
|
|
+
|
|
|
+ if( event.ctrlKey === false ) randomColor( found[0].object );
|
|
|
+
|
|
|
+ else found[0].object.material.color.set( 0xffffff );
|
|
|
+
|
|
|
+ render();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function randomColor( target ) {
|
|
|
+
|
|
|
+ if ( target !== undefined ) {
|
|
|
+
|
|
|
+ if ( target.material !== undefined ) target = target.material;
|
|
|
+
|
|
|
+ if ( target.color !== undefined ) {
|
|
|
+
|
|
|
+ target.color.setHex( 0xffffff * Math.random() );
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ init();
|
|
|
+
|
|
|
+ render();
|
|
|
+
|
|
|
+ animate(4.5);
|
|
|
+
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
Mr.doob