Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

Clean up (#8921)

上级 9406f2cd
隐藏空白更改
内联 并排
Showing with 117 addition and 145 deletion
examples/webgl_lights_spotlight.html
浏览文件 @ 3514421b
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - lights - spot light</title>
<title>three.js webgl - lights - spotlight</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
......@@ -33,231 +33,203 @@
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - Just to show the spot light and it's edge - by <a href="http://master-domain.com" target="_blank">Master James</a><br />
Right click and drag to move OrbitControls, center across the edge of the shadow.<br />
Click to set random color CTRL-Click for White.<br />
<a href="http://threejs.org" target="_blank">three.js</a> webgl - spotlight by <a href="http://master-domain.com" target="_blank">Master James</a><br />
</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/libs/dat.gui.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/Detector.js"></script>
<script>
var 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 renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );
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();
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 spt = new THREE.SpotLight(0xFFFFFF);
var lightHelper;
var ray = new THREE.Raycaster();
var mouseDown = new THREE.Vector2();
var mouse = new THREE.Vector2();
var matBox = new THREE.MeshPhongMaterial( { color: 0x4080ff } );
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( 0xffffff, 0.1 );
var spotLight = new THREE.SpotLight( 0xffffff, 1 );
var lightHelper;
var gui, guiElements, param = { color: '0xffffff' };
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(65, 8, -10);
spt.position.set(15, 40, 35);
spt.castShadow = true;
spt.angle = 0.75;
spt.exponent = 2.0;
spt.penumbra = 0.05;
spt.decay = 2;
spt.distance = 500;
spt.shadow.mapSize.width = 1024;
spt.shadow.mapSize.height = 1024;
spt.shadow.camera.near = 0.1;
spt.shadow.camera.far = 20000;
lightHelper = new THREE.SpotLightHelper( spt );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.gammaInput = true;
renderer.gammaOutput = true;
camera.position.set( 65, 8, - 10 );
spotLight.position.set( 15, 40, 35 );
spotLight.castShadow = true;
spotLight.angle = Math.PI / 4;
spotLight.penumbra = 0.05;
spotLight.decay = 2;
spotLight.distance = 200;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 1;
spotLight.shadow.camera.far = 200;
lightHelper = new THREE.SpotLightHelper( spotLight );
matFloor.color.set( 0x808080 );
randomColor( matBox );
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(40, 1.8, 0);
scn.add(cam);
scn.add(mshFloor);
scn.add(mshBox);
scn.add(amb);
scn.add(spt);
scn.add( new THREE.AxisHelper( 10 ) );
scn.add( lightHelper );
document.body.appendChild(rnd.domElement);
onResize();
window.addEventListener('resize', onResize, false);
orb.addEventListener('change', render);
orb.update();
mshBox.position.set( 40, 1.8, 0 );
scene.add( camera );
scene.add( mshFloor );
scene.add( mshBox );
scene.add( ambient );
scene.add( spotLight );
scene.add( new THREE.AxisHelper( 10 ) );
scene.add( lightHelper );
document.body.appendChild( renderer.domElement );
renderer.setSize( window.innerWidth, window.innerHeight );
controls.addEventListener( 'change', render );
controls.minDistance = 20;
controls.maxDistance = 500;
controls.maxPolarAngle = Math.PI / 2;
controls.enablePan = false;
controls.target.copy( mshBox.position );
controls.update();
window.addEventListener( 'resize', onResize, false );
}
function onResize() {
rnd.setSize(window.innerWidth, window.innerHeight);
cam.aspect = (window.innerWidth / window.innerHeight);
cam.updateProjectionMatrix();
orb.target = mshBox.position;
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = ( window.innerWidth / window.innerHeight );
camera.updateProjectionMatrix();
}
function render() {
lightHelper.update(); // required
rnd.render(scn, cam);
renderer.render( scene, camera );
}
function clearGui() {
if ( gui ) gui.destroy();
gui = new dat.GUI();
gui.width = 190;
var gStyle = gui.domElement.style;
gStyle.position = "absolute";
gStyle.top = "48px";
gStyle.height = "220px";
gui.open();
}
function buildGui() {
clearGui();
addGui( 'light color', spt.color.getHex(), function( val ) {
spt.color.setHex( val );
render();
}, true );
addGui( 'light color', spotLight.color.getHex(), function( val ) {
addGui( 'intensity', spt.intensity, function( val ) {
spt.intensity = val;
spotLight.color.setHex( val );
render();
}, false, 0, 10 );
addGui( 'distance', spt.distance, function( val ) {
spt.distance = val;
render();
}, false, 0, 1000 );
}, true );
addGui( 'angle', spt.angle, function( val ) {
spt.angle = val;
render();
}, false, 0, 1.56 );
addGui( 'intensity', spotLight.intensity, function( val ) {
addGui( 'penumbra', spt.penumbra, function( val ) {
spt.penumbra = val;
spotLight.intensity = val;
render();
}, false, 0, 1 );
addGui( 'decay', spt.decay, function( val ) {
spt.decay = val;
render();
}, false, 0, 100 );
}, false, 0, 2 );
}
addGui( 'distance', spotLight.distance, function( val ) {
function addGui( name, value, callback, isColor, min, max ) {
var node;
param[ name ] = value;
if ( isColor ) {
node = gui.addColor( param, name ).onChange( function() {
callback( param[ name ] );
} );
}
else if ( typeof value == 'object' ) {
node = gui.add( param, name, value ).onChange( function() {
callback( param[ name ] );
} );
}
else {
node = gui.add( param, name, min, max ).onChange( function() {
callback( param[ name ] );
} );
}
return node;
}
spotLight.distance = val;
render();
function onDocumentClick( event ) {
}, false, 0, 200 );
event.preventDefault();
addGui( 'angle', spotLight.angle, function( val ) {
var rndDom = rnd.domElement;
spotLight.angle = val;
render();
if( event.type === 'mousedown' ) {
}, false, 0, Math.PI / 3 );
mouseDown.x = ( event.clientX / rndDom.clientWidth ) * 2 - 1;
addGui( 'penumbra', spotLight.penumbra, function( val ) {
mouseDown.y = - ( event.clientY / rndDom.clientHeight ) * 2 + 1;
spotLight.penumbra = val;
render();
}
else {
}, false, 0, 1 );
mouse.x = ( event.clientX / rndDom.clientWidth ) * 2 - 1;
addGui( 'decay', spotLight.decay, function( val ) {
mouse.y = - ( event.clientY / rndDom.clientHeight ) * 2 + 1;
spotLight.decay = val;
render();
if (mouseDown.distanceTo(mouse) < 0.0075) {
}, false, 1, 2 );
ray.setFromCamera( mouse, cam );
}
var found = ray.intersectObjects( [ mshBox, mshFloor ] );
function addGui( name, value, callback, isColor, min, max ) {
if ( found.length > 0 ) {
var node;
param[ name ] = value;
if( event.ctrlKey === false ) randomColor( found[0].object );
if ( isColor ) {
else found[0].object.material.color.set( 0xffffff );
node = gui.addColor( param, name ).onChange( function() {
render();
callback( param[ name ] );
}
} );
}
} else if ( typeof value == 'object' ) {
}
node = gui.add( param, name, value ).onChange( function() {
}
callback( param[ name ] );
function randomColor( target ) {
} );
if ( target !== undefined ) {
} else {
if ( target.material !== undefined ) target = target.material;
node = gui.add( param, name, min, max ).onChange( function() {
if ( target.color !== undefined ) {
callback( param[ name ] );
target.color.setHex( 0xffffff * Math.random() );
} );
}
}
return node;
}
init();
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或