Intro to ThreeJS... using ThreeJS

I’m a big believer in learning by doing. So when I set out to learn ThreeJS, I did it by making this sweet slide deck. Click through to check out details.

Using reveal.js, an html framework for presentations, I added self-contained javascript ThreeJS samples on each slide to demonstrate a particular feature of ThreeJS.

Here is the standard spinning cube example:

(function() {

  window.samples.spinning_cube = {

    initialize: function(canvas) {
      var scene = new THREE.Scene();

      var camera = new THREE.PerspectiveCamera( 30, sample_defaults.width / sample_defaults.height, 1, 1000 );
      camera.position.set(0, 3, 7);
      camera.lookAt( new THREE.Vector3(0,0,0));

      var scale = 2.5;
      var geometry = new THREE.CubeGeometry( scale, scale, scale );
      var material = new THREE.MeshBasicMaterial( { color: 0xdddddd } );

      var mesh = new THREE.Mesh( geometry, material );
      scene.add( mesh );

      var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
      renderer.setSize( sample_defaults.width, sample_defaults.height );

      var instance = { active: false };
      function animate() {
        requestAnimationFrame( animate, canvas );
        if(! || sample_defaults.paused) return;

        mesh.rotation.y += 0.008;

        renderer.render( scene, camera );

      return instance;

By tagging slides with a data-sample attribute, the corresponding javascript example kicks in and does its WebGL magic.

  <canvas data-sample="spinning_cube" style="display:inline"></canvas>

See all the ThreeJS javascript samples here.

Check out the actual Intro to ThreeJS Slideshow. Source Code.

comments powered by Disqus