Augmented & Virtual Reality

I have created a repo with examples on how to build easy prototypes with ARjs and AFRAME.

If you want to simply display a 3D-object you created in JSCAD, then use the 01_basic_vr or 02_basic_ar example from the repo above. To convert your 3D-object into the right format, open it in Blender and save it as gltf.

In addition here is an example on how to build a 2D augmented reality tool, which places a p5js canvas in the real world.


The easiest is to copy the boilerplate form the prototyping repo. But you can also add it to your p5js repo:

  1. Download aframe-ar.js and save it to code/libraries.

  2. Download aframe-v1.2.0.min.js and save it to code/libraries.

p5js + arjs + aframe

Here is the sample HTML setup:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<script src="../libraries/aframe-v1.2.0.min.js"></script>
<script src="../libraries/aframe-ar.js"></script>
<script src="../libraries/p5js/p5.min.js"></script>
<script src="sketch.js"></script>
<a-scene embedded arjs>
<a-assets id="assets-container"></a-assets>

And here is the sketch.js file:

function setup() {
const canvas = createCanvas(400, 400);
const canvasEl = document.querySelector('a-assets>canvas');
canvasEl.setAttribute('id', 'textureCanvas');

const plane = document.createElement('a-plane');
plane.setAttribute('id', 'planeObject')
plane.setAttribute('position', '0 2 -5');
plane.setAttribute('rotation', '0 0 0');
plane.setAttribute('width', '4');
plane.setAttribute('height', '4');
plane.setAttribute('material', 'src: #textureCanvas; transparent: true; opacity: 0.75;');

function draw() {
rect(10, 10, 380, 380);

for (let c = 0; c < 10; c += 1) {
circle(random(15, 385), random(15, 385), 5);

let material = document.querySelector('#planeObject').getObject3D('mesh').material;
if ( { = true;

In the setup we are adding simple plane to our AR/VR scene and then we are using our canvas as the material/texture. After that you can simply draw things like in a normal p5js project. Just make sure to keep the last 4 lines of draw, this makes sure the ar/vr object is updated after we draw something new to the canvas.

You could also combine this with a marker setup. Explore the ar-prototyping repo for more examples.

Zurück zum Anfang