npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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