// readme

threejs-position-util

Convert 3D Three.js world coordinates to 2D screen positions for UI overlays

Demo

View the Demo page and open the browser console.

Vector3
x: 960
y: 540
z: 0

threejs-position-util converts a 3D geometry position to 2D screen coordinates (CSS pixels; origin at top-left), ideal for positioning HTML UI elements over 3D objects.

Use Cases

  • UI Overlays: Position tooltips, labels, or info panels above 3D models
  • HUD Elements: Create heads-up displays that follow 3D objects
  • Interactive Markers: Place clickable HTML buttons over specific 3D locations
  • Data Visualization: Add 2D charts or text that correspond to 3D data points

Getting Started

Install

npm install @masatomakino/threejs-position-util --save-dev

Import

Import the named exports from the package root:

import { 
  get2DPosition, 
  get2DPositionWithMesh,
  getGeometryCenterInWorld,
  getGeometryCenterInLocal
} from "@masatomakino/threejs-position-util";

This package is ESM-only; CommonJS require() is not supported.

Primary Functions

The main purpose of this library is to…