Dots
This post is part of a course on geometric modeling at the Summer Liberal Arts Institute for Computer Science held at Carleton College in 2021.
Soon our shapes will become more complex. There will be many vertices and many triangles. You will find it helpful to visualize the vertices on their own before thinking about how to connect them up into triangles. To visualize just the vertices, you create a Points object instead of a Mesh, like this:
const shape = generateSomeShape();
let geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(shape.positions), 3));
const isDots = true;
if (isDots) {
// Render as points.
const pointsMaterial = new THREE.PointsMaterial({
color: 'red',
size: 0.5,
});
const points = new THREE.Points(geometry, pointsMaterial);
scene.add(points);
} else {
// Render as triangular mesh.
geometry.setIndex(shape.triangles);
const material = new THREE.MeshBasicMaterial({
color: 'black',
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
Try this out in your renderer. Notice how we choose between points rendering and mesh rendering using the isDots variable.
The vertices render as square dots. These aren’t aesthetically pleasing, but you’ll find it useful to confirm that the vertices are where you think they should before tackling the next problem of connecting them up into triangles.