home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 04:56:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

Added shadows to the draggable cubes example (@spite's suggestion).

Browse Source
This commit is contained in:
Mr.doob
2011-09-04 01:49:04 +02:00
parent 1bdf3daec9
commit a0c6e077ef
1 changed files with 24 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/webgl_interactive_draggablecubes.html
+24 -42
View File
@@ -21,7 +21,7 @@
<script type="text/javascript">
var container, data, stats;
var container, stats;
var camera, scene, projector, renderer;
var objects = [], plane;
@@ -50,18 +50,9 @@
scene = new THREE.Scene();
var light = new THREE.DirectionalLight( 0xffffff, 2 );
light.position.x = 1;
light.position.y = 1;
light.position.z = 1;
light.position.normalize();
scene.addLight( light );
var light = new THREE.DirectionalLight( 0xffffff );
light.position.x = - 1;
light.position.y = - 1;
light.position.z = - 1;
light.position.normalize();
var light = new THREE.SpotLight( 0xffffff, 2 );
light.position.set( 0, 500, 2000 );
light.castShadow = true;
scene.addLight( light );
var geometry = new THREE.CubeGeometry( 40, 40, 40 );
@@ -69,7 +60,7 @@
for ( var i = 0; i < 200; i ++ ) {
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
object.position.x = Math.random() * 800 - 400;
object.position.x = Math.random() * 1000 - 500;
object.position.y = Math.random() * 600 - 300;
object.position.z = Math.random() * 800 - 400;
object.rotation.x = ( Math.random() * 360 ) * Math.PI / 180;
@@ -78,6 +69,8 @@
object.scale.x = Math.random() * 2 + 1;
object.scale.y = Math.random() * 2 + 1;
object.scale.z = Math.random() * 2 + 1;
object.castShadow = true;
object.receiveShadow = true;
scene.addObject( object );
objects.push( object );
@@ -93,15 +86,20 @@
renderer = new THREE.WebGLRenderer();
renderer.sortObjects = false;
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild(renderer.domElement);
data = document.createElement( 'div' );
data.style.position = 'absolute';
data.style.whiteSpace = 'nowrap';
data.style.color = '#404040';
data.style.padding = '8px';
data.style.backgroundColor = '#ffffff';
container.appendChild( data );
renderer.shadowCameraNear = 3;
renderer.shadowCameraFar = camera.far;
renderer.shadowCameraFov = 50;
renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.5;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
@@ -118,9 +116,6 @@
event.preventDefault();
data.style.left = ( - 20 + event.clientX) + 'px';
data.style.top = ( 10 + event.clientY ) + 'px';
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
@@ -151,18 +146,21 @@
INTERSECTED = intersects[ 0 ].object;
INTERSECTED.currentHex = INTERSECTED.materials[ 0 ].color.getHex();
INTERSECTED.materials[ 0 ].color.setHex( 0xff0000 );
plane.position.copy( INTERSECTED.position );
}
container.style.cursor = 'pointer';
} else {
if ( INTERSECTED ) INTERSECTED.materials[ 0 ].color.setHex( INTERSECTED.currentHex );
INTERSECTED = null;
container.style.cursor = 'auto';
}
}
@@ -211,26 +209,10 @@
}
var radius = 100;
var theta = 0;
function render() {
theta += 0.2;
renderer.render( scene, camera );
if ( INTERSECTED ) {
data.style.visibility = 'visible';
data.innerHTML = 'x: ' + INTERSECTED.position.x + '<br>y: ' + INTERSECTED.position.y + '<br>z: ' + INTERSECTED.position.z;
} else {
data.style.visibility = 'hidden';
}
}
</script>