Skip to main content
SimilarExport ZIP
100%

nyc map

✓ Published0🌍 Public
Ssabrinamochi
Last edited Mar 23, 2021
Created on Mar 23, 2021
Forked from three.js

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

three.js

This example combines 2D map tiles with a 3D plane using Three.js and OpenLayers. It loads New York City basemap and label layers from a WMTS service, then wraps the rendered map canvas as a texture onto a PlaneGeometry. TrackballControls enable interactive camera rotation around the mapped plane. The scene renders via WebGL, with the map texture updating on each map postrender event.

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

three.js points

A cluster of red points, arranged as a sphere, rotates slowly in three-dimensional space against a gray background. The example demonstrates the basic use of Three.js with a WebGL renderer, constructing a sphere geometry with specified width and height segments. A directional light illuminates the points material, and the animation updates the rotation of the points object over time using `requestAnimationFrame`.

Ssabrinamochi
72% match
Loading thumbnail…

3D Cubes

The visualization renders a grid of 3D cubes in an isometric projection using React and SVG, with each cube composed of three visible faces: a front square, a top polygon, and a right polygon. The cube faces are drawn as separate SVG polygons using React components (`CubeFront`, `CubeTop`, `CubeRight`, `AbstractCubeSide`), with coordinates calculated from a front square and a fixed skew depth. The grid is arranged in a 2x2 layout with an additional series of top faces extending diagonally, creating a layered effect. The example uses React 17 and D3 v7, though D3 is loaded but not directly utilized in the rendering logic.

MMichael
72% 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
71% match
Loading thumbnail…

Untitled

A grid of 3D cubes with varying heights is rendered using the d3-3d library, with each cube colored and labeled by its height value. Users can drag to rotate the entire scene, which updates the cube positions, faces, and text labels in real time. The visualization uses d3._3d() for 3D projection, d3.drag() for interaction, and SVG transitions for smooth animations, with data generated procedurally via d3.randomUniform.

MManohar Kowthavarapu
71% match