diff --git a/examples/webgl_interactive_draggablecubes.html b/examples/webgl_interactive_draggablecubes.html
index c7b3b3e6135fa9ffbe9ac519229c338916b57b52..da29d05477528f4aeb946212d6bb3b5211fe0857 100644
--- a/examples/webgl_interactive_draggablecubes.html
+++ b/examples/webgl_interactive_draggablecubes.html
@@ -37,20 +37,14 @@
container = document.createElement( 'div' );
document.body.appendChild( container );
- var info = document.createElement( 'div' );
- info.style.position = 'absolute';
- info.style.top = '10px';
- info.style.width = '100%';
- info.style.textAlign = 'center';
- info.innerHTML = 'three.js webgl - draggable cubes';
- container.appendChild( info );
-
- camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
+ camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
scene = new THREE.Scene();
- var light = new THREE.SpotLight( 0xffffff, 2 );
+ scene.addLight( new THREE.AmbientLight( 0x505050 ) );
+
+ var light = new THREE.SpotLight( 0xffffff, 1.5 );
light.position.set( 0, 500, 2000 );
light.castShadow = true;
scene.addLight( light );
@@ -77,38 +71,47 @@
}
- plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.5, wireframe: true } ) );
+ plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) );
+ plane.lookAt( camera.position );
plane.visible = false;
scene.addObject( plane );
projector = new THREE.Projector();
- renderer = new THREE.WebGLRenderer( { antialias: true } );
+ renderer = new THREE.WebGLRenderer( { antialias : true } );
renderer.sortObjects = false;
renderer.setSize( window.innerWidth, window.innerHeight );
+ renderer.shadowMapEnabled = true;
+ renderer.shadowMapSoft = true;
+
renderer.shadowCameraNear = 3;
renderer.shadowCameraFar = camera.far;
- renderer.shadowCameraFov = 30;
+ renderer.shadowCameraFov = 50;
- renderer.shadowMapBias = 0.00389;
+ renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.5;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;
- renderer.shadowMapEnabled = true;
- renderer.shadowMapSoft = true;
+ container.appendChild( renderer.domElement );
- container.appendChild(renderer.domElement);
+ var info = document.createElement( 'div' );
+ info.style.position = 'absolute';
+ info.style.top = '10px';
+ info.style.width = '100%';
+ info.style.textAlign = 'center';
+ info.innerHTML = 'three.js webgl - draggable cubes';
+ container.appendChild( info );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
- document.addEventListener( 'mousemove', onDocumentMouseMove, false );
- document.addEventListener( 'mousedown', onDocumentMouseDown, false );
- document.addEventListener( 'mouseup', onDocumentMouseUp, false );
+ renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
+ renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
+ renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
}
@@ -186,6 +189,7 @@
container.style.cursor = 'move';
}
+
}
function onDocumentMouseUp( event ) {