threejs-billboard

billboard module for three.js

Demo

Demo page

Getting Started

Install

npm install @masatomakino/threejs-billboard --save-dev

threejs-billboard depend on three.js and pixi.js.

Import

threejs-billboard is composed of ES6 modules and TypeScript d.ts files.

At first, import classes.

import {
  BillBoard,
  StageBillBoard,
  StagePlaneMesh,
  ScaleCalculator,
} from "@masatomakino/threejs-billboard";

Show billboard

Add billboard in THREE.Scene.

const billboard = new BillBoard("./map01.png", 0.1);
scene.add(billboard);

Dot-by-dot display

If you want to display dot-by-dot billboard, get image scale with ScaleCalculator.

const scale = ScaleCalculator.getNonAttenuateScale(
  renderer.getSize(new THREE.Vector2()).height,
  camera,
);
const billboard = new BillBoard("./map01.png", scale);
billboard.material.sizeAttenuation = false;

API documents

API documents

License

MIT licensed.