Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 15th, 2012  |  syntax: None  |  size: 3.04 KB  |  hits: 16  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <title>Camera movement test | Threejs</title>
  5.         </head>
  6.         <body>
  7.                 <div id="container"></div>
  8.                 <script type="text/javascript" src="RequestAnimationFrame.js"></script>
  9.                 <script type="text/javascript" src="Stats.js"></script>
  10.                 <script type="text/javascript" src="Three.js"></script>
  11.  
  12.                 <script type="text/javascript">
  13.                 var x = 0;
  14.                     origin = new THREE.Vector3(0, 0, 0),
  15.                     camera = null,
  16.                     scene = null,
  17.                     renderer = null,
  18.                     stats = null,
  19.                     sphere = null,
  20.                     point = null;
  21.  
  22.                 init();
  23.                 animate();
  24.  
  25.                 function init() {
  26.                         var material = new THREE.MeshBasicMaterial({color:0xcc0000,opacity:.5}),
  27.                             program = function (context) {
  28.                                 var PI2 = Math.PI * 2;
  29.  
  30.                                 context.beginPath();
  31.                                 context.arc(0, 0, 3, 0, PI2, true);
  32.                                 context.closePath();
  33.                                 context.fill();
  34.                             };
  35.  
  36.  
  37.                         // Initialize stats
  38.                         stats = new Stats();
  39.                         stats.domElement.style.position = 'absolute';
  40.                         stats.domElement.style.top = '0px';
  41.                         document.getElementById('container').appendChild(stats.domElement);
  42.  
  43.  
  44.                         // Set up the renderer
  45.                         renderer = new THREE.CanvasRenderer();
  46.                         renderer.setSize(window.innerWidth, window.innerHeight);
  47.                         document.getElementById('container').appendChild(renderer.domElement);
  48.  
  49.                         // Set up the scene
  50.                         scene = new THREE.Scene();
  51.  
  52.                         // Add our globe
  53.                         sphere = new THREE.Mesh(new THREE.SphereGeometry(100, 32, 32), material);
  54.                         sphere.position.x = 0;
  55.                         sphere.position.y = 0;
  56.                         sphere.position.z = 0;
  57.                         scene.addChild(sphere);
  58.  
  59.                         // Add a point over Washington DC (my city)
  60.                         point = new THREE.Particle(new THREE.ParticleCanvasMaterial({color: 0xF66312, program: program}));
  61.                         point.position.x = -79.63852123903702;
  62.                         point.position.y = 65.92898977682889;
  63.                         point.position.z = 18.332327780896797;
  64.                         scene.addChild(point);
  65.                
  66.                         // Set up the camera
  67.                         camera = new THREE.Camera(45, (window.innerWidth/window.innerHeight), 0.1, 500, sphere);
  68.                         camera.position.z = 300;
  69.  
  70.                         /**
  71.                          * When I set the 'useTarget' flag to false the 'lookAt' method of the camera no longer
  72.                          * works as intended.
  73.                          */
  74.                         camera.useTarget = false;
  75.  
  76.                         /**
  77.                          * The issue is here.
  78.                          *
  79.                          * When I set the 'up' vector of the camera (to rotate the view 90 degrees clockwise
  80.                          * about the x axis) the globe rotates half way and then inverts and rotates in
  81.                          * the opposite direction.
  82.                          *
  83.                          * I want to move the camera around the globe so points on the globe can have a
  84.                          * standardized reference point that makes sense to me.
  85.                          *
  86.                          * Aesthetically I'd like to have the globe rotating away from the user.
  87.                          */
  88.                         camera.up = new THREE.Vector3(0, 0, 1);
  89.                 }
  90.  
  91.                 function animate() {
  92.                         requestAnimationFrame(animate);
  93.  
  94.                         render();
  95.                         stats.update();
  96.                 }
  97.  
  98.                 function render() {
  99.                         x += 0.01;
  100.  
  101.                         camera.position.x = 300 * Math.sin(x) * Math.cos(0);
  102.                         camera.position.y = 300 * Math.sin(0);
  103.                         camera.position.z = 300 * Math.cos(x) * Math.cos(0);
  104.  
  105.                         /**
  106.                          * When the 'useTarget' flag is set to false, this method doesn't work.
  107.                          */
  108.                         camera.lookAt(origin);
  109.  
  110.                         renderer.render(scene, camera);
  111.                 }
  112.                 </script>
  113.         </body>
  114. </html>
create a new version of this paste RAW Paste Data