Edges can be drawn in 3 ways:
This is only possible for simple objects.
This is used in cuboid.
The whole cuboid is colored with the following formula:
edgeFactor × cuboidColor + (1 - edgeFactor) × edgeColor
When edgeFactor
is 0 we are drawing the edge.
If the formula be edgeFactor == 1 ? edgeColor : diffuse
the edge would be very aliased.
edgeFactor
is calculated by a method that prisoner849 posted here.
This is less performant but works for everything.
To draw the edges this way you need to create an InstancedBufferAttribute
:
const edgesGeometry = new InstancedBufferGeometry()
.setAttribute(
'position',
new BufferAttribute(
new Float32Array(magicNumbersArray)
)
)
To get the magic numbers, you print the automatically generated edges and Ctrl+C Ctrl+V.
We don’t use the automatically generated edges because it’s slow.
You can use the following script template to generate the edges:
import { EdgesGeometry, YourGeometryHere } from 'path_to_threejs';
// Generate the geometry.
// Each geometry is generated in a different way.
// See the three.js documentation for more details: https://threejs.org/docs/
const geometry = new YourGeometryHere();
console.log(EdgesGeometry(geometry).attributes.position.array);
This is the easiest way to draw edges, but it is only possible when the
edges should be in every corners, not just the hard-corners.
e.g.: wireframe: true
in a dodecahedron would lead to lines passing
through its faces but this works in a
multi-face polygon.
This is slower than the object method but accepts a indexed geometry, so in some cases it can be faster, use less RAM and be simpler than the object method.
This is used in polygon.
To draw the edges this way you need to add the property wireframe: true
to the material of the object:
const material = new ShaderMaterial({
wireframe: true,
...
});