« Géométrie » : différence entre les versions

De OSWiki
Aller à la navigation Aller à la recherche
Ligne 17 : Ligne 17 :
var scene = new THREE.Scene();
var scene = new THREE.Scene();
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 = 100;
 
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 );
 
var geometry =  new THREE.BoxGeometry(20, 20, 20);
var geometry =  new THREE.BoxGeometry(20, 20, 20);
var cube = forme(geometry,-80,50);
var cube = forme(geometry,-80,50);
 
var geometry =  new THREE.IcosahedronGeometry(15,0);
var geometry =  new THREE.IcosahedronGeometry(15,0);
var icosahedre = forme(geometry,-40,50);
var icosahedre = forme(geometry,-40,50);
 
var geometry =  new THREE.CircleGeometry(15,32);
var geometry =  new THREE.CircleGeometry(15,32);
var cercle = forme(geometry,0,50);
var cercle = forme(geometry,0,50);
Ligne 35 : Ligne 35 :
var geometry =  new THREE.ConeGeometry( 15, 20, 32 );
var geometry =  new THREE.ConeGeometry( 15, 20, 32 );
var cone = forme(geometry,40,50);
var cone = forme(geometry,40,50);
 
 
var geometry =  new THREE.CylinderGeometry( 15, 15, 20, 32 );
var geometry =  new THREE.CylinderGeometry( 15, 15, 20, 32 );
var cylindre = forme(geometry,80,50);
var cylindre = forme(geometry,80,50);
Ligne 41 : Ligne 41 :
var geometry = new THREE.DodecahedronGeometry(15,0);
var geometry = new THREE.DodecahedronGeometry(15,0);
var dodeca = forme(geometry,-80,10);
var dodeca = forme(geometry,-80,10);
 
var geometry = new THREE.OctahedronGeometry(15,0);
var geometry = new THREE.OctahedronGeometry(15,0);
var octo = forme(geometry,-40,10);
var octo = forme(geometry,-40,10);
 
var geometry =  new THREE.PlaneGeometry( 25, 25, 32 );
var geometry =  new THREE.PlaneGeometry( 25, 25, 32 );
var plan = forme(geometry,0,10);
var plan = forme(geometry,0,10);
 
var geometry = new THREE.RingGeometry( 5, 20, 32 );
var geometry = new THREE.RingGeometry( 5, 20, 32 );
var ring = forme(geometry,40,10);
var ring = forme(geometry,40,10);
 
var geometry = new THREE.SphereGeometry( 15, 12, 12 );
var geometry = new THREE.SphereGeometry( 15, 12, 12 );
var sphere = forme(geometry,80,10);
var sphere = forme(geometry,80,10);
 
var geometry = new THREE.TetrahedronGeometry(15,0);
var geometry = new THREE.TetrahedronGeometry(15,0);
var tetra = forme(geometry,-80,-30);
var tetra = forme(geometry,-80,-30);
 
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var torus = forme(geometry,-40,-30);
var torus = forme(geometry,-40,-30);
 
var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
var knot = forme(geometry,0,-30);
var knot = forme(geometry,0,-30);
 
var geometry =  new THREE.BoxGeometry(20, 20, 20);
var geometry =  new THREE.BoxGeometry(20, 20, 20);
geometry.vertices[2].x += -10;
geometry.vertices[2].x += -10;
geometry.vertices[2].y += -5;
geometry.vertices[2].y += -5;
var tordu = forme(geometry,40,-30);
var tordu = forme(geometry,40,-30);
 
var geometry = new THREE.IcosahedronGeometry(15,0);
var geometry = new THREE.IcosahedronGeometry(15,0);
geometry.vertices[2].x += -15;
geometry.vertices[2].x += -15;
Ligne 74 : Ligne 74 :
geometry.vertices[8].y += -10;
geometry.vertices[8].y += -10;
var tordu2 = forme(geometry,80,-30);
var tordu2 = forme(geometry,80,-30);
 
