Debuter avec three.js - Historique des versions

Acryline le 25 mars 2022 à 12:26

2022-03-25T12:26:04Z

← Version précédente		Version du 25 mars 2022 à 14:26
Ligne 33 :		Ligne 33 :

	* '''Code javascript''' pour créer une nouvelle scène :		* '''Code javascript''' pour créer une nouvelle scène :
	<~~source~~ lang ='javascript'>		<syntaxhighlight lang ='javascript'>
	var scene = new THREE.Scene();		var scene = new THREE.Scene();
	</~~source~~>		</syntaxhighlight>

	==Une CAMERA==		==Une CAMERA==
Ligne 44 :		Ligne 44 :

	'''Exemple de code pour créer une caméra '''		'''Exemple de code pour créer une caméra '''
	<~~source~~ lang = 'javascript'>		<syntaxhighlight lang = 'javascript'>
	var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );		var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
	</~~source~~>		</syntaxhighlight>

	==Un RENDERER==		==Un RENDERER==
Ligne 52 :		Ligne 52 :

	Exemple de code Javascript pour créer un Renderer :		Exemple de code Javascript pour créer un Renderer :
	<~~source~~ lang = 'javascript'>		<syntaxhighlight lang = 'javascript'>
	var renderer = new THREE.WebGLRenderer();		var renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );		renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );		document.body.appendChild( renderer.domElement );
	</~~source~~>		</syntaxhighlight>

	*Pour commencer, on va créer un [[WebGLRenderer]]. Three.js propose d'autres [[Autres Renderers\|renderers]] pour les anciens navigateurs et pour ceux qui ne supportent pas WebGL.		*Pour commencer, on va créer un [[WebGLRenderer]]. Three.js propose d'autres [[Autres Renderers\|renderers]] pour les anciens navigateurs et pour ceux qui ne supportent pas WebGL.
	*Pour définir la largeur et la hauteur de l'espace rendu par l'application, on utilise [[Documentation_Javascript_associée#window.innerWidth\|window.innerWidth]] et [[Documentation_Javascript_associée#window.innerheigh\|window.innerHeight]] ou des fractions de ces valeurs.		*Pour définir la largeur et la hauteur de l'espace rendu par l'application, on utilise [[Documentation_Javascript_associée#window.innerWidth\|window.innerWidth]] et [[Documentation_Javascript_associée#window.innerheigh\|window.innerHeight]] ou des fractions de ces valeurs.
	* Pour utiliser une plus faible définition on ajoute '''false''' en paramètre à la fonction comme ceci :		* Pour utiliser une plus faible définition on ajoute '''false''' en paramètre à la fonction comme ceci :
	<~~source~~ lang='javascript'>		<syntaxhighlight lang='javascript'>
	renderer.setSize( window.innerWidth, window.innerHeight,false );		renderer.setSize( window.innerWidth, window.innerHeight,false );
	</~~source~~>		</syntaxhighlight>
	* Pour finir on ajoute l'élement renderer au document HTML. Le renderer utilise un élement [[Définitions#Canvas\|<canvas>]] pour afficher la scène.		* Pour finir on ajoute l'élement renderer au document HTML. Le renderer utilise un élement [[Définitions#Canvas\|<canvas>]] pour afficher la scène.
	* On peut ajouter un paramètre '''alpha''' pour rendre le fond des objets tranparents :		* On peut ajouter un paramètre '''alpha''' pour rendre le fond des objets tranparents :
	<~~source~~ lang='javascript'>		<syntaxhighlight lang='javascript'>
	var renderer = new THREE.WebGLRenderer({alpha: true});		var renderer = new THREE.WebGLRenderer({alpha: true});
	</~~source~~>		</syntaxhighlight>

	=Afficher un cube=		=Afficher un cube=

	{{Modèle:Premier cube}}		{{Modèle:Premier cube}}

Acryline : /* Un RENDERER */

2018-01-21T18:35:41Z

Un RENDERER

← Version précédente		Version du 21 janvier 2018 à 20:35
Ligne 59 :		Ligne 59 :

	*Pour commencer, on va créer un [[WebGLRenderer]]. Three.js propose d'autres [[Autres Renderers\|renderers]] pour les anciens navigateurs et pour ceux qui ne supportent pas WebGL.		*Pour commencer, on va créer un [[WebGLRenderer]]. Three.js propose d'autres [[Autres Renderers\|renderers]] pour les anciens navigateurs et pour ceux qui ne supportent pas WebGL.
	*Pour définir la largeur et la hauteur de l'espace rendu par l'application, on utilise [[Documentation_Javascript_associée#window.innerWidth\|window.innerWidth]] et Documentation_Javascript_associée#window.innerheigh\|window.innerHeight]] ou des fractions de ces valeurs.		*Pour définir la largeur et la hauteur de l'espace rendu par l'application, on utilise [[Documentation_Javascript_associée#window.innerWidth\|window.innerWidth]] et [[Documentation_Javascript_associée#window.innerheigh\|window.innerHeight]] ou des fractions de ces valeurs.
	* Pour utiliser une plus faible définition on ajoute '''false''' en paramètre à la fonction comme ceci :		* Pour utiliser une plus faible définition on ajoute '''false''' en paramètre à la fonction comme ceci :
	<source lang='javascript'>		<source lang='javascript'>

Acryline : /* Trois objets pour tout affichage utilisant Three.js */

2018-01-21T18:29:15Z

Trois objets pour tout affichage utilisant Three.js

← Version précédente		Version du 21 janvier 2018 à 20:29
Ligne 30 :		Ligne 30 :
	==Une SCENE==		==Une SCENE==

	*'''Définition''' : La [[Scenes\|SCENE]] est l'espace 3D dans lequel seront placés les objets, les caméras et l'éclairage. Elle peut avoir n'importe quelles dimensions, tout dépend des besoins.		*'''Définition''' : La [[Scenes\|SCENE]] est l'espace 3D dans lequel seront placés les [[Objects\|objets]], les [[Cameras\|caméras]] et [[Lights\|l'éclairage]]. Elle peut avoir n'importe quelles dimensions, tout dépend des besoins.

	* '''Code javascript''' pour créer une nouvelle scène :		* '''Code javascript''' pour créer une nouvelle scène :
Ligne 38 :		Ligne 38 :

	==Une CAMERA==		==Une CAMERA==
	Il existe plusieurs types de caméra dans three.js, ici on va commencer par utiliser une PerspectiveCamera.		Il existe plusieurs types de [[Cameras\|caméra]] dans three.js, ici on va commencer par utiliser une [[PerspectiveCamera]].
	* '''premier argument''' : le champs de vue : FOV est l'étendu de la scène affichée à tout moment, cette valeur est exprimée en degrés.		* '''premier argument''' : le champs de vue : FOV est l'étendu de la scène affichée à tout moment, cette valeur est exprimée en degrés.
	* '''deuxième argument''' : aspect ratio, ici largeur/hauteur de la fenêtre.		* '''deuxième argument''' : aspect ratio, ici largeur/hauteur de la fenêtre.
	* les deux derniers arguments sont respectivement le point le plus proche et le point le plus éloignés vus dans la scènes. Au delà rien n'est affiché.		* les deux derniers arguments sont respectivement le '''point le plus proche''' et le '''point le plus éloignés''' vus dans la scènes. Au delà rien n'est affiché.

	'''Exemple de code pour créer une caméra '''		'''Exemple de code pour créer une caméra '''
Ligne 58 :		Ligne 58 :
	</source>		</source>

	*Pour commencer, on va créer un WebGLRenderer. Three.js propose d'autres ~~renderer~~ pour les anciens navigateurs et pour ceux qui ne supportent pas WebGL.		*Pour commencer, on va créer un [[WebGLRenderer]]. Three.js propose d'autres [[Autres Renderers\|renderers]] pour les anciens navigateurs et pour ceux qui ne supportent pas WebGL.
	*Pour définir la largeur et la hauteur de l'espace rendu par l'application, on utilise window.innerWidth et window.innerHeight ou des fractions de ces valeurs.		*Pour définir la largeur et la hauteur de l'espace rendu par l'application, on utilise [[Documentation_Javascript_associée#window.innerWidth\|window.innerWidth]] et Documentation_Javascript_associée#window.innerheigh\|window.innerHeight]] ou des fractions de ces valeurs.
	* Pour utiliser une plus faible définition on ajoute false en paramètre à la fonction comme ceci :		* Pour utiliser une plus faible définition on ajoute '''false''' en paramètre à la fonction comme ceci :
	<source lang='javascript'>		<source lang='javascript'>
	renderer.setSize( window.innerWidth, window.innerHeight,false );		renderer.setSize( window.innerWidth, window.innerHeight,false );
	</source>		</source>
	* Pour finir on ajoute l'élement renderer au document HTML. Le renderer utilise un élement <canvas> pour afficher la scène.		* Pour finir on ajoute l'élement renderer au document HTML. Le renderer utilise un élement [[Définitions#Canvas\|<canvas>]] pour afficher la scène.
	* On peut ajouter un paramètre alpha pour rendre le fond des objets tranparents :		* On peut ajouter un paramètre '''alpha''' pour rendre le fond des objets tranparents :
	<source lang='javascript'>		<source lang='javascript'>
	var renderer = new THREE.WebGLRenderer({alpha: true});		var renderer = new THREE.WebGLRenderer({alpha: true});

Acryline : /* Une SCENE */

2018-01-21T17:53:45Z

Une SCENE

← Version précédente		Version du 21 janvier 2018 à 19:53
Ligne 30 :		Ligne 30 :
	==Une SCENE==		==Une SCENE==

	*'''Définition''' : La SCENE est l'espace 3D dans lequel seront placés les objets, les caméras et l'éclairage. Elle peut avoir n'importe quelles dimensions, tout dépend des besoins.		*'''Définition''' : La [[Scenes\|SCENE]] est l'espace 3D dans lequel seront placés les objets, les caméras et l'éclairage. Elle peut avoir n'importe quelles dimensions, tout dépend des besoins.

	* '''Code javascript''' pour créer une nouvelle scène :		* '''Code javascript''' pour créer une nouvelle scène :

Acryline : /* Une SCENE */

2018-01-21T17:27:32Z

Une SCENE

← Version précédente		Version du 21 janvier 2018 à 19:27
Ligne 30 :		Ligne 30 :
	==Une SCENE==		==Une SCENE==

	*'''Définition''' : C'est l'espace 3D dans lequel seront placés les objets, les caméras et l'éclairage. Elle peut avoir n'importe quelles dimensions, tout dépend des besoins.		*'''Définition''' : La SCENE est l'espace 3D dans lequel seront placés les objets, les caméras et l'éclairage. Elle peut avoir n'importe quelles dimensions, tout dépend des besoins.

	* '''Code javascript''' pour créer une nouvelle scène :		* '''Code javascript''' pour créer une nouvelle scène :

Acryline le 21 janvier 2018 à 17:26

2018-01-21T17:26:42Z

← Version précédente		Version du 21 janvier 2018 à 19:26
Ligne 1 :		Ligne 1 :
	[[Définitions#Three.js\|Three.js]] est une bibliothèque [[Définitions#JavaScript\|Javascript]] pour créer des scènes 3D dans un navigateur web. Elle peut être utilisée avec la balise [[Définitions#Canvas\|canvas]] du [[Définitions#HTML5\|HTLM5]] sans avoir besoin d'un plugin. Le code source est hébergé sur le [ https://github.com/mrdoob/three.js/ compte GitHub de son créateur '''mrDoob'''].		[[Définitions#Three.js\|Three.js]] est une bibliothèque [[Définitions#JavaScript\|Javascript]] pour créer des scènes 3D dans un navigateur web. Elle peut être utilisée avec la balise [[Définitions#Canvas\|canvas]] du [[Définitions#HTML5\|HTLM5]] sans avoir besoin d'un plugin. Le code source est hébergé sur le [https://github.com/mrdoob/three.js/ compte GitHub de son créateur '''mrDoob'''].

	=Pré-requis=		=Pré-requis=
Ligne 9 :		Ligne 9 :

	==Three.js==		==Three.js==
	Pour télécharger les '''bibliothèques Javascript de Three.js''' rendez vous sur [https://threejs.org/ la page officiel de Three.js], ou sur le compte [ https://github.com/mrdoob/three.js/ ~~Github de~~ mrDoob.]		Pour télécharger les '''bibliothèques Javascript de Three.js''' rendez vous sur [https://threejs.org/ la page officiel de Three.js], ou sur le compte Github de [https://github.com/mrdoob/three.js/ mrDoob.]

	==Pour les tests==		==Pour les tests==
	=== Le navigateur ===		=== Le navigateur ===
	'''~~Navigateurs~~ qui supportent WebGl :'''		'''Les navigateurs qui supportent WebGl sont:'''

	Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 and Microsoft Edge.		Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 and Microsoft Edge.

	Certaines fonctionnalités utilisées par Three.js peuvent nécessiter des [[Définitions#polyfills\|polyfills]].		Certaines fonctionnalités utilisées par Three.js peuvent nécessiter des [[Définitions#polyfills\|polyfills]].
	=== Serveur Web ===		=== Serveur Web ===
	Si vous n'utilisez que des géométries procédurales et ne chargez pas de textures, les pages Web devraient fonctionner directement depuis le système de fichiers, il suffit de double-cliquer sur le fichier HTML dans un gestionnaire de fichiers et il devrait apparaître dans le navigateur (vous verrez le fichier: ///votreFile. html dans la barre d'adresse).		Si vous n'utilisez que des géométries procédurales (création dynamique) et ne chargez pas de textures, les pages Web devraient fonctionner directement depuis le système de fichiers, il suffit de double-cliquer sur le fichier HTML dans un gestionnaire de fichiers et il devrait apparaître dans le navigateur (vous verrez le fichier: ///votreFile. html dans la barre d'adresse).

	Pour d'autres utilisations, il faudra installer '''un serveur Web comme Apache''' en local ou sur un serveur distant.		Pour d'autres utilisations, il faudra installer '''un serveur Web comme [https://en.wikipedia.org/wiki/Apache_HTTP_Server Apache]''' en local ou sur un serveur distant.

	Vous trouverez plus d'informations en anglais sur cette page : https://threejs.org/docs/#manual/introduction/How-to-run-thing-locally		Vous trouverez plus d'informations en anglais sur cette page : https://threejs.org/docs/#manual/introduction/How-to-run-thing-locally

	Vous trouverez des tutoriels sur internet pour installer un serveur Web ~~pour~~ votre système d'exploitation.		Vous trouverez des tutoriels sur internet pour installer un serveur Web en fonction de votre système d'exploitation.

	=Trois objets pour tout affichage utilisant Three.js=		=Trois objets pour tout affichage utilisant Three.js=

Acryline le 21 janvier 2018 à 17:09

2018-01-21T17:09:50Z

← Version précédente		Version du 21 janvier 2018 à 19:09
Ligne 1 :		Ligne 1 :
	Three.js est une bibliothèque JavaScript pour créer des scènes 3D dans un navigateur web. Elle peut être utilisée avec la balise canvas du HTML5 sans avoir besoin d'un plugin. Le code source est hébergé sur le [ https://github.com/mrdoob/three.js/ compte GitHub de son créateur '''mrDoob'''].		[[Définitions#Three.js\|Three.js]] est une bibliothèque [[Définitions#JavaScript\|Javascript]] pour créer des scènes 3D dans un navigateur web. Elle peut être utilisée avec la balise [[Définitions#Canvas\|canvas]] du [[Définitions#HTML5\|HTLM5]] sans avoir besoin d'un plugin. Le code source est hébergé sur le [ https://github.com/mrdoob/three.js/ compte GitHub de son créateur '''mrDoob'''].

	=Pré-requis=		=Pré-requis=

Acryline : /* Afficher un cube */

2018-01-21T15:10:43Z

Afficher un cube

← Version précédente		Version du 21 janvier 2018 à 17:10
Ligne 70 :		Ligne 70 :

	=Afficher un cube=		=Afficher un cube=

			{{Modèle:Premier cube}}

Acryline : /* Un RENDERER */

2018-01-21T15:09:10Z

Un RENDERER

← Version précédente		Version du 21 janvier 2018 à 17:09
Ligne 48 :		Ligne 48 :

	==Un RENDERER==		==Un RENDERER==
			Le renderer est en fait l'espace où nous allons pouvoir dessiner, écrire. J'ai aussi trouvé comme traduction, moteur de rendu. Mais, la première définition est plus parlante.

	Exemple de code Javascript pour créer un Renderer :		Exemple de code Javascript pour créer un Renderer :
	<source lang = 'javascript'>		<source lang = 'javascript'>

Acryline : /* Un RENDERER */

2018-01-21T14:58:53Z

Un RENDERER

← Version précédente		Version du 21 janvier 2018 à 16:58
Ligne 48 :		Ligne 48 :

	==Un RENDERER==		==Un RENDERER==
			Exemple de code Javascript pour créer un Renderer :
			<source lang = 'javascript'>
			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
			</source>

			*Pour commencer, on va créer un WebGLRenderer. Three.js propose d'autres renderer pour les anciens navigateurs et pour ceux qui ne supportent pas WebGL.
			*Pour définir la largeur et la hauteur de l'espace rendu par l'application, on utilise window.innerWidth et window.innerHeight ou des fractions de ces valeurs.
			* Pour utiliser une plus faible définition on ajoute false en paramètre à la fonction comme ceci :
			<source lang='javascript'>
			renderer.setSize( window.innerWidth, window.innerHeight,false );
			</source>
			* Pour finir on ajoute l'élement renderer au document HTML. Le renderer utilise un élement <canvas> pour afficher la scène.
			* On peut ajouter un paramètre alpha pour rendre le fond des objets tranparents :
			<source lang='javascript'>
			var renderer = new THREE.WebGLRenderer({alpha: true});
			</source>

	=Afficher un cube=		=Afficher un cube=

Debuter avec three.js - Historique des versions

Acryline le 25 mars 2022 à 12:26

Acryline : /* Un RENDERER */

Acryline : /* Trois objets pour tout affichage utilisant Three.js */

Acryline : /* Une SCENE */

Acryline : /* Une SCENE */

Acryline le 21 janvier 2018 à 17:26

Acryline le 21 janvier 2018 à 17:09

Acryline : /* Afficher un cube */

Acryline : /* Un RENDERER */

Acryline : /* Un RENDERER */

Acryline : /* Un RENDERER */

Acryline : /* Trois objets pour tout affichage utilisant Three.js */

Acryline : /* Une SCENE */

Acryline : /* Une SCENE */

Acryline : /* Afficher un cube */

Acryline : /* Un RENDERER */

Acryline : /* Un RENDERER */