Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 d68323ed 编写于 作者: M Mr.doob
浏览文件
操作

Clean up.

上级 9b365be7
隐藏空白更改
内联 并排
Showing with 49 addition and 431 deletion
examples/files.js
浏览文件 @ d68323ed
......@@ -67,7 +67,6 @@ var files = {
"webgl_lights_pointlights2",
"webgl_lights_spotlight",
"webgl_lights_spotlights",
"webgl_lights_arealight",
"webgl_lights_rectarealight",
"webgl_lines_colors",
"webgl_lines_cubes",
......
examples/index.html
浏览文件 @ d68323ed
......@@ -473,7 +473,7 @@
}
filterInput.value = extractQuery();
updateFilter( )
updateFilter();
</script>
......
examples/webgl_lights_arealight.html 已删除 100644 → 0
浏览文件 @ 9b365be7
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - lights - rect 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> - Just to show the rect light and it's edge - by <a href="http://github.com/abelnation" target="_blank">abelnation</a><br />
Click and drag to move OrbitControls, center across the edge of the shadow.<br />
Click to set random color CTRL-Click for White.<br />
</div>
<script src="../build/three.js"></script>
<script src="js/lights/RectAreaLightUniformsLib.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>
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 scn = new THREE.Scene();
var matParams = {
specular: 0xFFFFFF,
shininess: 10000
};
var matFloor = new THREE.MeshPhongMaterial( matParams );
var matBox = new THREE.MeshPhongMaterial( matParams );
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( 0x080808 );
// TODO (abelnation): temp point light for debugging
var dir = new THREE.DirectionalLight( 0xFFFFFF );
var dirHelper = new THREE.DirectionalLightHelper( dir );
var shapes, shapeNames;
var rectLight;
var rectLightHelper;
var ray = new THREE.Raycaster();
var mouseDown = new THREE.Vector2();
var mouse = new THREE.Vector2();
var gui, guiElements;
var param = {};
function init() {
var gl = rnd.context;
// Check for float-RT support
// TODO (abelnation): figure out fall-back for float textures
if (!gl.getExtension("OES_texture_float")) {
alert("OES_texture_float not supported");
throw "missing webgl extension";
}
if (!gl.getExtension("OES_texture_float_linear")) {
alert("OES_texture_float_linear not supported");
throw "missing webgl extension";
}
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( 0, 100, 0 );
cam.position.set( 45, 20, 45 );
// shapes = {
// square: THREE.Polygon.makeSquare( 10.0 ),
// rectangle: THREE.Polygon.makeRectangle( 10.0, 5.0 ),
// circle: THREE.Polygon.makeCircle( 5.0, 20 ),
// star: THREE.Polygon.makeStar( 5, 5.0, 2.5 ),
// triangle: new THREE.Polygon( [
// new THREE.Vector3( -5.0, -5.0, 0 ),
// new THREE.Vector3( 0.0, 5.0, 0 ),
// new THREE.Vector3( 5.0, -5.0, 0 ),
// ] )
// };
// shapeNames = Object.keys( shapes );
rectLight = new THREE.RectAreaLight( 0xFFFFFF, undefined, 2, 10 );
rectLight.matrixAutoUpdate = true;
rectLight.intensity = 70.0;
rectLight.position.set( 5, 5, 0 );
// rectLight.target = mshBox;
rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
rectLight.add( rectLightHelper );
// TODO (abelnation): rect light shadow
matFloor.color.set( 0x808080 );
randomColor( matBox );
mshFloor.receiveShadow = true;
mshFloor.position.set( 0, 0, 0 );
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( dir );
// scn.add( dirHelper );
scn.add( rectLight );
// scn.add( rectLightHelper );
// scn.add( new THREE.AxisHelper( 10 ) );
document.body.appendChild( rnd.domElement );
onResize();
window.addEventListener( 'resize', onResize, false );
orb.addEventListener( 'change', render );
orb.update();
}
function onResize() {
rnd.setSize( window.innerWidth, window.innerHeight );
cam.aspect = ( window.innerWidth / window.innerHeight );
cam.updateProjectionMatrix();
orb.target = mshBox.position;
}
function tick() {
update();
render();
requestAnimationFrame( tick );
}
function update() {
var dt = 6000;
var qdt = dt / 4.0;
var dirSigns = [
[ 1, 1 ],
[ - 1, 1 ],
[ - 1, 1 ],
[ 1, 1 ]
];
var t = ( Date.now() / 1000 );
// move light in circle around center
// change light height with sine curve
var r = 10.0;
var lx = r * Math.cos( t );
var lz = r * Math.sin( t );
var ly = 5.0 + 5.0 * Math.sin( t / 3.0 );
// var ly = 7.0;
rectLight.position.set( lx, ly, lz );
rectLight.lookAt( mshBox.position );
rectLight.updateMatrixWorld();
// // move box in figure 8 path
// // xz is a figure 8
// // y is gently rising and falling
// var r = t * ( 4.0 * Math.PI );
// var s = Math.floor( t * dirSigns.length );
//
// var sign = dirSigns[ s ];
// var x = 5.0 * ( Math.cos( r ) + 1.0 ) * sign[ 0 ];
// var z = 5.0 * Math.sin( r ) * sign[ 1 ];
// var y = 2.5 * Math.cos( 0.5 * r ) + 5.0;
//
// mshBox.position.set( x, y, z );
// mshBox.updateMatrixWorld();
}
function render() {
rectLightHelper.update(); // required
rnd.render( scn, cam );
}
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();
param = {
'light color': rectLight.color.getHex(),
intensity: rectLight.intensity,
width: rectLight.width,
height: rectLight.height,
shininess: matFloor.shininess
// shape: shapeNames[0]
};
gui.add( param, 'width', 0.1, 20).onChange( function ( val ) {
rectLight.width = val;
} );
gui.add( param, 'height', 0.1, 20).onChange( function ( val ) {
rectLight.height = val;
} );
// gui.add( param, 'shape', shapeNames ).onChange( function ( val ) {
//
// rectLight.polygon = shapes[ val ].clone();
//
// } );
gui.addColor( param, 'light color' ).onChange( function ( val ) {
rectLight.color.setHex( val );
} );
gui.add( param, 'intensity', 0, 100 ).onChange( function ( val ) {
rectLight.intensity = val;
} );
gui.add( param, 'shininess', 0, 100000 ).onChange( function ( val ) {
matBox.shininess = val;
matFloor.shininess = val;
} );
// TODO (abelnation): shadow controls
// addGui( 'distance', rectLight.distance, function( val ) {
// rectLight.distance = val;
// render();
// }, false, 0, 1000 );
// addGui( 'penumbra', rectLight.penumbra, function( val ) {
// rectLight.penumbra = val;
// render();
// }, false, 0, 1 );
// addGui( 'decay', rectLight.decay, function( val ) {
// rectLight.decay = val;
// render();
// }, false, 0, 100 );
}
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();
buildGui();
tick();
</script>
</body>
</html>
examples/webgl_physics_convex_break.html
浏览文件 @ d68323ed
<html lang="en">
<head>
<title>Convex object breaking example</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 {
color: #61443e;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #bfd1e5;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #a06851;
}
</style>
</head>
<body>
<head>
<title>Convex object breaking example</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 {
color: #61443e;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #bfd1e5;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #a06851;
}
</style>
</head>
<body>
<div id="info">Physics threejs demo with convex objects breaking in real time<br />Press mouse to throw balls and move the camera.</div>
<div id="container"><br /><br /><br /><br /><br />Loading...</div>
<div id="container"><br /><br /><br /><br /><br />Loading...</div>
<script src="../build/three.js"></script>
<script src="js/libs/ammo.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/ConvexObjectBreaker.js"></script>
<script src="js/QuickHull.js"></script>
<script src="js/geometries/ConvexGeometry.js"></script>
<script>
<script>
// Detects webgl
if ( ! Detector.webgl ) {
Detector.addGetWebGLMessage();
document.getElementById( 'container' ).innerHTML = "";
Detector.addGetWebGLMessage();
document.getElementById( 'container' ).innerHTML = "";
}
// - Global variables -
......@@ -82,7 +84,7 @@
var objectsToRemove = [];
for ( var i = 0; i < 500; i++ ) {
objectsToRemove[ i ] = null;
objectsToRemove[ i ] = null;
}
var numObjectsToRemove = 0;
......@@ -232,9 +234,9 @@
quat.set( 0, 0, 0, 1 );
for ( var i = 0; i < numStones; i++ ) {
pos.set( 0, 2, 15 * ( 0.5 - i / ( numStones + 1 ) ) );
pos.set( 0, 2, 15 * ( 0.5 - i / ( numStones + 1 ) ) );
createObject( stoneMass, stoneHalfExtents, pos, quat, createMaterial( 0xB0B0B0 ) );
createObject( stoneMass, stoneHalfExtents, pos, quat, createMaterial( 0xB0B0B0 ) );
}
......@@ -312,16 +314,16 @@
function createRigidBody( object, physicsShape, mass, pos, quat, vel, angVel ) {
if ( pos ) {
object.position.copy( pos );
object.position.copy( pos );
}
else {
pos = object.position;
pos = object.position;
}
if ( quat ) {
object.quaternion.copy( quat );
object.quaternion.copy( quat );
}
else {
quat = object.quaternion;
quat = object.quaternion;
}
var transform = new Ammo.btTransform();
......@@ -339,10 +341,10 @@
body.setFriction( 0.5 );
if ( vel ) {
body.setLinearVelocity( new Ammo.btVector3( vel.x, vel.y, vel.z ) );
body.setLinearVelocity( new Ammo.btVector3( vel.x, vel.y, vel.z ) );
}
if ( angVel ) {
body.setAngularVelocity( new Ammo.btVector3( angVel.x, angVel.y, angVel.z ) );
body.setAngularVelocity( new Ammo.btVector3( angVel.x, angVel.y, angVel.z ) );
}
object.userData.physicsBody = body;
......@@ -548,14 +550,14 @@
for ( var i = 0; i < numObjectsToRemove; i++ ) {
removeDebris( objectsToRemove[ i ] );
removeDebris( objectsToRemove[ i ] );
}
numObjectsToRemove = 0;
}
</script>
</script>
</body>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或