« Modèle:Utiliser des géométries » : différence entre les versions
Aller à la navigation
Aller à la recherche
Aucun résumé des modifications |
|||
Ligne 13 : | Ligne 13 : | ||
===index.html=== | ===index.html=== | ||
===style.css=== | ===style.css=== | ||
<source lang ="css"> | |||
body { | |||
margin: 0; | |||
overflow: hidden; | |||
} | |||
canvas { | |||
width: 100%; | |||
height: 100% | |||
} | |||
</source> | |||
==Code javascript== | ==Code javascript== | ||
===script.js=== | ===script.js=== |
Version du 13 février 2018 à 11:30
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
body {
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%
}
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 |