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

stl-reader

v3.0.1

Published

Library for parsing STL (Stereolithography) files into typed arrays for WebGL rendering

Downloads

179

Readme

StlReader

License

JavaScript library for parsing STL (Stereolithography) files into interleaved vertex normal Float32Arrays that can be directly passed into WebGL or used with a library like three.js for rendering.

Server-side

Installation

npm install stl-reader

Usage

var fs = require('fs');
var StlReader = require('stl-reader');
...
fs.readFile('test/cube.stl', function (err, data) {
  var res = StlReader.read(toArrayBuffer(data));

  console.log(res.vn);
  console.log(res.vertices);
  console.log(res.normals);
});

The returned res object contains three properties - 'vn', 'vertices' and 'normals'. vn is a Float32Array that contains interleaved vertex normal data, like so, [Vx, Vy, Vz, Nx, Ny, Nz, ...] and so on. This is ideal for directly passing to a vertex shader. The vertices and normals arrays contain the vertices and normals separately. These can be used with a library like three.js for rendering.

The read function takes as input an ArrayBuffer. You can use the function below to convert a Node Buffer to an ArrayBuffer (see discussion regarding this code snippet here).

function toArrayBuffer(buffer) {
  var ab = new ArrayBuffer(buffer.length);
  var view = new Uint8Array(ab);
  for (var i = 0; i < buffer.length; ++i) {
    view[i] = buffer[i];
  }
  return ab;
}

This library depends on the DataStream.js library to read binary STL files. A version of the DataStream.js library is installed automatically as a dependency when this library is installed server-side using npm.

Client-side

Installation

bower install stl-reader

Usage

This library depends on the DataStream.js library to read binary STL files. You therefore will also need to install the DataStream.js library from here. After installation include these JavaScript files before including the stl-reader related scripts:

<script type="text/javascript" src="/bower_components/DataStream.js/encoding-indexes.js"></script>
<script type="text/javascript" src="/bower_components/DataStream.js/encoding.js"></script>
<script type="text/javascript" src="/bower_components/DataStream.js/DataStream.js"></script>

Include these three JavaScript files on the page:

<script src="/bower_components/stl-reader/stl-ascii-reader.js" type="text/javascript"></script>
<script src="/bower_components/stl-reader/stl-binary-reader.js" type="text/javascript"></script>
<script src="/bower_components/stl-reader/stl-reader.js" type="text/javascript"></script>

Use an instance of the FileReader class to read the local file as an ArrayBuffer.

var reader = new FileReader();

reader.onload = function () {
  var stlReader, data;

  data = reader.result;
  stlReader = new StlReader();
  var res = stlReader.read(data);

  console.log(res.vn);
  console.log(res.vertices);
  console.log(res.normals);
};

reader.readAsArrayBuffer(fileData);

The returned res object contains three properties - 'vn', 'vertices' and 'normals'. vn is a Float32Array that contains interleaved vertex normal data, like so, [Vx, Vy, Vz, Nx, Ny, Nz, ...] and so on. This is ideal for directly passing to a vertex shader. The vertices and normals arrays contain the vertices and normals separately. These can be used with a library like three.js for rendering:

var res = StlReader.read(data);

var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(res.vertices, 3));
geometry.addAttribute('normal', new THREE.BufferAttribute(res.normals, 3));
mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

where, material is the material you want to render the mesh with and scene is the three.js scene object to which you want to add the mesh.