<canvas>
d'html5
<html>
<head>
<title>Mon appli WebGL</title>
<style>canvas { width: 100%; height: 100% }</style>
<script src="./../js/Three.min.js" </script>
</head>
<body>
<script>
Ici va notre code javascript avec WebGL et Three.js
</script>
</body>
</html>
Créer la méthode de rendu (WebGLRenderer)
var renderer = new THREE.WebGLRenderer();//Des paramètres (voir en TP)
renderer.setSize(document.body.clientWidth,
document.body.clientHeight);
L'attacher au document html
document.body.appendChild(renderer.domElement);
Définir la couleur de fond
renderer.setClearColorHex(0xAAAAAA, 1.0);
renderer.clear();
var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
On retrouve les paramètres intrinsèquesde la caméra
PerspectiveCamera( fov, aspect, near, far );
On retrouve les paramètres extrinsèques de la caméra
Comme tout objet 3D, on peut définir
camera.position.set(10,10,300);
camera.rotation.set(0,0,0);
camera.up = new THREE.Vector3( 0 ,1, 0 );
camera.lookAt(new THREE.Vector3( 0 ,0, 0 );
On crée un objet Scene
var scene = new THREE.Scene();
On crée un maillage (notre objet 3D)
var sphere = new THREE.Mesh(new THREE.SphereGeometry(50,50,50),
new THREE.MeshBasicMaterial({color: 0xFF0000}));
Et on l'ajoute à la scène
scene.add(sphere);
Contient une géométrie et un matériau
Mesh(geometry, material)
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-1,1,0));
geometry.vertices.push(new THREE.Vector3(-1,-1,0));
geometry.vertices.push(new THREE.Vector3(1,-1,0));
geometry.faces.push( new THREE.Face3(0,1,2));
geometry = new THREE.SphereGeometry(50,50,50);
var loader = new THREE.JSONLoader();
loader.load( "Bunny.js", function(geometry)
{
...
});
var materiau = new THREE.MeshBasicMaterial({color: 0xFF0000}));
var materiau = new THREE.MeshLambertMaterial({color: 0xFF0000}));
var materiau = new THREE.MeshPhongMaterial({color: 0xFF0000}));
var renderer = new THREE.WebGLRenderer();
renderer.setSize(document.body.clientWidth, document.body.clientHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColorHex(0xAAAAAA, 1.0);
renderer.clear();
var width = renderer.domElement.width;
var height = renderer.domElement.height;
var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
camera.position.z = 300;
var scene = new THREE.Scene();
var sphere = new THREE.Mesh(new THREE.SphereGeometry(50,50,50),
new THREE.MeshBasicMaterial({color: 0x0055ff}));
scene.add(sphere);
Dessions la scène depuis la caméra
renderer.render(scene, camera);
Ajoutons une lumière
var light = new THREE.PointLight();
light.position.set( 80, 150, 250 );
scene.add(light);
On retrouve les types de lumières classiques en informatique graphique
var light = new THREE.PointLight();
var light = new THREE.SpotLight();
var light = new THREE.AmbientLight();
var light = new THREE.HemisphereLight();
Un matériau qui interagit avec la lumière
THREE.MeshPhongMaterial( { ambient: 0x000000,
color: 0x0055ff,
specular: 0x555555,
shininess: 50 } ) );
window.requestAnimationFrame(animate, renderer.domElement);
function animate(t) {
cube.rotation.set(1,t/800,1);
renderer.render(scene, camera);
window.requestAnimationFrame(animate, renderer.domElement);
};
var controls = new OrbitControls( camera , renderer.domElement );