replicad-threejs-helper
v0.17.0
Published
Helper to use threejs to render replicad models
Downloads
577
Readme
replicad-threejs-helper
A set of simple function to help integrate replicad in a threejs project
Install
yarn add replicad-threejs-helper
(npm works as well, and there are some different builds that you can link from unpkg)
API
This package offers a small set of functions to sync a set of BufferGeometry
with meshed shapes from replicad.
Creating geometries from a replicad object
Typically you will create an array of replicad shapes that way (this is purely replicad code):
const meshed = shapes.map((shape, i) => ({
name: `shape ${i + 1}`,
faces: shape.mesh({ tolerance: 0.05, angularTolerance: 30 }),
edges: shape.meshEdges({ keepMesh: true }),
}));
You can then synchronise them with a set of buffer geometries (for the faces and the edges):
const geometries = syncGeometries(meshed, []);
The geometries will contain an array of objects with two BufferGeometry
, one
for the faces
(the body of the solid) and one for the lines
(the edges).
You will then need to integrate these geometries in your threejs project.
Updating geometries
If you have changes to your geometries, instead of creating new ones you can do:
const updatedGeometries = syncGeometries(meshed, geometries);
This will reuse the geometries if the number of shape has not changed, and dispose of the old ones (and recreate new ones) if the number of shapes has changed.
More control
Instead of updating both the edges and the faces you can use the simpler individual functions:
const facesGeometry = new BufferGeometry();
const updatedFaces = syncFaces(facesGeometry, replicadMeshedFaces);
or for the edges
const edgesGeometry = new BufferGeometry();
syncLines(edgesGeometry, replicadMeshedEdges);
Highlighting
These helpers also allow you to implement highlighting of faces or edges, using the groups functionality of three.
For this you will need to attach two materials for both your faces and your lines.
You can toggle a single face or edge with this helper:
toggleHighlight(facesGeometry, 2);
or
toggleHighlight(edgesGeometry, 5);