|
|
@@ -33,10 +33,9 @@
|
|
|
</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 />
|
|
|
+ Orbit Controls are available to navigate.<br />
|
|
|
Where the lights converge to make white light the shadows will appear as C M Y from light color pairing.
|
|
|
</div>
|
|
|
|
|
|
@@ -48,125 +47,143 @@
|
|
|
<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, 2000);
|
|
|
- var orb = new THREE.OrbitControls(cam, rnd.domElement);
|
|
|
+ var renderer = new THREE.WebGLRenderer();
|
|
|
+
|
|
|
+ var camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 2000 );
|
|
|
+
|
|
|
+ var controls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
|
+
|
|
|
+ var scene = new THREE.Scene();
|
|
|
|
|
|
- var scn = new THREE.Scene();
|
|
|
var matFloor = new THREE.MeshPhongMaterial();
|
|
|
- var matBox = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random() } );
|
|
|
- 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( 0xFF7F00 );
|
|
|
- var spt2 = createSpotlight( 0x00FF7F );
|
|
|
- var spt3 = createSpotlight( 0x7F00FF );
|
|
|
+ var matBox = new THREE.MeshPhongMaterial( { color: 0xaaaaaa } );
|
|
|
+
|
|
|
+ var geoFloor = new THREE.BoxGeometry( 2000, 1, 2000 );
|
|
|
+ var geoBox = new THREE.BoxGeometry( 3, 1, 2 );
|
|
|
+
|
|
|
+ var mshFloor = new THREE.Mesh( geoFloor, matFloor );
|
|
|
+ var mshBox = new THREE.Mesh( geoBox, matBox );
|
|
|
+
|
|
|
+ var ambient = new THREE.AmbientLight( 0x111111 );
|
|
|
+
|
|
|
+ var spotLight1 = createSpotlight( 0xFF7F00 );
|
|
|
+ var spotLight2 = createSpotlight( 0x00FF7F );
|
|
|
+ var spotLight3 = createSpotlight( 0x7F00FF );
|
|
|
+
|
|
|
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;
|
|
|
+ renderer.shadowMap.enabled = true;
|
|
|
+ renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
|
|
+
|
|
|
+ renderer.gammaInput = true;
|
|
|
+ renderer.gammaOutput = true;
|
|
|
|
|
|
- cam.position.set(38, 20, -32);
|
|
|
+ camera.position.set( 46, 22, - 21 );
|
|
|
|
|
|
- spt1.position.set(15, 40, 45);
|
|
|
- spt2.position.set(0, 40, 35);
|
|
|
- spt3.position.set(-15, 40, 45);
|
|
|
+ spotLight1.position.set( 15, 40, 45 );
|
|
|
+ spotLight2.position.set( 0, 40, 35 );
|
|
|
+ spotLight3.position.set( - 15, 40, 45 );
|
|
|
|
|
|
- lightHelper1 = new THREE.SpotLightHelper( spt1 );
|
|
|
- lightHelper2 = new THREE.SpotLightHelper( spt2 );
|
|
|
- lightHelper3 = new THREE.SpotLightHelper( spt3 );
|
|
|
+ lightHelper1 = new THREE.SpotLightHelper( spotLight1 );
|
|
|
+ lightHelper2 = new THREE.SpotLightHelper( spotLight2 );
|
|
|
+ lightHelper3 = new THREE.SpotLightHelper( spotLight3 );
|
|
|
|
|
|
matFloor.color.set( 0x808080 );
|
|
|
|
|
|
mshFloor.receiveShadow = true;
|
|
|
- mshFloor.position.set(0, -0.05, 0);
|
|
|
+ mshFloor.position.set( 0, - 0.05, 0 );
|
|
|
|
|
|
mshBox.castShadow = true;
|
|
|
mshBox.receiveShadow = true;
|
|
|
- mshBox.position.set(0, 5, 0);
|
|
|
+ mshBox.position.set( 0, 5, 0 );
|
|
|
|
|
|
- scn.add( cam);
|
|
|
- scn.add( mshFloor );
|
|
|
- scn.add( mshBox );
|
|
|
- scn.add( amb );
|
|
|
- scn.add( spt1, spt2, spt3 );
|
|
|
- scn.add( lightHelper1, lightHelper2, lightHelper3 );
|
|
|
+ scene.add( mshFloor );
|
|
|
+ scene.add( mshBox );
|
|
|
+ scene.add( ambient );
|
|
|
+ scene.add( spotLight1, spotLight2, spotLight3 );
|
|
|
+ scene.add( lightHelper1, lightHelper2, lightHelper3 );
|
|
|
|
|
|
- document.body.appendChild(rnd.domElement);
|
|
|
+ document.body.appendChild( renderer.domElement );
|
|
|
onResize();
|
|
|
- window.addEventListener('resize', onResize, false);
|
|
|
+ window.addEventListener( 'resize', onResize, false );
|
|
|
+
|
|
|
+ controls.target.set( 0, 7, 0 );
|
|
|
+ controls.maxPolarAngle = Math.PI / 2;
|
|
|
+ controls.update();
|
|
|
|
|
|
- orb.object.position.set(46, 22, -21);
|
|
|
- orb.target.set(-6, 7, 2);
|
|
|
- orb.maxPolarAngle = (Math.PI / 2);
|
|
|
- orb.update();
|
|
|
}
|
|
|
|
|
|
function createSpotlight( color ) {
|
|
|
+
|
|
|
var newObj = new THREE.SpotLight( color, 2 );
|
|
|
+
|
|
|
newObj.castShadow = true;
|
|
|
newObj.angle = 0.3;
|
|
|
newObj.penumbra = 0.2;
|
|
|
newObj.decay = 2;
|
|
|
newObj.distance = 50;
|
|
|
+
|
|
|
newObj.shadow.mapSize.width = 1024;
|
|
|
newObj.shadow.mapSize.height = 1024;
|
|
|
|
|
|
return newObj;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
function onResize() {
|
|
|
- cam.aspect = window.innerWidth / window.innerHeight;
|
|
|
- cam.updateProjectionMatrix();
|
|
|
- rnd.setSize( window.innerWidth, window.innerHeight );
|
|
|
+
|
|
|
+ camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+
|
|
|
}
|
|
|
|
|
|
- function animate(rate) {
|
|
|
+ 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 targ1 = { x: ( ( Math.random() * 30 ) - 15 ), y: ( ( Math.random() * 10 ) + 15 ), z: ( ( Math.random() * 30 ) - 15 ) };
|
|
|
+ TweenMax.to( spotLight1.position, rate / 3, targ1 );
|
|
|
+ TweenMax.to( spotLight1, rate / 2, { angle: ( ( Math.random() * 0.7 ) + 0.1 ), penumbra: ( Math.random() + 1 ), position: targ1 } );
|
|
|
|
|
|
- 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 } );
|
|
|
+ var targ2 = { x: ( ( Math.random() * 30 ) - 15 ), y: ( ( Math.random() * 10 ) + 15 ), z: ( ( Math.random() * 30 ) - 15 ) };
|
|
|
+ TweenMax.to( spotLight2.position, rate, targ2 );
|
|
|
+ TweenMax.to( spotLight2, 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( spotLight3.position, rate / 2, targ3 );
|
|
|
+ TweenMax.to( spotLight3, rate, { angle: ( ( Math.random() * 0.7 ) + 0.1 ), penumbra: ( Math.random() + 1 ), position: targ3 } );
|
|
|
+
|
|
|
+ setTimeout( function() {
|
|
|
+
|
|
|
+ animate( rate );
|
|
|
+
|
|
|
+ }, rate * 1000 );
|
|
|
|
|
|
- setTimeout(function() { animate(rate); }, rate * 1000);
|
|
|
}
|
|
|
|
|
|
- function render( /* time */ ) {
|
|
|
+ function render() {
|
|
|
+
|
|
|
if ( lightHelper1 ) lightHelper1.update();
|
|
|
if ( lightHelper2 ) lightHelper2.update();
|
|
|
if ( lightHelper3 ) lightHelper3.update();
|
|
|
|
|
|
- rnd.render(scn, cam);
|
|
|
+ renderer.render( scene, camera );
|
|
|
|
|
|
- requestAnimationFrame(render);
|
|
|
+ requestAnimationFrame( render );
|
|
|
|
|
|
}
|
|
|
|
|
|
init();
|
|
|
render();
|
|
|
- animate(4.5);
|
|
|
+ animate( 4.5 );
|
|
|
|
|
|
</script>
|
|
|
</body>
|
WestLangley