Géométries

Jusqu'à présent, nous n'avons utiliser qu'un cube pour nos exemples.

Il existe d'autres "géométries".

Ce qu'est une géométrie

Une géométrie est un ensemble de points dans l'espace 3D. Chaque point est appelé un "vertex" (sommet). Trois sommets forment un triangle. Les triangles forment une "face".

Géométries natives

Three.js propose des géométries natives.

• BoxGeometry : https://threejs.org/docs/#api/en/geometries/BoxGeometry (opens in a new tab)
• SphereGeometry : https://threejs.org/docs/#api/en/geometries/SphereGeometry (opens in a new tab)
• PlaneGeometry : https://threejs.org/docs/#api/en/geometries/PlaneGeometry (opens in a new tab)
• TorusGeometry : https://threejs.org/docs/#api/en/geometries/TorusGeometry (opens in a new tab)
• ConeGeometry : https://threejs.org/docs/#api/en/geometries/ConeGeometry (opens in a new tab)

Chaque géométrie à ses spécificités.

Wireframe

Si vous voulez voir les arêtes de votre géométrie, vous pouvez utiliser le paramètre wireframe.

const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

Custom geometry

Vous pouvez aussi créer vos propres géométries. Pour cela, vous devez utiliser la classe BufferGeometry.

const geometry = new THREE.BufferGeometry()
const positionsArray = new Float32Array([
    0, 0, 0, // vertex 1
    0, 1, 0, // vertex 2
    1, 0, 0  // vertex 3
])
geometry.setAttribute('position', new THREE.BufferAttribute(positionsArray, 3))
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })
const mesh = new THREE.Mesh(geometry, material)