Skip to main content
100%

Basic Three.js App

✓ Published0🌍 Public
Aaaizemberg
Last edited May 17, 2019
Created on May 17, 2019

A single three-dimensional cube rotates continuously in a WebGL-rendered scene. The code builds the scene with Three.js, using a `THREE.PerspectiveCamera` positioned along the z-axis and a `THREE.WebGLRenderer` that fills the window. The cube itself is created from `THREE.BoxGeometry` and shaded with `THREE.MeshNormalMaterial`, which colors each face based on its normal direction. An animation loop, driven by `requestAnimationFrame`, increments the cube’s rotation around both the x and y axes, producing a smooth, perpetual spin.

AI-generated description

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

ThreeJS Starter

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.

CCurran Kelleher
80% 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…

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
79% 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
77% match