Skip to main content
SimilarExport ZIP
100%

three.js points

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

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`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
83% 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…

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

hello-point-cloud

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.

11wheel
74% 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
73% 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
73% 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
72% 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
72% match