hello-point-cloud

100%

hello-point-cloud

✓ Published0🌍 Public

Last edited May 27, 2020

Created on Apr 28, 2020

Three.js renders a small ASCII-art point cloud in 3D space, with each glyph’s pixel position offset into a cube of 1,000 randomly placed white points. The `THREE.OrbitControls` library enables interactive rotation, zoom, and pan, while a `d3.timer` loop drives continuous re-rendering of the `WebGLRenderer` scene. The code constructs a perspective camera, defines a `PointsMaterial` with vertex colors, and builds geometry via `THREE.BufferGeometry`, producing a floating, explorable message formed from millions of scattered particles.

AI-generated description

Similar vizzes

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

74% match

Loading thumbnail…

threejs-stars

A field of red points randomly positioned in a 3D space within Three.js shifts its camera perspective and refreshes the particle positions every frame. The WebGL renderer displays 60 new points per update, each snapped to a 20-unit grid, while the camera orbits and rotates based on time. The animation uses Three.js’s `PerspectiveCamera`, `Points` geometry, and `PointsMaterial` to create a continually changing star-like scatter plot.

11wheel

72% match

Loading thumbnail…

three.js webgl - simple text from json

This example renders the text "Three.js\nStroke text." as 3D geometry in a WebGL scene using Three.js. A `FontLoader` loads a typeface JSON file containing glyph outlines, from which `generateShapes` creates filled shapes with semi-transparent material and stroked outlines with darker material. The scene includes an `OrbitControls` camera for interactive rotation and a light gray background. The rendering highlights both the filled and stroked paths of each character.

LLaurens

72% match

Loading thumbnail…

points

One hundred thousand points render as colored particles in WebGL, smoothly morphing between different distributions—random walks, phyllotaxis spirals, sine waves, and grids—at regular intervals. The animation uses regl to draw points and interpolate between buffer states in the vertex shader, with a viridis colormap applied per point. A control panel lets viewers adjust point radius and the total number of points.

11wheel

69% match

Loading thumbnail…

Point Cloud

A circular point cloud displays 10,000 points arranged in concentric rings of varying radii. Each ring is generated by mapping an array of indices to circle positions using trigonometric functions, rendering individual SVG `<circle>` elements with React. The visualization uses ReactDOM to render the SVG container, with points drawn from three separate arrays at radial distances of 18, 30, and 50 units from the center.

Ssofia-martinovich

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

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

67% match

Loading thumbnail…

Three-Axis Rotation

Three rotating orthographic projections display the Earth from the perspective of three perpendicular axes, labeled λ, φ, and γ. The world-110m land data is rendered as filled paths using `d3.geoPath` and `d3.geoOrthographic`, with the rotation angles updated per frame from a timer. Each canvas uses its 2D context to clear and redraw shapes, with a sphere outline stroke for the globe boundary.

Mmbostock

65% match