API tools faq
paste
metalx1000

Basic - Random Clickable 3D Cube - Three.js Canvas

metalx1000
Jul 19th, 2013
337
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.         <head>
  4.                 <title>Clickable Objects</title>
  5.                 <meta charset="utf-8">
  6.                 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7.                 <style>
  8.                         body {
  9.                                 background-color: #f0f0f0;
  10.                                 margin: 0px;
  11.                                 overflow: hidden;
  12.                         }
  13.                 </style>
  14.         </head>
  15.         <body>
  16.  
  17.                 <script src="../build/three.min.js"></script>
  18.  
  19.                 <script src="js/libs/tween.min.js"></script>
  20.  
  21.                 <script>
  22.  
  23.                         var container;
  24.                         var camera, scene, projector, renderer;
  25.  
  26.                         init();
  27.                         animate();
  28.  
  29.                         function init() {
  30.  
  31.                                 container = document.createElement( 'div' );
  32.                                 document.body.appendChild( container );
  33.  
  34.                                 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
  35.                                 camera.position.y = 300;
  36.                                 camera.position.z = 500;
  37.  
  38.                                 scene = new THREE.Scene();
  39.  
  40.                                 var geometry = new THREE.CubeGeometry( 100, 100, 100 );
  41.  
  42.                                 for(var i = 0; i < 20; i++){
  43.                                 var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
  44.                                         object.position.x = Math.random() * 800 - 400;
  45.                                         object.position.y = Math.random() * 800 - 400;
  46.                                         object.position.z = Math.random() * 800 - 400;
  47.                                         object.scale.x = Math.random() * 2 + 1;
  48.                                         object.scale.y = Math.random() * 2 + 1;
  49.                                         object.scale.z = Math.random() * 2 + 1;
  50.                                         object.rotation.x = Math.random() * 2 * Math.PI;
  51.                                         object.rotation.y = Math.random() * 2 * Math.PI;
  52.                                         object.rotation.z = Math.random() * 2 * Math.PI;
  53.                                         scene.add( object );
  54.                                 }
  55.  
  56.  
  57.                                 projector = new THREE.Projector();
  58.  
  59.                                 renderer = new THREE.CanvasRenderer();
  60.                                 renderer.setSize( window.innerWidth, window.innerHeight );
  61.  
  62.                                 container.appendChild(renderer.domElement);
  63.  
  64.  
  65.                                 document.addEventListener( 'mousedown', onDocumentMouseDown, false );
  66.  
  67.                                 //
  68.  
  69.  
  70.                         }
  71.  
  72.  
  73.                         function onDocumentMouseDown( event ) {
  74.  
  75.                                 event.preventDefault();
  76.  
  77.                                 var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
  78.                                 projector.unprojectVector( vector, camera );
  79.  
  80.                                 var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
  81.  
  82.                                 var intersects = raycaster.intersectObjects( scene.children );
  83.  
  84.                                 if ( intersects.length > 0 ) {
  85.  
  86.                                         new TWEEN.Tween( intersects[ 0 ].object.position ).to( {
  87.                                                 x: Math.random() * 800 - 400,
  88.                                                 y: Math.random() * 800 - 400,
  89.                                                 z: Math.random() * 800 - 400 }, 2000 )
  90.                                         .easing( TWEEN.Easing.Elastic.Out).start();
  91.  
  92.                                         new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
  93.                                                 x: Math.random() * 2 * Math.PI,
  94.                                                 y: Math.random() * 2 * Math.PI,
  95.                                                 z: Math.random() * 2 * Math.PI }, 2000 )
  96.                                         .easing( TWEEN.Easing.Elastic.Out).start();
  97.  
  98.                                 }
  99.  
  100.                         }
  101.  
  102.                         //
  103.  
  104.                         function animate() {
  105.  
  106.                                 requestAnimationFrame( animate );
  107.  
  108.                                 render();
  109.  
  110.                         }
  111.  
  112.                         var radius = 600;
  113.                         var theta = 0;
  114.  
  115.                         function render() {
  116.  
  117.                                 TWEEN.update();
  118.  
  119.                                 theta += 0.1;
  120.  
  121.                                 camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
  122.                                 camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
  123.                                 camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
  124.                                 camera.lookAt( scene.position );
  125.  
  126.                                 renderer.render( scene, camera );
  127.  
  128.                         }
  129.  
  130.                 </script>
  131.  
  132.         </body>
  133. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!