Dessiner des lignes

Disons que vous voulez dessiner une ligne ou un cercle, pas un `Mesh` en fil de fer. Nous devons d'abord configurer le renderer, la scène et la caméra (voir la page Créer une scène).

Voici le code que nous allons utiliser :

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

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );

const scene = new THREE.Scene();

Next thing we will do is define a material. For lines we have to use `LineBasicMaterial` or `LineDashedMaterial`.

//créer un LineBasicMaterial bleu
const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

Après le material, nous aurons besoin d'une géométrie avec quelques sommets :

const points = [];
points.push( new THREE.Vector3( - 10, 0, 0 ) );
points.push( new THREE.Vector3( 0, 10, 0 ) );
points.push( new THREE.Vector3( 10, 0, 0 ) );

const geometry = new THREE.BufferGeometry().setFromPoints( points );

Notez que les lignes sont tracées entre chaque paire consécutive de sommets, mais pas entre le premier et le dernier (la ligne n'est pas fermée).

Maintenant que nous avons des points pour deux lignes et un material, nous pouvons les assembler pour former une ligne.

const line = new THREE.Line( geometry, material );

Tout ce qui reste est de l'ajouter à la scène et d'appeler `renderer.render()`.

scene.add( line );
renderer.render( scene, camera );

Vous devriez maintenant voir une flèche pointant vers le haut, faite de deux lignes bleues.