replicad-threejs-helper
    TypeScript icon, indicating that this package has built-in type declarations

    0.13.0 • Public • Published

    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);

    Install

    npm i replicad-threejs-helper

    Homepage

    replicad.xyz

    DownloadsWeekly Downloads

    73

    Version

    0.13.0

    License

    AGPL-3.0-or-later

    Unpacked Size

    97.9 kB

    Total Files

    12

    Last publish

    Collaborators

    • sgenoud