Category: Examples

A-Frame & ARjs with Urban Power 3D model

The below example shows using A-Frame together with ARjs to show an Urban Power 3D model (Havnegade in Næstved).

Please notice, that it is necessary to add a link to a JavaScript library containing the ARjs component.

The example should use a custom marker, but this doesn’t work!!! So just use a printout of one of the preset markers, when you test it.

Please use Firefox as browser, when you test it (also on your phone).

The model is not correctly positioned/rotated, so you must do that to make it show nicely. As the model is quite big, it can be necessary to step a bit back from the marker to show the model!!!

 

A-Frame & ARjs with basic 3D model

The below example shows using A-Frame together with ARjs to show a basic 3D model of a rocket.

Please notice, that it is necessary to add a link to a JavaScript library containing the ARjs component.

The example uses a standard marker called “Hiro”.

Please use Firefox as browser, when you test it (also on your phone).

 

A-Frame – dynamic JavaScript, code part (.js)

The below example shows using A-Frame together with JavaScript.

The example shows, how to animate a sphere on a plane.

This is the JavaScript part.

 

A-Frame – dynamic JavaScript, HTML part

The below example shows using A-Frame together with JavaScript.

The example shows, how to animate a sphere on a plane.

 

A-Frame – a-cursor without click

The below example shows using a-cursor with no click event, but with  mouseenter & moveleave events, which will show/hide a text (“HELLO WORLD!”) hovering over a box.

Please notice, that it is necessary to add a link to a JavaScript library containing the text component, and that the component only works with A-Frame releases from 0.4.0 and below!

 

A-Frame – a-cursor with click

The below example shows using a-cursor, where a click event will rotate a box. Mouseenter & moveleave events will scale the box up and down.

 

 

Insert a logo in a 360 image

You make an 360 image, but want to hide the tripod, the artifacts of the stitching or just want to watermark your artwork with a mark of your own.

The simple way is to insert the text in a box in the bottom (~300px) of the image.

Panoramic image with text
Open the panoramic image in a image editor and insert at box with text in the bottom of the image. Then save it.

Thus it will cover the tripod etc. Due to the mapping of the image to a sphere the logo will be exposed to a spheric compression making it look “blown up”.

Bottom plate shown in 360 image
When shown as a sphere the 360 will have a logo like this.

If you’re inclined to show off, you can also spend a little more time and make it look “awesome”, or, just pretend to have too much time on your hands.

Spiral bottom plate in speric image
Using the right combination of distortion-effects can enable nice results
panorama with sphered footer
I may look weird, but when mapped to a sphere, it becomes distorted back to how it was supposed to look

Technique is shown in this video-tutorial.

A-Frame – controls

The below example shows using controls on a 3D model of Axeltorv (Næstved) in the .glTF format.

 

A-Frame – 3D models

The below example shows a ready-made 3D model downloaded from Google Blocks – the 3D model is a rocket shown beside three primitives.

 

A-Frame – primitives