Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 63def1e9 编写于 作者: W WestLangley 提交者： Mr.doob
浏览文件
操作

Clean up (#8908)

上级 ec654585
隐藏空白更改
内联 并排
Showing with 79 addition and 62 deletion
examples/webgl_lights_spotlights.html
浏览文件 @ 63def1e9
...@@ -33,10 +33,9 @@ ...@@ -33,10 +33,9 @@
</head> </head>
<body> <body>
<div id="container"></div>
<div id="info"> <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 /> <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. Where the lights converge to make white light the shadows will appear as C M Y from light color pairing.
</div> </div>
...@@ -48,125 +47,143 @@ ...@@ -48,125 +47,143 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script> <script>
var stats, container = document.getElementById( 'container' );
if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var rnd = new THREE.WebGLRenderer(); var renderer = 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 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 matFloor = new THREE.MeshPhongMaterial();
var matBox = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random() } ); var matBox = new THREE.MeshPhongMaterial( { color: 0xaaaaaa } );
var geoFloor = new THREE.BoxGeometry(2000, 0.1, 2000);
var geoBox = new THREE.BoxGeometry(Math.PI, Math.sqrt(2), Math.E); var geoFloor = new THREE.BoxGeometry( 2000, 1, 2000 );
var mshFloor = new THREE.Mesh(geoFloor, matFloor); var geoBox = new THREE.BoxGeometry( 3, 1, 2 );
var mshBox = new THREE.Mesh(geoBox, matBox);
var amb = new THREE.AmbientLight(0x121422); var mshFloor = new THREE.Mesh( geoFloor, matFloor );
var spt1 = createSpotlight( 0xFF7F00 ); var mshBox = new THREE.Mesh( geoBox, matBox );
var spt2 = createSpotlight( 0x00FF7F );
var spt3 = createSpotlight( 0x7F00FF ); var ambient = new THREE.AmbientLight( 0x111111 );
var spotLight1 = createSpotlight( 0xFF7F00 );
var spotLight2 = createSpotlight( 0x00FF7F );
var spotLight3 = createSpotlight( 0x7F00FF );
var lightHelper1, lightHelper2, lightHelper3; var lightHelper1, lightHelper2, lightHelper3;
var ray = new THREE.Raycaster();
var mouseDown = new THREE.Vector2();
var mouse = new THREE.Vector2();
function init() { function init() {
rnd.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
rnd.shadowMap.type = THREE.PCFSoftShadowMap; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
rnd.gammaInput = true;
rnd.gammaOutput = true; renderer.gammaInput = true;
renderer.gammaOutput = true;
cam.position.set(38, 20, -32); camera.position.set( 46, 22, - 21 );
spt1.position.set(15, 40, 45); spotLight1.position.set( 15, 40, 45 );
spt2.position.set(0, 40, 35); spotLight2.position.set( 0, 40, 35 );
spt3.position.set(-15, 40, 45); spotLight3.position.set( - 15, 40, 45 );
lightHelper1 = new THREE.SpotLightHelper( spt1 ); lightHelper1 = new THREE.SpotLightHelper( spotLight1 );
lightHelper2 = new THREE.SpotLightHelper( spt2 ); lightHelper2 = new THREE.SpotLightHelper( spotLight2 );
lightHelper3 = new THREE.SpotLightHelper( spt3 ); lightHelper3 = new THREE.SpotLightHelper( spotLight3 );
matFloor.color.set( 0x808080 ); matFloor.color.set( 0x808080 );
mshFloor.receiveShadow = true; mshFloor.receiveShadow = true;
mshFloor.position.set(0, -0.05, 0); mshFloor.position.set( 0, - 0.05, 0 );
mshBox.castShadow = true; mshBox.castShadow = true;
mshBox.receiveShadow = true; mshBox.receiveShadow = true;
mshBox.position.set(0, 5, 0); mshBox.position.set( 0, 5, 0 );
scn.add( cam); scene.add( mshFloor );
scn.add( mshFloor ); scene.add( mshBox );
scn.add( mshBox ); scene.add( ambient );
scn.add( amb ); scene.add( spotLight1, spotLight2, spotLight3 );
scn.add( spt1, spt2, spt3 ); scene.add( lightHelper1, lightHelper2, lightHelper3 );
scn.add( lightHelper1, lightHelper2, lightHelper3 );
document.body.appendChild(rnd.domElement); document.body.appendChild( renderer.domElement );
onResize(); 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 ) { function createSpotlight( color ) {
var newObj = new THREE.SpotLight( color, 2 ); var newObj = new THREE.SpotLight( color, 2 );
newObj.castShadow = true; newObj.castShadow = true;
newObj.angle = 0.3; newObj.angle = 0.3;
newObj.penumbra = 0.2; newObj.penumbra = 0.2;
newObj.decay = 2; newObj.decay = 2;
newObj.distance = 50; newObj.distance = 50;
newObj.shadow.mapSize.width = 1024; newObj.shadow.mapSize.width = 1024;
newObj.shadow.mapSize.height = 1024; newObj.shadow.mapSize.height = 1024;
return newObj; return newObj;
} }
function onResize() { function onResize() {
cam.aspect = window.innerWidth / window.innerHeight;
cam.updateProjectionMatrix(); camera.aspect = window.innerWidth / window.innerHeight;
rnd.setSize( window.innerWidth, window.innerHeight ); camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
} }
function animate(rate) { function animate( rate ) {
rate = rate || 6; rate = rate || 6;
if ( rate < 0.01 ) rate = 0.01; if ( rate < 0.01 ) rate = 0.01;
else if ( rate > 1000 ) rate = 1000; 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) }; var targ1 = { x: ( ( Math.random() * 30 ) - 15 ), y: ( ( Math.random() * 10 ) + 15 ), z: ( ( Math.random() * 30 ) - 15 ) };
TweenMax.to(spt2.position, rate, targ2); TweenMax.to( spotLight1.position, rate / 3, targ1 );
TweenMax.to(spt2, rate / 3, { angle: ( (Math.random() * 0.7) + 0.1 ), penumbra: ( Math.random() + 1 ), position: targ2 } ); 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) }; var targ2 = { x: ( ( Math.random() * 30 ) - 15 ), y: ( ( Math.random() * 10 ) + 15 ), z: ( ( Math.random() * 30 ) - 15 ) };
TweenMax.to(spt3.position, rate / 2, targ3); TweenMax.to( spotLight2.position, rate, targ2 );
TweenMax.to(spt3, rate, { angle: ( (Math.random() * 0.7) + 0.1 ), penumbra: ( Math.random() + 1 ), position: targ3 } ); 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 ( lightHelper1 ) lightHelper1.update();
if ( lightHelper2 ) lightHelper2.update(); if ( lightHelper2 ) lightHelper2.update();
if ( lightHelper3 ) lightHelper3.update(); if ( lightHelper3 ) lightHelper3.update();
rnd.render(scn, cam); renderer.render( scene, camera );
requestAnimationFrame(render); requestAnimationFrame( render );
} }
init(); init();
render(); render();
animate(4.5); animate( 4.5 );
</script> </script>
</body> </body>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或