Modèle:Premier cube - Historique des versions

Acryline : /* Scène caméra et renderer */

2022-03-25T12:24:01Z

Scène caméra et renderer

← Version précédente		Version du 25 mars 2022 à 14:24
Ligne 78 :		Ligne 78 :
	* Nous avons déjà vu [[Debuter_avec_three.js#Trois objets pour tout affichage utilisant Three.js\|ici]] le code de la '''[[Scenes\|Scène]]''', de la '''[[Cameras\|caméra]]''' et du '''[[Renderers\|renderer]]'''.		* Nous avons déjà vu [[Debuter_avec_three.js#Trois objets pour tout affichage utilisant Three.js\|ici]] le code de la '''[[Scenes\|Scène]]''', de la '''[[Cameras\|caméra]]''' et du '''[[Renderers\|renderer]]'''.
	* On avance la caméra de 5 unités avec le code :		* On avance la caméra de 5 unités avec le code :
	<~~source~~ lang ='javascript'>		<syntaxhighlight lang ='javascript'>
	camera.position.z = 5;		camera.position.z = 5;
	</~~source~~>		</syntaxhighlight>

	====Créer le cube====		====Créer le cube====

Acryline : /* Animer le cube */

2022-03-25T12:23:40Z

Animer le cube

← Version précédente		Version du 25 mars 2022 à 14:23
Ligne 104 :		Ligne 104 :
	====Animer le cube====		====Animer le cube====
	On ajoute ces lignes juste avant renderer.render '''dans la fonction animate''' pour définir les [[Définitions#Rotation\|rotations]] .		On ajoute ces lignes juste avant renderer.render '''dans la fonction animate''' pour définir les [[Définitions#Rotation\|rotations]] .
	<~~source~~ lang='javascript'>		<syntaxhighlight lang='javascript'>
	cube.rotation.x += 0.1;		cube.rotation.x += 0.1;
	cube.rotation.y += 0.1;		cube.rotation.y += 0.1;
	</~~source~~>		</syntaxhighlight>

	Ces lignes seront exécutées 60 fois par seconde pour donner une rotation du cube.		Ces lignes seront exécutées 60 fois par seconde pour donner une rotation du cube.

	Tout ce qui se déplace dans la scène doit être généré dans la boucle. '''On peut ajouter des appels de fonction dans la fonction animate''' pour réduire le nombre de lignes.		Tout ce qui se déplace dans la scène doit être généré dans la boucle. '''On peut ajouter des appels de fonction dans la fonction animate''' pour réduire le nombre de lignes.

Acryline : /* Faire un rendu de la scène */

2022-03-25T12:23:25Z

Faire un rendu de la scène

← Version précédente		Version du 25 mars 2022 à 14:23
Ligne 92 :		Ligne 92 :

	Pour faire cela il faut appeler un [[WebGLRenderer#render\|render]]() ou une boucle d'animation (une animate loop).		Pour faire cela il faut appeler un [[WebGLRenderer#render\|render]]() ou une boucle d'animation (une animate loop).
	<~~source~~ lang ='javascript'>		<syntaxhighlight lang ='javascript'>
	function animate() {		function animate() {
	requestAnimationFrame( animate );		requestAnimationFrame( animate );
Ligne 98 :		Ligne 98 :
	}		}
	animate();		animate();
	</~~source~~>		</syntaxhighlight>

	Cela créer une boucle qui fait que le renderer est dessiné chaque fois que l'écran est rafraîchi (normalement 60 fois par seconde).		Cela créer une boucle qui fait que le renderer est dessiné chaque fois que l'écran est rafraîchi (normalement 60 fois par seconde).

Acryline : /* script.js */

2022-03-25T12:23:05Z

script.js

← Version précédente		Version du 25 mars 2022 à 14:23
Ligne 38 :		Ligne 38 :
	===script.js===		===script.js===
	{\|		{\|
	\|style="width: 50%;"\|<~~source~~ lang = 'javascript'>		\|style="width: 50%;"\|<syntaxhighlight lang = 'javascript'>
	//Créer une Scène		//Créer une Scène
	var scene = new THREE.Scene();		var scene = new THREE.Scene();
Ligne 70 :		Ligne 70 :
	animate();		animate();

	</~~source~~>		</syntaxhighlight>
	\| style="width: 40%; min-height:100%;"\|<iframe key="webgl" path="/cogito/OSWiki/resources/3D/tests_exemples/webgl001/index.php" />		\| style="width: 40%; min-height:100%;"\|<iframe key="webgl" path="/cogito/OSWiki/resources/3D/tests_exemples/webgl001/index.php" />
	\|}		\|}

Acryline : /* index.html */

2022-03-25T12:22:41Z

index.html

← Version précédente		Version du 25 mars 2022 à 14:22
Ligne 20 :		Ligne 20 :
	===index.html===		===index.html===
	Exemple de code HTML de base pour afficher un cube avec Three.js :		Exemple de code HTML de base pour afficher un cube avec Three.js :
	<~~source~~ lang='html5'>		<syntaxhighlight lang='html5'>
	<!DOCTYPE html>		<!DOCTYPE html>
	<html>		<html>
Ligne 33 :		Ligne 33 :
	</body>		</body>
	</html>		</html>
	</~~source~~>		</syntaxhighlight>

	==Code javascript==		==Code javascript==

Acryline : /* script.js */

2022-03-24T14:20:45Z

script.js

← Version précédente		Version du 24 mars 2022 à 16:20
Ligne 71 :		Ligne 71 :

	</source>		</source>
	\| style="width: 40%; min-height:100%;"\|~~{{Spécial:IframePage~~/~~Cube}}~~		\| style="width: 40%; min-height:100%;"\|<iframe key="webgl" path="/cogito/OSWiki/resources/3D/tests_exemples/webgl001/index.php" />
	\|}		\|}

Acryline : /* Le code : script.js */

2018-02-13T09:37:17Z

Le code : script.js

← Version précédente		Version du 13 février 2018 à 11:37
Ligne 36 :		Ligne 36 :

	==Code javascript==		==Code javascript==
	===~~Le code :~~ script.js===		===script.js===
	{\|		{\|
	\|style="width: 50%;"\|<source lang = 'javascript'>		\|style="width: 50%;"\|<source lang = 'javascript'>

Acryline : /* Fichier Index.html */

2018-02-13T09:36:45Z

Fichier Index.html

← Version précédente		Version du 13 février 2018 à 11:36
Ligne 18 :		Ligne 18 :
	**Le fichier '''script.js''' où on va écrire le code javascript pour afficher le cube.		**Le fichier '''script.js''' où on va écrire le code javascript pour afficher le cube.

			===index.html===
	Exemple de code HTML de base pour afficher un cube avec Three.js :		Exemple de code HTML de base pour afficher un cube avec Three.js :
	<source lang='html5'>		<source lang='html5'>

Acryline : /* Organisation des dossiers et fichiers */

2018-02-13T09:35:49Z

Organisation des dossiers et fichiers

← Version précédente		Version du 13 février 2018 à 11:35
Ligne 5 :		Ligne 5 :
	***style.css		***style.css
	**js		**js
	***script.js		***[[#script.js\|script.js]]
	***[https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js three.js]		***[https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js three.js]
	**index.html		**[[#index.html\|index.html]]
	}}		}}

Acryline : /* Fichier Index.html */

2018-02-13T09:34:49Z

Fichier Index.html

← Version précédente		Version du 13 février 2018 à 11:34
Ligne 26 :		Ligne 26 :
	<link rel="stylesheet" href="css/style.css">		<link rel="stylesheet" href="css/style.css">
	<title>Ma première application Three.js</title>		<title>Ma première application Three.js</title>
	~~<style>~~
	~~body { margin: 0; }~~
	~~canvas { width: 100%; height: 100% }~~
	~~</style>~~
	</head>		</head>
	<body>		<body>

Modèle:Premier cube - Historique des versions

Acryline : /* Scène caméra et renderer */

Acryline : /* Animer le cube */

Acryline : /* Faire un rendu de la scène */

Acryline : /* script.js */

Acryline : /* index.html */

Acryline : /* script.js */

Acryline : /* Le code : script.js */

Acryline : /* Fichier Index.html */

Acryline : /* Organisation des dossiers et fichiers */

Acryline : /* Fichier Index.html */

Acryline : /* Scène caméra et renderer */

Acryline : /* Animer le cube */

Acryline : /* Faire un rendu de la scène */

Acryline : /* script.js */

Acryline : /* index.html */

Acryline : /* script.js */

Acryline : /* Le code : script.js */

Acryline : /* Fichier Index.html */

Acryline : /* Organisation des dossiers et fichiers */

Acryline : /* Fichier Index.html */