Modèle:Utiliser des géométries

Ce code affiche et fait tourner plusieurs types de Geometry.

Organisation des dossiers et fichiers

{"minExpandLevel":2}

• Racine web
  • css
    • style.css
  • js
    • script.js
    • three.js
  • index.html

Code javascript

script.js

<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>

Spécial:IframePage/Geometrie