Intro to ThreeJS... using ThreeJS
20 Aug 2014I’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(!instance.active || sample_defaults.paused) return;
mesh.rotation.y += 0.008;
renderer.render( scene, camera );
}
animate();
return instance;
}
};
})();By tagging slides with a data-sample attribute, the corresponding javascript example kicks in and does its WebGL magic.
<section>
<canvas data-sample="spinning_cube" style="display:inline"></canvas>
</section>See all the ThreeJS javascript samples here.
Check out the actual Intro to ThreeJS Slideshow. Source Code.