Skip to main content
SimilarExport ZIP
100%

My first three.js app

✓ Published0🌍 Public
Hhenrik.voigt@uni-jena.de
Last edited Oct 26, 2021
Created on Oct 26, 2021
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
90% match
Loading thumbnail…

My first three.js app

This example renders a 3D model of a two-cylinder engine inside a minimal web page. It uses Three.js with a WebGL renderer, importing the model from a local GLB file via the GLTFLoader. The scene adds the model at a fixed position and scale, sets up a perspective camera, and performs a single static render. The code also includes commented-out boilerplate for animating a rotating cube, but the active behavior is limited to loading and displaying the engine model.

AAron Gaden
81% 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
79% 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
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
76% match
Loading thumbnail…

nyc map

This example displays three rotating three-dimensional cubes on a gray background, each spinning continuously around its x- and y-axes. Built with Three.js and rendered to a Canvas via WebGL, the scene uses a perspective camera and directional lighting to give the geometric shapes depth. The cubes are created with `THREE.BoxGeometry` and `MeshPhongMaterial`, and the animation loop uses `requestAnimationFrame` to update rotations over time.

Ssabrinamochi
74% match
Loading thumbnail…

React & D3 Starter

A rotating torus knot rendered in three.js WebGL demonstrates a React component lifecycle. The App component instantiates a Three.js scene, perspective camera, and WebGL renderer, appending the canvas to a ref-mounted div. A `MeshPhongMaterial` with a neon specular highlight receives directional lighting, while the animation loop increments rotation on both axes. The example integrates React with imperative Three.js setup, using `useEffect` for scene creation and cleanup.

MMichael Bergerson
71% match
Loading thumbnail…

JS Bin

A spinning 3D cube displays a live digital clock on each face, using Three.js for WebGL rendering. The clock face itself is drawn into a 2D canvas via the Canvas API (`fillText`, `fillRect`), then mapped onto the cube as a `THREE.Texture` updated each frame. The animation loop rotates the mesh while calling `texture.needsUpdate` to refresh the time display, combining a raw canvas with a Three.js `MeshBasicMaterial`. The scene uses a perspective camera and box geometry sized 200 units.

MMAKIO135
71% match