Maël Nison - Epitech 2014
Nov 15, 2011
C'est :
Faire tourner des chiens autour du curseur
Contenu dynamique, ère Ajax
Application enrichies, Google Apps
3D !
Deux prérequis :
Implémentation Javascript de l'API OpenGL ES2
Cela inclu également (via le langage GLSL) :
Code chargé du préprocessing des vertices (position etc)
Code chargé du postprocessing des faces (couleur etc)
(et par extension d'OpenGL)
Ce sont des inconvénients bloquants pour les nouveaux utilisateurs
Three.js englobe trois éléments basiques :
Les objets 3D sont eux-même composés de deux autres éléments :
Les objets regroupant ces deux éléments sont appelés des meshes
D'autres types d'objets existent. Ex : les caméras
Pour afficher une sphère, on aura besoin :
var renderer = new THREE.WebGLRenderer(); renderer.setSize(500, 500); document.body.appendChild(renderer.domElement); var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer(); renderer.setSize(500, 500); document.body.appendChild(renderer.domElement); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, 1, .1, 10000); scene.add(camera);
var renderer = new THREE.WebGLRenderer(); renderer.setSize(500, 500); document.body.appendChild(renderer.domElement); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, 1, .1, 10000); scene.add(camera); var geometry = new THREE.SphereGeometry(10, 20, 20); var material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh);
var renderer = new THREE.WebGLRenderer(); renderer.setSize(500, 500); document.body.appendChild(renderer.domElement); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, 1, .1, 10000); scene.add(camera); var geometry = new THREE.SphereGeometry(10, 20, 20); var material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); (function loop() { window.requestAnimationFrame(loop); renderer.render(scene, camera); }()); // <-- Ne faites pas attention à cette syntaxe ;)
var renderer = new THREE.WebGLRenderer(); renderer.setSize(500, 500); document.body.appendChild(renderer.domElement); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, 1, .1, 10000); camera.translateZ(100); // <-- On recule la caméra ! scene.add(camera); var geometry = new THREE.SphereGeometry(10, 20, 20); var material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); (function loop() { requestAnimFrame(loop); renderer.render(scene, camera); }());
var renderer = new THREE.WebGLRenderer(); document.body.appendChild(renderer.domElement); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, 1, .1, 10000); camera.translateZ(100); scene.add(camera); var light = new THREE.PointLight(0xffffff); // <-- On créer un spot light.translateZ(100); // <-- Même emplacement que la caméra scene.add(light); var geometry = new THREE.SphereGeometry(10, 20, 20); var material = new THREE.MeshPhongMaterial({ color: 0xff0000, shading: THREE.FlatShading }); // <-- Pour voir les effets var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); (function loop() { requestAnimFrame(loop); renderer.render(scene, camera); }());
var renderer = new THREE.WebGLRenderer(); document.body.appendChild(renderer.domElement); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, 1, .1, 10000); camera.translateZ(100); scene.add(camera); var light = new THREE.PointLight(0xffffff); light.translateZ(100); scene.add(light); var geometry = new THREE.SphereGeometry(10, 20, 20); var material = new THREE.MeshPhongMaterial({ color: 0xff0000, shading: THREE.FlatShading }); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); (function loop() { requestAnimFrame(loop); mesh.rotation.x += .02; // <-- juste ça, mesh.rotation.y += .02; // <-- et ça ! renderer.render(scene, camera); }());