Wireframe Renderer

Simple 3D software renderer that can draw interactive low poly models, either as wireframe or filled faces.

Only .obj files are supported.

Install

npm install wireframe-renderer

Usage

Import the library.

import { WireframeRenderer, PROJECTION } from "wireframe-renderer";

Example usage in vanilla JS.

const canvas = document.getElementById("canvas");
const viewer = new WireframeRenderer(canvas, {
  coordinates: { x: 0, y: 0, z: 2 },
  projection: PROJECTION.PERSPECTIVE,
  draggable: true,
  autoRotate: true,
  lineWidth: 2,
  faceOpacity: 0.4,
  renderVertices: true,
  zoomable: true,
  renderEdges: true,
  vertexSize: 8,
  rotationSpeed: 1,
  inertia: true,
  farClip: 10,
  nearClip: 0.1,
  background: "transparent",
  foreground: "#e1e0e0",
});

fetch("/models/tetrahedron.obj")
  .then((res) => res.text())
  .then((text) => {
    const mesh = WireframeRenderer.parseOBJ(text);
    viewer.setModel(mesh.vertices, mesh.faces);
    viewer.setRotation(-0.25, 0.2);
    viewer.start();
  });

Options

• coordinates: {x, y, z} object, sets the model's initial position in 3D space. Defaults to {0, 0, 0}.
• projection: PROJECTION.PERSPECTIVE or PROJECTION.ORTHOGRAPHIC. Controls how 3D points get mapped to the screen. Defaults to perspective.
• draggable: if true, lets the user rotate the model by clicking and dragging.
• autoRotate: if true, spins the model automatically on the Y axis after 2 seconds of no interaction.
• lineWidth: thickness of wireframe edges in pixels. Edges only draw if this is greater than 0.
• faceOpacity: opacity of filled faces, from 0 to 1. Faces only draw if this is greater than 0.
• renderVertices: if true, draws a dot at each vertex.
• zoomable: if true, enables scroll to zoom, clamped between 0.1x and 5x.
• renderEdges: if true, draws edges on top of filled faces instead of only when faces are hidden.
• vertexSize: radius in pixels of the dots drawn when renderVertices is on.
• rotationSpeed: multiplier for how fast the model spins during auto rotate.
• inertia: if true, rotation keeps going briefly after a drag release and decays over time instead of stopping instantly.
• farClip: max distance from the camera before a vertex or face gets clipped. Defaults to 10.
• nearClip: min distance from the camera before a vertex or face gets clipped. Defaults to 0.1.
• background: canvas background color as a CSS string, or "transparent" to clear instead of fill.
• foreground: color used for edges, vertices, and as the base color for face shading.

Methods

• setModel(vertices, faces): loads a mesh into the renderer and precomputes shading colors for each face.
• setPosition(x, y, z): moves the model in 3D space.
• setRotation(rx, ry): sets rotation angles in radians on the X and Y axes.
• start(): starts the render loop.
• stop(): stops the render loop.
• updateOptions(options): updates options on an existing instance, and attaches or detaches drag/zoom listeners if those flags changed.
• WireframeRenderer.parseOBJ(text): static method, parses .obj file text into { vertices, faces }.

Full documentations

You can find the full docs here: wireframe-renderer.vercel.app