« Modèle:Premier cube » : différence entre les versions
Aller à la navigation
Aller à la recherche
Aucun résumé des modifications |
|||
Ligne 34 : | Ligne 34 : | ||
</html> | </html> | ||
</source> | </source> | ||
==Code javascript== | |||
===Le code=== | |||
<source lang = 'javascript'> | |||
//Création de la Scène | |||
var scene = new THREE.Scene(); | |||
//Création de la caméra | |||
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); | |||
//Création du renderer | |||
var renderer = new THREE.WebGLRenderer(); | |||
renderer.setSize( window.innerWidth, window.innerHeight ); | |||
document.body.appendChild( renderer.domElement ); | |||
//Création du cube | |||
var geometry = new THREE.BoxGeometry( 1, 1, 1 ); | |||
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); | |||
var cube = new THREE.Mesh( geometry, material ); | |||
scene.add( cube ); | |||
//Positionnement de la caméra | |||
camera.position.z = 5; | |||
//Fonction pour animer la scène | |||
function animate() | |||
{ | |||
requestAnimationFrame( animate ); | |||
cube.rotation.x += 0.01; | |||
cube.rotation.y += 0.01; | |||
renderer.render( scene, camera ); | |||
} | |||
//Lancement de l'animation | |||
animate(); | |||
</source> | |||
===Analyse du code javascript=== | |||
*Nous avons déjà vu [[Debuter_avec_three.js#Trois objets pour tout affichage utilisant Three.js|ici]] le code de la '''Scène''', de la '''caméra''' et du '''renderer'''. | |||
* Créer le cube | |||
* Faire un rendu de la scène | |||
* Animer le cube |
Version du 21 janvier 2018 à 17:45
Organisation des dossiers et fichiers
Fichier Index.html
C'est le fichier qui sera afficher dans le navigateur. Il contient :
- Le code HTML de la page,
- Le style CSS ou le lien vers la feuille de style .css,
- Les liens vers les fichiers javascript qui sont placés tout deux dans un sous dossier js/ de la racine du site. On peut organiser le site différemment, conserver la fichier three.js dans l'archive Three.js pour simplifier les mises à jours avec git.
- Le fichier three.js de la bibliothèque Three.js,
- Le fichier script.js où on va écrire le code javascript pour afficher le cube.
Exemple de code HTML de base pour afficher un cube avec Three.js :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Ma première application Three.js</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Code javascript
Le code
//Création de la Scène
var scene = new THREE.Scene();
//Création de la caméra
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//Création du renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//Création du cube
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
//Positionnement de la caméra
camera.position.z = 5;
//Fonction pour animer la scène
function animate()
{
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
//Lancement de l'animation
animate();
Analyse du code javascript
- Nous avons déjà vu ici le code de la Scène, de la caméra et du renderer.
- Créer le cube
- Faire un rendu de la scène
- Animer le cube