A-Frame - VR Horse-Racing

100%

A-Frame - VR Horse-Racing

✓ Published0🌍 Public

Last edited Feb 19, 2020

Created on Aug 9, 2018

This example presents a virtual horse-racing scene within a 360-degree panoramic view. It displays a horse-racing track as a spherical skybox, allowing the viewer to see the environment in all directions. The visualization is built with the A-Frame virtual reality framework, using the `a-scene` and `a-sky` elements to render the image. It loads a single JPEG image, "horse-racing.jpg," as the environment's texture, with the scene's rotation adjusted to 170 degrees along the Y-axis. The code relies on A-Frame's built-in VR capabilities to create the immersive visual experience.

AI-generated description

[Gist] https://gist.github.com/Hirosaji/c060385930acd37b1fbfde3833e19276

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

A-Frame × AR.js - WebAR

This example presents a web-based augmented reality scene: a single HTML page displaying a centered image of a marker. When the page is viewed through a compatible browser and camera, the marker acts as a tracking target for an AR model, though the code only shows the static marker image and does not include any AR tracking logic. The implementation uses a simple HTML `<img>` tag with inline CSS styling, rendering the marker from a local `marker.png` file. The code references an external model hosted on Google Poly and mentions a separate drawing program as part of the project’s context, but the visible HTML itself contains no JavaScript, AR library, or A-Frame integration.

HHirosaji

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

63% match

Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example shows a world map rendered on interactive 3D objects—a plane and a sphere—inside an A-Frame virtual reality scene, with the map rotating continuously over time. The geographic data is drawn to a 2D canvas using `d3.geoEquirectangular` for the projection, `d3.geoPath` for generating paths, and `d3.geoGraticule` for the grid lines. A `d3.timer` controls the animation loop, while an A-Frame component (`draw-canvas`) updates the canvas texture on the 3D entities. The map geojson includes country polygons from a natural earth dataset.

AAlexanderDavidson

63% match

Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example demonstrates a dynamic equirectangular world map that is rendered onto a canvas and then applied as a texture to both a plane and a sphere in a 3D A-Frame scene, allowing for zoom and rotation. The map, sourced from a GeoJSON file, uses `d3.geoEquirectangular` projection and a `d3.geoPath` generator to draw graticules and country boundaries. A `d3.timer` drives continuous redraws to the canvas, while the A-Frame `draw-canvas` component integrates it into the virtual environment, with the sphere and camera controls enabling interactive reprojection.

AAlexanderDavidson

61% match

Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example shows a continuously rotating and reprojecting world map rendered onto a canvas texture inside a 3D A-Frame scene. It demonstrates how geographic data can be integrated with WebVR-style environments, drawing country polygons, graticules, and the sphere outline using D3 v4’s `d3.geoMercator` projection, `d3.geoPath`, and `d3.geoGraticule`. The animation runs via `d3.timer`, updating the projection rotation each frame and clearing/redrawing the canvas context. The map uses GeoJSON world land data loaded from `land.geojson` and displays alongside a simple A-Frame box primitive.

AAlexanderDavidson

61% match

Loading thumbnail…

Raster Reprojection of panorama images (360°) with WebGL

This interactive WebGL visualization reprojects a 360-degree equirectangular panorama image into the stereographic projection, enabling smooth zoom and pan interactions. It displays the source panorama as a textured plane, with the fragment shader performing inverse stereographic projection and rotation calculations in real time. The implementation uses d3.v3 for DOM and event handling, while raw WebGL shaders manage the rendering pipeline, including a custom vertex-fragment shader pair and texture mipmapping. The code compiles shaders, sets up a position buffer for a fullscreen quad, and updates uniform variables for translation, scale, and rotation based on user input.

PPhilippe Rivière

59% match

Loading thumbnail…

Raster Reprojection of panorama images (360°)

This example shows a 360° panorama image reprojected onto a world map using a raster reprojection technique. The panorama is mapped to equirectangular coordinates, then projected to the screen using d3.geo.equirectangular. The visualization is interactive: users can click and drag to rotate the view, with d3.geo.zoom handling quaternion-based rotations for smooth, continuous navigation. The image is drawn to an offscreen canvas, and each pixel is remapped based on the inverse projection. Panning and zooming are handled by the d3.geo.zoom plugin, which modifies the projection’s scale and rotation in response to user input. The final result is rendered on a canvas element, allowing fluid exploration of the full 360° panoramic scene.

PPhilippe Rivière

58% match

Loading thumbnail…

three.js webgl - morph targets - horse

A three-dimensional horse model with animated morph targets rotates in a circular path around its center. The scene uses Three.js with the GLTFLoader to load a Horse.glb model, and an AnimationMixer plays its built-in clip. Two directional lights illuminate the mesh, which is scaled and set against a light gray background. The camera orbits continuously while the animation updates each frame, demonstrating WebGL rendering.

CCurran Kelleher

58% match