A-Frame × AR.js - WebAR

100%

A-Frame × AR.js - WebAR

✓ Published0🌍 Public

Last edited Feb 21, 2019

Created on Sep 6, 2018

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.

AI-generated description

▶︎ What's this?: Simple WebAR marker

▶︎ Model data: https://poly.google.com/view/cbs0TYc3ywi

▶︎ Drawing program: https://github.com/Hirosaji/toy-codes/tree/master/webAR

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

A-Frame - VR Horse-Racing

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.

HHirosaji

66% match

Loading thumbnail…

Arpi_Fork of HTML Starter Part 1

This example shows a simple static SVG face composed of three circles, with a large yellow circle for the head and two smaller black circles for the eyes. The rendering uses raw SVG elements defined directly in the HTML, with CSS to reset the page margins and hide overflow. JavaScript is not used, and the geometry is hardcoded via the `cx`, `cy`, and `r` attributes on each `<circle>` element. The visualization demonstrates basic SVG shape construction without any data binding or interaction.

Kkarapety-a

58% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example displays a simple geometric composition of black rectangles arranged on a white SVG canvas, with the letter “A” positioned in the upper-left corner. The visualization renders static shapes using raw SVG elements defined directly in the HTML markup, including `<rect>`, `<path>`, and `<text>` tags. The code does not rely on any external libraries or frameworks, using only plain HTML, CSS for styling, and inline SVG for drawing. The layout suggests an abstract, minimal design rather than data-driven content.

LLucia Cerchie

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

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

57% match

Loading thumbnail…

aRJUN

This example presents a minimal web page built with React, rendered through a single HTML file. The page uses CSS for styling and JavaScript for interactivity, though the styles and script sections are currently empty, leaving the visualization undefined. The code references a React Starter template from VizHub, indicating the project structure relies on React’s component-based architecture. The visualization does not yet demonstrate any specific data or rendering technique, as the body contains no elements or imported libraries.

Aarjun-lab663

56% match

Loading thumbnail…

Arindam's Fork of HTML Starter

This example presents a single, unstyled circle centered within a 1200 by 1200 pixel SVG canvas. The page is built from a minimal HTML document that links to no external libraries, relying solely on inline CSS to remove page margins and hide overflow. The SVG element contains a circle with a set radius but no fill, stroke, or positioning attributes, leaving its default appearance and location. The code demonstrates the basic structure of an HTML page with embedded SVG, using standard JavaScript and CSS for document setup rather than any data-driven or interactive visualization logic.

AArindam Mukherjee

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

56% match