Géométrie - Historique des versions

Acryline le 13 février 2018 à 10:31

2018-02-13T10:31:23Z

← Version précédente		Version du 13 février 2018 à 12:31
Ligne 1 :		Ligne 1 :
	Une géométrie est un volume, ou objet 3D, un cube, une sphère, un polygone quelconque, ~~ect~~. La géométrie est formée :		Une géométrie est un volume, ou objet 3D, un cube, une sphère, un polygone quelconque, etc. La géométrie est formée :
	{\|		{\|
	\|[[Fichier:Cube-tuto-three-js.png\|300px]]		\|[[Fichier:Cube-tuto-three-js.png\|300px]]

Acryline le 13 février 2018 à 10:31

2018-02-13T10:31:07Z

← Version précédente		Version du 13 février 2018 à 12:31
Ligne 1 :		Ligne 1 :
	Une géométrie est un volume, ou objet 3D, un cube, une sphère, un polygone quelconque. La géométrie est formée :		Une géométrie est un volume, ou objet 3D, un cube, une sphère, un polygone quelconque, ect. La géométrie est formée :
	{\|		{\|
	\|[[Fichier:Cube-tuto-three-js.png\|300px]]		\|[[Fichier:Cube-tuto-three-js.png\|300px]]

Acryline : /* Un exemple concret */

2018-02-13T09:09:41Z

Un exemple concret

← Version précédente		Version du 13 février 2018 à 11:09
Ligne 64 :		Ligne 64 :
	\|}		\|}

	=Un exemple ~~concret~~=		=Un exemple d'utilisation=
	{{Modèle:Utiliser des géométries}}		{{Modèle:Utiliser des géométries}}

Acryline : /* Quelques exemples de géométries dans Three.js */

2018-02-13T09:08:51Z

Quelques exemples de géométries dans Three.js

@@ Ligne 14 : / Ligne 14 : @@
 * Les '''[[BufferGeometry]]''' est une alternative efficace aux géométries. Cette classe stocke les données dans des '''[[définitions#Mémoire tampon|buffers]]''', incluant les positions des sommets, les indices de face, les normales, les couleurs, les UVs , et d'autres attributs. Cela réduit le coût du passage de toutes ces données au processeur graphique ([[Définitions#GPU|GPU]]). Mais, il est plus difficile de travailler avec  des '''BufferGeometry'''  qu'avec des '''Geometries'''. Au lieux d'accéder aux données de position  à l'aide de [[Vector3]], à la couleur à l'aide d'un objet [[Color]] etc, on accéde aux données brutes depuis un '''buffer''' d'attribut approprié ([[BufferAttribute]]). Cela fait du BufferGeometry  la classe la plus adaptée pour les objets statiques dont la géométrie ne doit pas être beaucoup modifiée après sont instanciation.
-=Quelques exemples de géométries dans Three.js=
+=Liste des géométries dans Three.js=
 =Un exemple concret=
 {{Modèle:Utiliser des géométries}}

Acryline : /* Deux types de géométrie */

2018-02-13T08:37:59Z

Deux types de géométrie

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

	=Deux types de géométrie=		=Deux types de géométrie=
			Bien qu'avec '''Three.js''' on puisse créer des formes les plus simples aux plus complexes, la bibliothèque comprend des '''volumes prédéfinies''' décrits dans des classes et des sous-classes. Ces volumes sont abordés de deux façons différentes :
			* Les '''[[Geometry]]''' : ces classes sont les plus faciles à utiliser. Elles stockent les attributs, comme les points les faces, les couleurs etc. directement (plutôt que dans des [[définitions#Mémoire tampon\|buffers]]). Cependant, elles sont en général plus lentes.
			* Les '''[[BufferGeometry]]''' est une alternative efficace aux géométries. Cette classe stocke les données dans des '''[[définitions#Mémoire tampon\|buffers]]''', incluant les positions des sommets, les indices de face, les normales, les couleurs, les UVs , et d'autres attributs. Cela réduit le coût du passage de toutes ces données au processeur graphique ([[Définitions#GPU\|GPU]]). Mais, il est plus difficile de travailler avec des '''BufferGeometry''' qu'avec des '''Geometries'''. Au lieux d'accéder aux données de position à l'aide de [[Vector3]], à la couleur à l'aide d'un objet [[Color]] etc, on accéde aux données brutes depuis un '''buffer''' d'attribut approprié ([[BufferAttribute]]). Cela fait du BufferGeometry la classe la plus adaptée pour les objets statiques dont la géométrie ne doit pas être beaucoup modifiée après sont instanciation.

	=Quelques exemples de géométries dans Three.js=		=Quelques exemples de géométries dans Three.js=
	=Un exemple concret=		=Un exemple concret=
	{{Modèle:Utiliser des géométries}}		{{Modèle:Utiliser des géométries}}

Acryline : /* Un exemple concret */

2018-02-11T16:28:13Z

Un exemple concret

← Version précédente		Version du 11 février 2018 à 18:28
Ligne 13 :		Ligne 13 :
	=Un exemple concret=		=Un exemple concret=
	{{Modèle:Utiliser des géométries}}		{{Modèle:Utiliser des géométries}}
	~~==Le code==~~
	{\|
	~~\|style="width: 50%;"\|<source lang = 'javascript'>~~
	~~var scene = new THREE.Scene();~~
	~~var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );~~

	~~camera.position.z = 120;~~

	~~var renderer = new THREE.WebGLRenderer();~~
	~~renderer.setSize( window.innerWidth, window.innerHeight );~~
	~~document.body.appendChild( renderer.domElement );~~

	~~var geometry = new THREE.BoxGeometry(20, 20, 20);~~
	~~var cube = forme(geometry,-80,50);~~

	~~var geometry = new THREE.IcosahedronGeometry(15,0);~~
	~~var icosahedre = forme(geometry,-40,50);~~

	~~var geometry = new THREE.CircleGeometry(15,32);~~
	~~var cercle = forme(geometry,0,50);~~

	~~var geometry = new THREE.ConeGeometry( 15, 20, 32 );~~
	~~var cone = forme(geometry,40,50);~~

	~~var geometry = new THREE.CylinderGeometry( 15, 15, 20, 32 );~~
	~~var cylindre = forme(geometry,80,50);~~

	~~var geometry = new THREE.DodecahedronGeometry(15,0);~~
	~~var dodeca = forme(geometry,-80,10);~~

	~~var geometry = new THREE.OctahedronGeometry(15,0);~~
	~~var octo = forme(geometry,-40,10);~~

	~~var geometry = new THREE.PlaneGeometry( 25, 25, 32 );~~
	~~var plan = forme(geometry,0,10);~~

	~~var geometry = new THREE.RingGeometry( 5, 20, 32 );~~
	~~var ring = forme(geometry,40,10);~~

	~~var geometry = new THREE.SphereGeometry( 15, 12, 12 );~~
	~~var sphere = forme(geometry,80,10);~~

	~~var geometry = new THREE.TetrahedronGeometry(15,0);~~
	~~var tetra = forme(geometry,-80,-30);~~

	~~var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );~~
	~~var torus = forme(geometry,-40,-30);~~

	~~var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );~~
	~~var knot = forme(geometry,0,-30);~~

	~~var geometry = new THREE.BoxGeometry(20, 20, 20);~~
	~~geometry.vertices[2].x += -10;~~
	~~geometry.vertices[2].y += -5;~~
	~~var tordu = forme(geometry,40,-30);~~

	~~var geometry = new THREE.IcosahedronGeometry(15,0);~~
	~~geometry.vertices[2].x += -15;~~
	~~geometry.vertices[2].y += -10;~~
	~~geometry.vertices[8].x += -15;~~
	~~geometry.vertices[8].y += -10;~~
	~~var tordu2 = forme(geometry,80,-30);~~

	~~var light = new THREE.PointLight(0xFF0000);~~
	~~light.position.set(10, 0, 25);~~
	~~scene.add(light);~~

	~~function forme(geo,posX,posY)~~
	{
	~~var material = new THREE.MeshNormalMaterial();~~
	~~var obj = new THREE.Mesh(geo, material);~~
	~~obj.position.x = posX;~~
	~~obj.position.y = posY;~~
	~~scene.add(obj);~~
	~~return obj;~~
	}

	~~function animate() {~~
	~~requestAnimationFrame( animate );~~

	~~cube.rotation.x += 0.01;~~
	~~cube.rotation.y += 0.01;~~
	~~icosahedre.rotation.x += 0.01;~~
	~~icosahedre.rotation.y += -0.01;~~
	~~cercle.rotation.x += -0.01;~~
	~~cercle.rotation.y += 0.01;~~
	~~cone.rotation.x += 0.01;~~
	~~cone.rotation.y += 0.01;~~
	~~cylindre.rotation.x += 0.01;~~
	~~cylindre.rotation.y += -0.01;~~
	~~dodeca.rotation.x += -0.01;~~
	~~dodeca.rotation.y += 0.01;~~
	~~octo.rotation.x += 0.01;~~
	~~octo.rotation.y += 0.01;~~
	~~plan.rotation.x += -0.01;~~
	~~plan.rotation.y += -0.01;~~
	~~ring.rotation.x += 0.01;~~
	~~ring.rotation.y += 0.01;~~
	~~sphere.rotation.x += -0.01;~~
	~~sphere.rotation.y += 0.01;~~
	~~tetra.rotation.x += 0.01;~~
	~~tetra.rotation.y += -0.01;~~
	~~torus.rotation.x += -0.01;~~
	~~torus.rotation.y += 0.01;~~
	~~knot.rotation.x += -0.01;~~
	~~knot.rotation.y += -0.01;~~
	~~tordu.rotation.x += -0.01;~~
	~~tordu.rotation.y += 0.01;~~
	~~tordu2.rotation.x += -0.01;~~
	~~tordu2.rotation.y += 0.01;~~

	~~renderer.render( scene, camera );~~
	}
	~~animate();~~
	~~</source>~~
	~~\| style="position: absolute; width:50%; min-height:100%; "\|{{Spécial:IframePage/Geometrie}}~~
	\|}

	~~==Analyse du code==~~

Acryline le 11 février 2018 à 16:27

2018-02-11T16:27:43Z

← Version précédente		Version du 11 février 2018 à 18:27
Ligne 12 :		Ligne 12 :
	=Quelques exemples de géométries dans Three.js=		=Quelques exemples de géométries dans Three.js=
	=Un exemple concret=		=Un exemple concret=
			{{Modèle:Utiliser des géométries}}
	==Le code==		==Le code==
	{\|		{\|

Acryline : /* Le code */

2018-02-11T15:54:46Z

Le code

← Version précédente		Version du 11 février 2018 à 17:54
Ligne 18 :		Ligne 18 :
	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 );

	camera.position.z = ~~100~~;		camera.position.z = 120;

	var renderer = new THREE.WebGLRenderer();		var renderer = new THREE.WebGLRenderer();

Acryline : /* Le code */

2018-02-11T14:49:10Z

Le code

← Version précédente		Version du 11 février 2018 à 16:49
Ligne 127 :		Ligne 127 :
	animate();		animate();
	</source>		</source>
	\| style="position: absolute; width:50%; height:~~90vh~~; "\|{{Spécial:IframePage/Geometrie}}		\| style="position: absolute; width:50%; min-height:100%; "\|{{Spécial:IframePage/Geometrie}}
	\|}		\|}

	==Analyse du code==		==Analyse du code==

Acryline : /* Le code */

2018-02-11T14:40:00Z

Le code

← Version précédente		Version du 11 février 2018 à 16:40
Ligne 127 :		Ligne 127 :
	animate();		animate();
	</source>		</source>
	\| style="position: absolute; width:50%; height:~~100vh~~; "\|{{Spécial:IframePage/Geometrie}}		\| style="position: absolute; width:50%; height:90vh; "\|{{Spécial:IframePage/Geometrie}}
	\|}		\|}

	==Analyse du code==		==Analyse du code==

Géométrie - Historique des versions

Acryline le 13 février 2018 à 10:31

Acryline le 13 février 2018 à 10:31

Acryline : /* Un exemple concret */

Acryline : /* Quelques exemples de géométries dans Three.js */

Acryline : /* Deux types de géométrie */

Acryline : /* Un exemple concret */

Acryline le 11 février 2018 à 16:27

Acryline : /* Le code */

Acryline : /* Le code */

Acryline : /* Le code */

Acryline : /* Un exemple concret */

Acryline : /* Quelques exemples de géométries dans Three.js */

Acryline : /* Deux types de géométrie */

Acryline : /* Un exemple concret */

Acryline : /* Le code */

Acryline : /* Le code */

Acryline : /* Le code */