My first Three.js app

100%

My first Three.js app

✓ Published0🌍 Public

Last edited Aug 22, 2016

Created on Oct 30, 2015

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.

AI-generated description

http://threejs.org/docs/#Manual/Introduction/Creating_a_scene

Similar vizzes

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

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

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…

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

78% 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

75% match

Loading thumbnail…

threejs-sphere

A red Three.js sphere moves downward in an animated WebGL scene, with repeatedly spawned random point lights flashing around it. The sphere’s position is updated each frame based on elapsed time, creating a falling arc, while new white lights appear at random locations, producing flickering illumination on the sphere’s Lambert-shaded surface. The example demonstrates basic Three.js scene setup, mesh creation, lighting, and requestAnimationFrame-driven rendering.

11wheel

74% 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

71% match

Loading thumbnail…

sketch 02

A 3D block model rotates in a dark WebGL scene, its dimensions adjustable in real time through a dat.GUI control panel. The sketch uses Three.js with a perspective camera and OrbitControls, rendering both wireframe and flat-shaded materials to highlight the box’s edges and surfaces. Animate continuously rebuilds the geometry from parametric width, depth, and height inputs, while the directional and ambient lights define the form. The code does not load external data, relying instead on procedural geometry and interactive user sliders.

BBillyBHWong

70% match