Skip to main content
100%

VR Knowledge Map

✓ Published0🌍 Public
UUtopiah
Last edited Jul 5, 2016
Created on Jul 5, 2016

A virtual reality knowledge map displays two interactive lessons on positioning and color, each featuring a colored cube, explanatory text, and a code snippet. Built with A-Frame and the aframe-text-component, the scene uses a camera entity with look and WASD controls, plus a cursor for mouse interaction. The code loads lessons from a hardcoded JavaScript object, and a query-string parameter can reposition the camera to a specific lesson. Clicking a “Save” text element opens an email with the current lesson code encoded for sharing.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Interactive dataviz for VR

This interactive dataviz places a 3D scatterplot inside a virtual reality scene using A-Frame, with five red spheres positioned along a path connected by a tube. The example shows how D3’s data-driven approach can generate VR entities, as the code iterates over a hardcoded array of coordinates to create each sphere. A gaze-based cursor triggers a custom `cursor-listener` component that raises a sphere on mouseenter, simulating selection without controllers. The scene includes transparent planes as spatial reference grids and a light blue sky, while D3 v4 remains unused beyond its inclusion in the HTML.

UUtopiah
65% match
Loading thumbnail…

VR graph

This example renders a force-directed graph as a 3D virtual reality scene using A-Frame and D3.js. It shows five nodes from the Les Misérables dataset as colored spheres, connected by cylinders sized by link value. The code uses D3’s force layout (`d3.layout.force`) to simulate node positions, then updates A-Frame entity attributes (`position`, `geometry`) on each tick. D3’s selection API handles scene creation and event binding, including a fuse cursor on the camera for VR interaction. The scene includes ambient and point lighting, a sky background, and a customized camera with visible cursor.

UUtopiah
65% match
Loading thumbnail…

Gist a60d72fb8c781bf8832dc4ea9a673382

This interactive WebVR example demonstrates how to inspect and animate 3D objects in an A-Frame scene by linking them to a media asset list. It shows how hovering over an asset in the UI selects a corresponding object, which can then be scaled up or down using the X and Z keys. The code uses A-Frame’s component system, specifically the `media-loader` attribute, to match hashes from the asset list to scene elements, and applies animation via the `AFRAME.ANIME` timeline API.

UUtopiah
64% match
Loading thumbnail…

Gist c3927fd16c93fc919a74036325faacd4

In a virtual-reality environment built with A-Frame, a video playlist automatically plays two accessibility-themed VR conference talks inside a networked 3D scene. The code defines an array of MP4 URLs hosted on an S3 bucket, creates an `a-entity` with the `media-loader` and `networked` components, and scales it to ten units while positioning it 35 units away. It disables looping and listens for the video’s `ended` event to switch to the next clip, cycling back to the first after the last. A CORS proxy URL prefixes each source, and the playback jumps near the end for testing.

UUtopiah
62% match
Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example demonstrates interactive zooming and rotating of a world map through a 3D scene, allowing for dynamic reprojection of the geography. The visualization combines D3.js for map rendering with A-Frame, a WebVR framework, to create a three-dimensional environment where the map can be manipulated. It uses the Datamaps library to render the world map with custom data fills and overlays like arcs and bubbles, while A-Frame's `a-scene` handles the 3D elements and camera controls. The map is rendered onto a canvas element, which is then used as a material on 3D objects within the scene.

AAlexanderDavidson
61% match
Loading thumbnail…

Gist b077b41a118451bbcc13bbc94caea681

This example shows a WebVR scene where the user’s viewpoint is repositioned by attaching the active camera-tool entity to an avatar rig. The code selects the last camera-tool element in the A-Frame scene, grabs the avatar rig, and uses Three.js’s `Object3D.attach()` to transfer the camera’s world transform to the rig, effectively making the rig follow the camera’s position and orientation. It demonstrates a simple way to control an avatar’s pose in a virtual environment using A-Frame’s entity-component querying and Three.js’s transform hierarchy.

UUtopiah
60% match
Loading thumbnail…

Gist e0350d5c472d4ca8006746e6446886ac

This WebGL-powered visualization demonstrates how reusable "skills" can be packaged as discrete, context-aware units for agentic coding with Claude Code. The rendering shows a network graph of skill components—including SKILL.md files, reference scripts, and constraint sets—using custom shaders to animate the relationships between repository metadata and skill load behavior. Built with Vue and Three.js, the scene maps the flow from persistent context files like CLAUDE.md to on-demand skill invocation, with color-coded nodes representing different skill anatomy parts. The visualization directly encodes the comparison table from the workshop, translating markdown structure into an interactive 3D topological map where edge thickness represents context-window footprint and script interpolation points appear as pulsing geometry.

IIoTeacher
59% match
Loading thumbnail…

Gist 2761dd6bd26cbb45163b317490fa58ff

A WebGL-based virtual reality scene built with Exokit and A-Frame loads a Hubs environment, rendering it through a WebGL 2.0 context. The visualization shows the console log output and error stack traces from the Hubs client, capturing runtime issues such as the MediaRecorder API incompatibility and schema warnings. The example demonstrates how WebXR applications can fail and log errors when running in non-standard environments, using Three.js and the Exokit browser runtime. It highlights error handling and API compatibility challenges in mixed-reality web development.

UUtopiah
59% match