Disons que vous voulez dessiner une ligne ou un cercle, pas un wireframe [page:Mesh]. Premièrement nous devons préparer le [page:WebGLRenderer renderer], [page:Scene scene] 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();
La prochaine chose que nous allons faire est définir un matériau (material). Pour les lignes, nous devons utiliser [page:LineBasicMaterial] ou [page:LineDashedMaterial].
//create a blue LineBasicMaterial
const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
Après le matériau, nous devons utiliser une forme (geometry) 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 la première et la deuxième (la ligne n'est pas fermée).
Maintenant que nous avons les points pour deux lignes et un matériau, nous pouvons les assembler pour former une ligne.
const line = new THREE.Line( geometry, material );
Il ne manque qu'à l'ajouter à la scène et appeler [page:WebGLRenderer.render render].
scene.add( line );
renderer.render( scene, camera );
Vous devez maintenant voir une flèche pointant vers le haut, faite de deux lignes bleues.