Skip to main content
SimilarExport ZIP
100%

three.js

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Wow 3D Map

A 3D terrain map of a game world is rendered as an interactive, rotating surface. A heightmap drives vertex displacement, with multiple textures such as ocean, sand, grass, rock, and snow blended via a custom GLSL shader based on elevation. The visualization uses Three.js with WebGL rendering, OrbitControls for camera navigation, and D3 for CSV data loading. The scene includes a point light, a semi-transparent water plane, and a checkerboard ground, all presented at five times standard pixel density for clarity on high-DPI displays.

Mmeperezcuello
69% match
Loading thumbnail…

GeoJSON in Three.js

A rotating three-dimensional wireframe globe renders world landmasses in red over a gray graticule grid, animated via Three.js WebGL. The code loads world-atlas TopoJSON, converts it to a GeoJSON mesh with topojson.mesh, and maps longitude/latitude coordinates to Cartesian points on a sphere. A spherical MultiLineString graticule is built manually, and both layers use Three.js LineSegments with LineBasicMaterial, rotated continuously by d3.timer.

Mmbostock
69% match
Loading thumbnail…

A D3 Map, points plotted with canvas instead of SVG

This example shows a zoomable map of Manhattan with tree locations from a CSV file, plotted as red circles. It uses D3 v3 for map tile fetching and projection, while rendering the points onto a Canvas 2D context instead of SVG for performance. The code demonstrates a hybrid approach where D3's `d3.geo.tile` and `d3.geo.mercator` handle geographic transforms, and the canvas context draws arcs at projected coordinates. Zooming and panning trigger redraws, and the mouse position is displayed with latitude/longitude.

SShweta-tech
68% match
Loading thumbnail…

Three.js Geometry Browser

This interactive Three.js example demonstrates a real-time 3D geometry explorer, allowing users to cycle through and modify a variety of parametric shapes, including boxes, cylinders, and custom polyhedra like the gem form. It shows how wireframe overlays and solid meshes update together as parameters change. The code relies on the Three.js library, using `PolyhedronGeometry`, `WireframeGeometry`, and `OrbitControls` for camera interaction, while `dat.gui` provides the control panel for adjusting geometry dimensions and segmentation. Rendering is handled through WebGL with continuous animation, and a separate HTML link opens the scene in a new window.

BBillyBHWong
68% match
Loading thumbnail…

Terrain Generator (Beta)

This example renders a 3D terrain mesh from a heightmap image using Three.js and D3. It loads elevation data from a CSV or texture, applies a custom GLSL shader to displace vertices, and maps textures onto the surface based on height thresholds. The scene includes an animated water plane, orbit controls for navigation, and uses WebGL for rendering.

Mmeperezcuello
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…

Wow 3D Map

A 3D terrain map of Azeroth renders mountains and valleys as an interactive WebGL scene using Three.js. The terrain elevation comes from a PNG heightmap texture, which is converted into a custom shader material that blends multiple textures based on height. D3 loads the heightmap data via CSV. Users can orbit, zoom, and pan the scene with Three.js OrbitControls, which also supports auto-rotation animation.

Mmeperezcuello
67% match