Created
April 1, 2015 12:18
-
-
Save nkint/b967314206c04263c9a2 to your computer and use it in GitHub Desktop.
broken ray caster with pivot
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>three.js webgl - interactive cubes</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 { | |
| font-family: Monospace; | |
| background-color: #f0f0f0; | |
| margin: 0px; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="../build/three.min.js"></script> | |
| <script src="js/libs/stats.min.js"></script> | |
| <script> | |
| var container, stats; | |
| var camera, scene, raycaster, renderer; | |
| var mouse = new THREE.Vector2(), INTERSECTED; | |
| var radius = 100, theta = 0; | |
| init(); | |
| animate(); | |
| function init() { | |
| 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 = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - interactive cubes'; | |
| container.appendChild( info ); | |
| camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 ); | |
| scene = new THREE.Scene(); | |
| var light = new THREE.DirectionalLight( 0xffffff, 1 ); | |
| light.position.set( 1, 1, 1 ).normalize(); | |
| scene.add( light ); | |
| var geometry = new THREE.BoxGeometry( 20, 20, 20 ); | |
| for ( var i = 0; i < 2000; i ++ ) { | |
| var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) ); | |
| var pivot = new THREE.Object3D(); | |
| pivot.add( object ); | |
| pivot.position.x = Math.random() * 800 - 400; | |
| pivot.position.y = Math.random() * 800 - 400; | |
| pivot.position.z = Math.random() * 800 - 400; | |
| pivot.rotation.x = Math.random() * 2 * Math.PI; | |
| pivot.rotation.y = Math.random() * 2 * Math.PI; | |
| pivot.rotation.z = Math.random() * 2 * Math.PI; | |
| pivot.scale.x = Math.random() + 0.5; | |
| pivot.scale.y = Math.random() + 0.5; | |
| pivot.scale.z = Math.random() + 0.5; | |
| //scene.add( object ); | |
| scene.add( pivot ); | |
| } | |
| raycaster = new THREE.Raycaster(); | |
| renderer = new THREE.WebGLRenderer(); | |
| renderer.setClearColor( 0xf0f0f0 ); | |
| renderer.setPixelRatio( window.devicePixelRatio ); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| renderer.sortObjects = false; | |
| container.appendChild(renderer.domElement); | |
| stats = new Stats(); | |
| stats.domElement.style.position = 'absolute'; | |
| stats.domElement.style.top = '0px'; | |
| container.appendChild( stats.domElement ); | |
| document.addEventListener( 'mousemove', onDocumentMouseMove, false ); | |
| // | |
| window.addEventListener( 'resize', onWindowResize, false ); | |
| } | |
| function onWindowResize() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| } | |
| function onDocumentMouseMove( event ) { | |
| event.preventDefault(); | |
| mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; | |
| mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; | |
| } | |
| // | |
| function animate() { | |
| requestAnimationFrame( animate ); | |
| render(); | |
| stats.update(); | |
| } | |
| function render() { | |
| theta += 0.01; | |
| camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) ); | |
| camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) ); | |
| camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) ); | |
| camera.lookAt( scene.position ); | |
| camera.updateMatrixWorld(); | |
| // find intersections | |
| raycaster.setFromCamera( mouse, camera ); | |
| var intersects = raycaster.intersectObjects( scene.children ); | |
| if ( intersects.length > 0 ) { | |
| if ( INTERSECTED != intersects[ 0 ].object ) { | |
| if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex ); | |
| INTERSECTED = intersects[ 0 ].object; | |
| INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex(); | |
| INTERSECTED.material.emissive.setHex( 0xff0000 ); | |
| } | |
| } else { | |
| if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex ); | |
| INTERSECTED = null; | |
| } | |
| renderer.render( scene, camera ); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment