100%

ThreeJS Starter

✓ Published13🌍 Public

Last edited May 9, 2025

Created on Oct 26, 2024

A Three.js scene displays a single blue cube rotating automatically in 3D space. The cube uses a `MeshPhongMaterial` that responds to both ambient and directional lighting, showcasing interactive orbit controls for drag-to-rotate and scroll-to-zoom. The animation runs via `requestAnimationFrame` with WebGL rendering on a canvas element. The code imports Three.js and its `OrbitControls` addon through import maps, with a responsive resize handler updating camera aspect and renderer size.

AI-generated description

ThreeJS Starter

A simple ThreeJS starter template:

Uses import maps!
Interactive orbit controls (drag to rotate, scroll to zoom)
Responsive design
Proper lighting with material that responds to light

Limitations:

Currently, all the code needs to live in a single source file, since relative imports are not yet supported in the VizHub Runtime

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ThreeJS Starter

A rotating blue cube animates in a 3D scene, responding to directional and ambient lighting. Built with Three.js, the example sets up a WebGL renderer on a canvas, a perspective camera, and orbit controls with damping. The cube's material uses a MeshPhongMaterial with shininess, while automatic rotation and user interaction via controls update the view. The code also handles window resizing by adjusting camera aspect and renderer dimensions.

PPremkumar

89% match

Loading thumbnail…

Fork of ThreeJS Starter

A glowing blue cube rotates continuously in a 3D scene, rendered with Three.js and WebGL. The cube uses a MeshPhongMaterial with directional and ambient lighting, creating visible highlights and shading. Users can orbit and zoom the camera using OrbitControls with damping enabled, while the animation loop updates the cube's rotation. The scene responds to browser resizing, with a canvas-based renderer set to antialias.

Ddr_nareshvet@yahoo.in

87% match

Loading thumbnail…

three.js

Three colored cubes rotate continuously in a gray 3D scene, each spinning on its X and Y axes at staggered speeds. The visualization uses Three.js with a WebGL renderer to draw the cubes, a PerspectiveCamera, DirectionalLight, and MeshPhongMaterial for shading. The animation loop increments rotation based on time, driven by requestAnimationFrame, with cubes positioned at different X coordinates.

Ssabrinamochi

80% match

Loading thumbnail…

React + ThreeJS 3D Cube of Spheres

This example displays a three-dimensional cube of spheres, arranged in a 4x4x4 grid, with each sphere’s color determined by its position via an HSL calculation. The entire structure rotates automatically, while users can drag to orbit the view and scroll to zoom, thanks to Three.js’s `OrbitControls`. The scene is built with React 19, which manages the mount point and lifecycle, while Three.js handles WebGL rendering, including `MeshPhongMaterial` for coloring and `DirectionalLight` for illumination.

CCurran Kelleher

79% match

Loading thumbnail…

My first three.js app

A green cube rotates continuously in a three-dimensional scene rendered using Three.js. The example demonstrates basic 3D visualization setup with a scene, perspective camera, and WebGL renderer. It creates a cube mesh from a BoxGeometry with a MeshBasicMaterial, positions the camera, and uses a requestAnimationFrame loop to incrementally update the cube’s rotation on the x and y axes. The code constructs the entire visualization directly in JavaScript within an HTML page, sourcing the Three.js library from the official threejs.org build.

Hhenrik.voigt@uni-jena.de

79% match

Loading thumbnail…

Rotating Cube

A rotating steel-blue cube appears in a Three.js scene, with its vertical and horizontal rotation controlled by two range sliders. The example builds a basic scene with a `PerspectiveCamera`, `BoxGeometry`, and `MeshBasicMaterial`, then adds an `EdgesGeometry` wireframe to highlight the cube’s edges. It is based on the Three.js “Creating a scene” guide and uses the library’s `WebGLRenderer` for canvas-based rendering, with no external data source.

FFrissAnalytics

78% match

Loading thumbnail…

My first Three.js app

A green cube spins slowly, rendered against a black background. The example demonstrates a minimal Three.js scene. It uses a `PerspectiveCamera` and a `WebGLRenderer` to draw a box geometry with a `MeshBasicMaterial`. The cube’s rotation is updated in a `requestAnimationFrame` loop, with horizontal and vertical velocities that accumulate random jitter, producing a slightly wobbly, organic motion. A second version shows the cube as a white wireframe.

11wheel

77% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal Three.js scene featuring a rotating green cube rendered with WebGL. The code sets up a perspective camera, a box geometry with basic mesh material, and an animation loop that updates the cube’s rotation each frame. It uses Three.js’s `Scene`, `PerspectiveCamera`, `WebGLRenderer`, and `requestAnimationFrame` to create the 3D visualization. The page also includes a static HTML message styled with CSS, while the JavaScript for the cube is embedded directly in the document.

RRomersims

77% match