diff --git a/examples/files.js b/examples/files.js index bc01e85ec2831b1b8631658b065698d6cbf7a898..f325e833be58fe06732575e69e33de2f6e87efb7 100644 --- a/examples/files.js +++ b/examples/files.js @@ -47,8 +47,8 @@ var files = { "webgl_geometry_text_shapes", "webgl_geometry_text_stroke", "webgl_helpers", - "webgl_instancing_suzanne", "webgl_instancing_raycast", + "webgl_instancing_suzanne", "webgl_interactive_buffergeometry", "webgl_interactive_cubes", "webgl_interactive_cubes_gpu", diff --git a/examples/webgl_instancing_raycast.html b/examples/webgl_instancing_raycast.html index 3112aca3b425b533ca4f39c8d63073f95f5bf5bd..8d42f87f7aeeda988aa2d3c844bc1fbc55b2289e 100644 --- a/examples/webgl_instancing_raycast.html +++ b/examples/webgl_instancing_raycast.html @@ -17,12 +17,10 @@ var camera, scene, renderer, stats; - var mesh, geometry; - var amount = parseInt( window.location.search.substr( 1 ) ) || 3; + var mesh; + var amount = parseInt( window.location.search.substr( 1 ) ) || 10; var count = Math.pow( amount, 3 ); - var object = new THREE.Object3D(); - var intersection; var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2( 1, 1 ); @@ -36,21 +34,29 @@ function init() { - camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 ); + camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 ); camera.position.set( amount, amount, amount ); camera.lookAt( 0, 0, 0 ); scene = new THREE.Scene(); - geometry = new THREE.TorusKnotBufferGeometry( 0.5, 0.2, 16, 4, 2, 3 ); - geometry.scale( 0.5, 0.5, 0.5 ); + var light = new THREE.HemisphereLight( 0xffffff, 0x000088 ); + light.position.set( - 1, 1.5, 1 ); + scene.add( light ); - var material = new THREE.MeshNormalMaterial( { flatShading: true } ); + var light = new THREE.HemisphereLight( 0xffffff, 0x880000, 0.5 ); + light.position.set( - 1, - 1.5, - 1 ); + scene.add( light ); + + var geometry = new THREE.SphereBufferGeometry( 0.5 ); + var material = new THREE.MeshPhongMaterial( { flatShading: true } ); mesh = new THREE.InstancedMesh( geometry, material, count ); var i = 0; - var offset = amount / 2; + var offset = ( amount - 1 ) / 2; + + var transform = new THREE.Object3D(); for ( var x = 0; x < amount; x ++ ) { @@ -58,11 +64,10 @@ for ( var z = 0; z < amount; z ++ ) { - object.position.set( offset - x, offset - y, offset - z ); - - object.updateMatrix(); + transform.position.set( offset - x, offset - y, offset - z ); + transform.updateMatrix(); - mesh.setMatrixAt( i ++, object.matrix ); + mesh.setMatrixAt( i ++, transform.matrix ); } @@ -82,7 +87,7 @@ renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); - var orbitControls = new OrbitControls( camera, renderer.domElement ); + new OrbitControls( camera, renderer.domElement ); stats = new Stats(); document.body.appendChild( stats.dom ); @@ -122,7 +127,7 @@ raycaster.setFromCamera( mouse, camera ); - intersection = raycaster.intersectObjects( scene.children ); + var intersection = raycaster.intersectObject( mesh ); if ( intersection.length > 0 ) { diff --git a/examples/webgl_instancing_suzanne.html b/examples/webgl_instancing_suzanne.html index e5bb3b1000a8a9e0753b590c39f805192a41c7ff..f3ac2393e1ea8f26e87b98738b39c0e36c3d9ba4 100644 --- a/examples/webgl_instancing_suzanne.html +++ b/examples/webgl_instancing_suzanne.html @@ -27,7 +27,7 @@ function init() { - camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 ); + camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 ); camera.position.set( amount * 0.9, amount * 0.9, amount * 0.9 ); camera.lookAt( 0, 0, 0 ); @@ -102,7 +102,7 @@ mesh.rotation.y = Math.sin( time / 2 ); var i = 0; - var offset = amount / 2; + var offset = ( amount - 1 ) / 2; for ( var x = 0; x < amount; x ++ ) {