three.js Demos

This is a showcase page to present a couple of projects/demos using three.js to render 3d objects, 3d primitives, handle animations, and create VR content leveraging the use of the WebXR API.

Below I will provide a brief description of each project along with a CodeSandbox link to the live demo and the code.

Annotation Tool

The first project is an annotation tool that renders glTF models to annotate videos. The main goal is to track the rotation and translation of the object through multiple frames in the video. The tool allows to save the annoations in a .json file, which can be later downloaded/exported as video labeled file.

The UI has a controller panel to change the position and rotaion of both object and camera as well as a text input to enter video url and a dropdown to select precanned objects

A couple of technical aspects are:

  • Toggling between two states: Review Mode and Annotation Mode.
  • Implementaion of linear interpolation (lerp) and spherical linear interpolation (slerp) to hanlde transition between frames in translation and rotation.
  • Use of glTF loader.
  • Use of threejs builtin functions to transform Euler to quaternions to calculate slerp.
  • Implementation of zustand as state management library.


‍Link to the Demo
* You might need to refresh the page just once if compiling issues appear.

Multicolor Circular Shape Wave

This visualization implements a bufferGeometry to render 10000 points in a circular shape.

A couple of technical aspects are:

  • TextureLoader from threejs
  • Given the number of points, instead of using threejs Geometries as SphereGeometry, BufferGeometry is a more performant option as the atttributes are stored with the geometry itself.
  • Implementaion of bufferAttributes to store color and position.
  • Use of the useFrame hook to animate the points.


Link to the Demo

VR Experience

This is a minimal demo to experience VR content and interactions. The goal is to navigate through a set of points and interact with them using VR controllers. I recommend to see this demo in VR using a headset, another option is using the WebXR API Emulator from Chrome.

A couple of technical aspects are:

  • Use of @react-three/xr to enable WebXR.
  • As the idea is to have an object (Card) to follow your point of view (camera). Implemnetation of the xrCamera.getWorldDirection is required, this is different from the camera class in three.js
  • Some minimal use of d3 to load dummy data and use scaleLinear d3 functions for color picking.
  • Use TextureLoader to load 2d images from urls

Link to the Demo

back to home
Go to random demo