Mittwoch, 4. September 2013

Three.js - Getting started

You recently discovered three.js and saw some awesome 3D games. Now you want do build something with three.js yourself. This tutorial might help you with it.


First setup

Luckily we don't need the whole package from mrdoob. The docs are very helpful, but to bring our project to life we just need the build/three.min.js. jQuery isn't requiered as well, but for this tutorials, it is.

Structure

Creating an index.html our structure looks like this:

Minimum index.html

You want to see a 3D scene already, so just copy this into your index.html and you should get your scene. Even if it won't look like 3D, it is.

<html>
<html>
 <head>
  <script src="three/build/three.min.js"></script>
  <script src="jquery-1.10.2.min.js"></script>
    
  <script type="text/javascript">
     
   $(function() {
   
    //scene
    var scene = new THREE.Scene();
    //camera
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.z = 5;
    //renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    
      
    //show canvas
    $("#canvas-container").html(renderer.domElement);
      
   
    //cube
    var geometry = new THREE.CubeGeometry(1,1,1);
    var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
      
         
    //render scene
    var render = function () {
     requestAnimationFrame(render);
     renderer.render(scene, camera);
    };
      
    render();
      
   });
     
  </script>
    
 </head>
 <body style="background: black">
    
  <div id="canvas-container" style="position: absolute; left:0px; top:0px"></div>
    
 </body>
</html>

First Scene

If WebGL is supported, we get a blue square. Actually it is a blue cube, seen from the back!


What we need

We skipped the explanation, so here it's how it works.
  • A scene which contains all the objects we want to see.
  • A camera so we have a view on the scene.
  • A renderer who draws the scene. The render() is called periodically, so changes on the scene will be redrawn "immediately"

Camera Controls for Starters

For starters it is nice to move the camera via mouse control. There is a plugin OrbitControls.js which will do the job. I will keep the folder structure so you can find it easily in your three.js package.

To use it we need to include the OrbitControls.js and create the controls.

  <script src="three/examples/js/controls/OrbitControls.js"></script>
  
   
    //controls
    var controls = new THREE.OrbitControls( camera, renderer.domElement );
  

Here the whole script:
<html>
<html>
 <head>
  <script src="three/build/three.min.js"></script>
  <script src="three/examples/js/controls/OrbitControls.js"></script>
  <script src="jquery-1.10.2.min.js"></script>
    
  <script type="text/javascript">
     
   $(function() {
   
    //scene
    var scene = new THREE.Scene();
    //camera
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.z = 5;
    //renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    //controls
    var controls = new THREE.OrbitControls( camera, renderer.domElement );
      
    //show canvas
    $("#canvas-container").html(renderer.domElement);
      
   
    //cube
    var geometry = new THREE.CubeGeometry(1,1,1);
    var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
      
         
    //render scene
    var render = function () {
     requestAnimationFrame(render);
     renderer.render(scene, camera);
    };
      
    render();
      
   });
     
  </script>
    
 </head>
 <body style="background: black">
    
  <div id="canvas-container" style="position: absolute; left:0px; top:0px"></div>
    
 </body>
</html>


Keine Kommentare:

Kommentar veröffentlichen