var light = new THREE.PointLight(0xFF0000);
var light = new THREE.PointLight(0xFF0000);
light.position.set(10, 0, 25);
light.position.set(10, 0, 25);
scene.add(light);
scene.add(light);
 
function forme(geo,posX,posY)
function forme(geo,posX,posY)
{
{
    var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
    var obj = new THREE.Mesh(geo, material);
var obj = new THREE.Mesh(geo, material);
    obj.position.x = posX;
obj.position.x = posX;
    obj.position.y = posY;
obj.position.y = posY;
    scene.add(obj);     
scene.add(obj);     
    return obj;
return obj;
}
}
 
function animate() {
function animate() {
requestAnimationFrame( animate );
requestAnimationFrame( animate );
   
 
                cube.rotation.x += 0.01;
cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
cube.rotation.y += 0.01;
icosahedre.rotation.x += 0.01;
icosahedre.rotation.x += 0.01;
icosahedre.rotation.y += -0.01;
icosahedre.rotation.y += -0.01;
cercle.rotation.x += -0.01;
cercle.rotation.x += -0.01;
cercle.rotation.y += 0.01;
cercle.rotation.y += 0.01;
cone.rotation.x += 0.01;
cone.rotation.x += 0.01;
cone.rotation.y += 0.01;
cone.rotation.y += 0.01;
cylindre.rotation.x += 0.01;
cylindre.rotation.x += 0.01;
cylindre.rotation.y += -0.01;
cylindre.rotation.y += -0.01;
dodeca.rotation.x += -0.01;
dodeca.rotation.x += -0.01;
dodeca.rotation.y += 0.01;
dodeca.rotation.y += 0.01;
octo.rotation.x += 0.01;
octo.rotation.x += 0.01;
octo.rotation.y += 0.01;
octo.rotation.y += 0.01;
plan.rotation.x += -0.01;
plan.rotation.x += -0.01;
plan.rotation.y += -0.01;
plan.rotation.y += -0.01;
ring.rotation.x += 0.01;
ring.rotation.x += 0.01;
ring.rotation.y += 0.01;
ring.rotation.y += 0.01;
sphere.rotation.x += -0.01;
sphere.rotation.x += -0.01;
sphere.rotation.y += 0.01;
sphere.rotation.y += 0.01;
tetra.rotation.x += 0.01;
tetra.rotation.x += 0.01;
tetra.rotation.y += -0.01;
tetra.rotation.y += -0.01;
torus.rotation.x += -0.01;
torus.rotation.x += -0.01;
torus.rotation.y += 0.01;
torus.rotation.y += 0.01;
knot.rotation.x += -0.01;
knot.rotation.x += -0.01;
knot.rotation.y += -0.01;
knot.rotation.y += -0.01;
tordu.rotation.x += -0.01;
tordu.rotation.x += -0.01;
tordu.rotation.y += 0.01;
tordu.rotation.y += 0.01;
tordu2.rotation.x += -0.01;
tordu2.rotation.x += -0.01;
tordu2.rotation.y += 0.01;
tordu2.rotation.y += 0.01;
 
renderer.render( scene, camera );
renderer.render( scene, camera );
}
}
animate();
animate();
</source>
</source>
| style="width: 50%; "|{{Spécial:IframePage/Geometrie}}
| style="width: 50%; "|{{Spécial:IframePage/Geometrie}}
|}
|}
==Analyse du code==
==Analyse du code==

Version du 11 février 2018 à 12:32

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 :

  • de sommets (en rouge): Vertex , pluriel vertices en anglais,
  • d'arêtes (en vert), edge en anglais,
  • de faces (en bleu).

Il est important de connaître les termes anglais car vous les rencontrerez même dans des documents en français.

Deux types de géométrie

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

Un exemple concret

Le code

<source lang = 'javascript'>

var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

camera.position.z = 100;

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>

Spécial:IframePage/Geometrie

Analyse du code

Récupérée de « https://cogito.no-ip.info/cogito/OSWiki/index.php?title=Géométrie&oldid=2100 »