The first workshop at the first ever FutureJS conference in Barcelona. From Three.js Hello World to building your first interactive 3D app, to connecting your web app with the Internet of Things.
18. Three.js starts with:
● Scene
● Renderer (we’ll always use WebGL)
● Camera, Objects, Materials, Lights
19. var scene = new THREE.Scene();
var camera =
new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight,
0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial(
{ color: 0x00ff00, wireframe: true } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
cube.rotation.x += 0.01;
cube.position.z += 0.01;
}
render(); http://codepen.io/rossmckegney/full/lcAta
21. MeshLambertMaterial
For non-shiny materials, lit per vertex
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshLambertMaterial(
{ ambient: 'blue' } );
var cube = new THREE.Mesh( geometry, material );
cube.overdraw = true;
scene.add( cube );
var ambientLight = new THREE.AmbientLight('white');
scene.add(ambientLight);
http://codepen.io/rossmckegney/full/DaohB
22. MeshPhongMaterial
For shiny materials, lit per pixel
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshPhongMaterial(
{ color: 'blue' } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
var directionalLight = new THREE.DirectionalLight( 'white', 0.5 );
directionalLight.position.set( 0, 0, 1 );
scene.add( directionalLight );
http://codepen.io/rossmckegney/full/lkwnI
23. Tweak 2: Load model
Three.js comes with loaders for JSON,
OBJ, Collada, STL, etc
34. Assisted Loading
In a game engine (especially for the web)
you need fine-grained control over loading
35. Assisted Loading
You might load everything upfront
(loading bar), or defer loading. We need a
way to trigger asset/object loading and
bind to different stages of load.
43. 3D Scans
Useful not only for
modelled 3D, but also
for 3D scans.
http://www.juanvilla.es
http://bossfight.me
44. Plays well with others!
Three.js and Verold work
nicely for simple demos,
or can be scaled up to
robust frameworks like
Angular.js
http://brained.io
45. Offline too!
Web can be used offline
or online. e.g. BPush kiosk
by James White designs.
http://ibptouch.dyndns.org/?range=26
46. And of course games :)
The Verold engine is
well suited to simple
games, seamlessly
integrated with your
website.
http://thooloo.com
47. OK… so let’s add some 3D to a page!
The goal for this exercise is to walk you
through adding a 3D model to a canvas on
your web app.
48. Steps:
1. Upload 3D model
2. Setup scene and materials
3. Create your responsive web app
4. Load the Verold engine and model
5. Setup controls and widgets
57. Download the Leap Motion client app
https://www.leapmotion.com/setup
58. Get LeapJS
Learn more about LeapJS at https://developer.
leapmotion.com/leapjs/welcome
59. Verold Leap Template
Grab the Verold Leap Template at
http://studio.verold.com/projects/5357f75685ce9f0200000058
60. VeroldController Component
Attach this to your Scene, and then it will
establish a connection to Leap and pass the
connection as the ‘leapReady’ event.
// Connect to Leap
var leap = new Leap.Controller({host: 'localhost', port: 6437});
leap.connect();
// This allows us to maintain the connection even whilst in an iFrame.
leap.setBackground(true);
// Pass the leap controller to all listeners
this.events.trigger("leapReady", leap);
61. VeroldListener Component
Sample component to show you how to listen to
Leap events from the LeapController.
Component.prototype.init = function() {
this.listenTo(this.events, "leapReady", this.initLeap);
};
Component.prototype.initLeap = function(leap) {
this.leap = leap;
};