API tools faq
paste
Advertisement
Guest User

Attempt at a colliding camera with Three.js

a guest
Aug 11th, 2015
463
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.26 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <script type="text/javascript" src="js/three.js"></script>
  5.         <script type="text/javascript" src="js/TrackballControls.js"></script>
  6.         <script type="text/javascript" src="js/physi.js"></script>
  7.         <script>
  8.         'use strict';
  9.        
  10.         window.onload = function() {
  11.             var renderer, scene, camera, ground, box, sphere, ambient_light, sun_light, controls;
  12.             var angle = 0;
  13.             var clock = new THREE.Clock();
  14.            
  15.             Physijs.scripts.worker = 'js/physijs_worker.js';
  16.             Physijs.scripts.ammo = 'ammo.js';
  17.            
  18.             init();
  19.             render();
  20.            
  21.             function init(){
  22.                 // Create renderer and add it to the page
  23.                 renderer = new THREE.WebGLRenderer({ antialias: true });
  24.                 renderer.setSize( window.innerWidth, window.innerHeight );
  25.                 renderer.setClearColor( 0xffffff );
  26.                 renderer.shadowMapEnabled = true;
  27.                 document.body.appendChild( renderer.domElement );
  28.  
  29.                 // Create a scene to hold our awesome 3D world
  30.                 scene = new Physijs.Scene();
  31.                
  32.                 /*** 3D WORLD ***/
  33.                 // Objects
  34.                
  35.                 ground = new Physijs.BoxMesh(
  36.                     new THREE.BoxGeometry(50, 1, 50),
  37.                     new THREE.MeshLambertMaterial({ color: 0x33CC33 }),
  38.                     0 // mass
  39.                 );
  40.        
  41.                 ground.receiveShadow = true;
  42.                 scene.add( ground );
  43.  
  44.                 box = new Physijs.BoxMesh(
  45.                     new THREE.BoxGeometry( 10, 10, 10 ),
  46.                     new THREE.MeshLambertMaterial({ color: 0xDD3344 })
  47.                 );
  48.                
  49.                 box.position.y = 25;
  50.                 box.castShadow = true;
  51.                
  52.                 scene.add( box );
  53.                
  54.                 sphere = new THREE.Mesh(
  55.                     new THREE.SphereGeometry( 3, 32, 32 ),
  56.                     new THREE.MeshBasicMaterial({ color: 0xFFBB00 })
  57.                 );
  58.                 sphere.position.set( 1, 15.5, 5 );
  59.                 scene.add( sphere );
  60.                
  61.                 // Light
  62.                 ambient_light = new THREE.AmbientLight( 0x333333 );
  63.                 scene.add( ambient_light );
  64.  
  65.                 sun_light = new THREE.DirectionalLight( 0xBBBBBB );
  66.                 sun_light.position.set( 1, 15.5, 5 );
  67.                 sun_light.castShadow = true;
  68.  
  69.                 sun_light.shadowCameraNear = 1;
  70.                 sun_light.shadowCameraFar = 100;
  71.  
  72.                 sun_light.shadowCameraLeft = -50;
  73.                 sun_light.shadowCameraRight = 50;
  74.                 sun_light.shadowCameraTop = -50;
  75.                 sun_light.shadowCameraBottom = 50;
  76.  
  77.                 sun_light.shadowBias = -.01;
  78.                
  79.                 scene.add( sun_light );
  80.  
  81.                 // Create a camera
  82.                 camera = new THREE.PerspectiveCamera(
  83.                     45,                                     // FOV
  84.                     window.innerWidth / window.innerHeight, // Aspect Ratio
  85.                     1,                                      // Near plane
  86.                     1000                                    // Far plane
  87.                 );
  88.                 camera.position.set( 30, 30, 30 ); // Position camera
  89.                 camera.lookAt( box.position ); // Look at the scene origin
  90.                
  91.                 /* This didn't work :(
  92.                
  93.                 var cameraMesh = new Physijs.BoxMesh(
  94.                     new THREE.BoxGeometry( 2, 2, 2 ),
  95.                     new THREE.MeshLambertMaterial({ color: 0xFF0000 })
  96.                 )
  97.                
  98.                 cameraMesh.mass = 0;
  99.                
  100.                 cameraMesh.add( camera ); */
  101.                
  102.                 window.addEventListener( 'resize', onWindowResize, false );
  103.                
  104.                 controls = new THREE.TrackballControls( camera );
  105.                 controls.rotateSpeed = 4.0;
  106.                 controls.panSpeed = 0.5;
  107.                 //controls.addEventListener('change', render);
  108.            
  109.             }
  110.    
  111.             function render() {
  112.                 // use requestAnimationFrame to create a render loop
  113.                 angle += .007;
  114.                 var oscillateZ = Math.sin(angle * (Math.PI*4));
  115.                 var oscillateX = -Math.cos(angle * (Math.PI*4));
  116.                 //console.log(oscillateZ);
  117.                 sphere.position.setZ( sphere.position.z + oscillateZ );
  118.                 sphere.position.setX( sphere.position.x + oscillateX );
  119.                 sun_light.position.setZ( sun_light.position.z + oscillateZ );
  120.                 sun_light.position.setX( sun_light.position.x + oscillateX );
  121.                
  122.                 //camera.position.x = box.position.x + 60 * Math.cos( (Math.PI*4) * angle );        
  123.                 //camera.position.z = box.position.z + 60 * Math.sin( (Math.PI*4) * angle );
  124.                 //camera.lookAt( box.position );
  125.                
  126.                 scene.simulate();
  127.                 requestAnimationFrame( render );
  128.                 controls.update();
  129.                 renderer.render( scene, camera );
  130.             }
  131.            
  132.             function onWindowResize() {
  133.                 camera.aspect = window.innerWidth / window.innerHeight;
  134.                 camera.updateProjectionMatrix();
  135.              
  136.                 renderer.setSize( window.innerWidth, window.innerHeight );
  137.             }
  138.         };
  139.         </script>
  140.     </head>
  141.  
  142.     <body></body>
  143. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!