Skip to main content
100%

three.js - Jotunheimen

✓ Published0🌍 Public
Aalanmclean
Last edited Feb 3, 2014
Created on Feb 3, 2014

A GPS track of a run in Jotunheimen, Norway, is rendered as a single continuous line floating in 3D space using Three.js. The code loads an XML activity file and extracts trackpoints, mapping latitude and longitude coordinates through a D3 transverse Mercator projection into Three.js vector positions, while altitude values are ignored in favor of a fixed z-coordinate. The line is drawn with `THREE.Line` and `LineBasicMaterial`, and the scene uses an ambient light and a perspective camera for a static WebGL view.

AI-generated description

Similar vizzes

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

Gist b2644a6ec6b1fd1a95ef87d5a93ec93c

This example visualizes a GPS track as a three-dimensional path using a MultiLineString GeoJSON feature. The data, sourced from a gist by FergusDevelopmentLLC, is rendered with altitude encoded as the third coordinate in each vertex. The visualization highlights the elevation changes along the path through a continuous line, with the points tracing a looping route. The use of 3D coordinates allows the viewer to perceive the terrain's vertical profile alongside its horizontal extent, making it useful for analyzing elevation gain, slope, and path shape in a compact, geographic context.

WWill Carter
66% 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
66% match
Loading thumbnail…

3D Force-Directed Graph (ThreeJS)

This example shows an interactive 3D force-directed graph rendered with Three.js WebGL, using ngraph.forcelayout3d for physics simulation and trackball controls for rotation, zoom, and panning. It cycles through three topological data sets—Les Misérables character co-occurrences, a blocks.json citation network, and D3 source-code dependencies—with node size, color, and name mapped per dataset using Three.js spheres, line geometry, and raycaster-based tooltips.

TThanaporn-sk
66% match
Loading thumbnail…

Gist fcaa6cc1968b4cd0eac0f15d1f0ff3f4

This visualization maps geographic data onto a three-dimensional globe using D3.js and Three.js. It renders landmasses as extruded polygons via `d3.geoPath` and converts them to Three.js geometry, while a `d3.forceSimulation` drives the rotation of the globe. The example also applies a canvas-based texture through `getImageData` to overlay graticule lines and subtle shading, and it animates the camera with `transition.attrTween` to smoothly orbit the planet. The data comes from a GeoJSON source embedded in the gist file.

YYannael
66% match
Loading thumbnail…

Fork of Fork of Fork of Migrant Deaths Linked Views with Fast Brushing

A 3D Earth globe rendered in Three.js visualizes country boundaries from a GeoJSON file, with each polygon colored in warm amber tones. The globe rotates continuously as users can interact via TrackballControls for panning and zooming. Post-processing effects from the `postprocessing` library add a bloom glow to the scene. The code loads the ThreeGlobe library to display the earth texture and topology bump map, while D3's timer drives the animation loop.

Oocasfre@gmail.com
65% 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
65% match
Loading thumbnail…

Fork of Fork of Migrant Deaths Linked Views with Fast Brushing

A WebGL globe, built with Three.js and the ThreeGlobe plugin, visualizes country polygons from a Natural Earth GeoJSON file. The scene rotates automatically and supports interactive zooming and rotation via TrackballControls. A post-processing BloomEffect enhances the visual output, while d3.timer drives the animation loop. The code uses D3.js to fetch the geographic data, which is rendered with semi-transparent orange caps and dark strokes.

Oocasfre@gmail.com
65% match