« Modèle:Utiliser des géométries » : différence entre les versions
Aller à la navigation
Aller à la recherche
Aucun résumé des modifications |
|||
| Ligne 1 : | Ligne 1 : | ||
Ce code affiche et fait tourner plusieurs types de | Ce code affiche et fait tourner plusieurs types de [[Geometry]]. | ||
==Organisation des dossiers et fichiers== | ==Organisation des dossiers et fichiers== | ||
{{#tree:minExpandLevel=2 | | |||
*Racine web | |||
**css | |||
***[[#style.css|style.css]] | |||
**js | |||
***[[#script.js|script.js]] | |||
***[https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js three.js] | |||
**[[#index.html|index.html]] | |||
}} | |||
==Fichiers Index.html et style.css== | ==Fichiers Index.html et style.css== | ||
===index.html=== | |||
===style.css=== | |||
==Code javascript== | ==Code javascript== | ||
=== | ===script.js=== | ||
{| | {| | ||
|style="width: 50%;"|<source lang = 'javascript'> | |style="width: 50%;"|<source lang = 'javascript'> | ||
Version du 13 février 2018 à 11:27
Ce code affiche et fait tourner plusieurs types de Geometry.
Organisation des dossiers et fichiers
Fichiers Index.html et style.css
index.html
style.css
Code javascript
script.js
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();
|
Spécial:IframePage/Geometrie |