Using a-frame primitive to display 360 content - aframe

I am trying to use A-Frame to either display a 360 video or a 360 photo, but stumbled across some limitations of the a-entity framework: videosphere or sky are not accepted as an attribute, so:
this doesn't work: <a-entity geometry="primitive:videosphere", ... ></a-entity>
and this doesn't either:
<a-entity geometry="primitive:sky", ... ></a-entity>
I searched the documentation but could not find why box, plane or sphere etc. do work with a-entity, but sky or videosphere do not.
The purpose of this question is: I want to write a piece of code that is able to show 360 videos and 360 photographs and switch from one content type to another. Is there a simple solution?
Pierre

Neither videosphere, or sky, are geometry primitives. Here's the list of built-in geometries.
To switch the photographs / videos, just keep a sphere, or sky:
<a-sphere material="side:back"></a-sphere>
<a-sky></a-sky>
and switch the material.src attribute via an registered component.
ou'll have to remember to manually call play() and stop() on the videos, for they might be playing in the background.

Related

Picture Color Filters Harmonizing: Web (CSS, SVG), Snapseed, Print (GIMP/Photoshop)

In the past years multiple times I had difficulty to harmonize color filters (mainly desaturize, slight hue change, sometimes sepia or duotone, etc.) for Corporate Image Style purposes by using:
CSS: easy filter method for images in the web (limited)
SVG: advanced pics & graphics & filters edited in Inkscape (both for Web and Print use)
For Printing (CMYK) as a final target filters in GIMP or to hand
over to third party in Photoshop would complete the harmonizing.
I would be happy if I could convert/use CSS filters easily in Inkscape (it is possible but not easy) and to use them in Android-Snapseed, GIMP and Photoshop. I must admit I'm not an expert in GIMP and Photoshop. I could not find discussions about this exact topic. Example CSS Code:
filter: sepia(0.9) hue-rotate(-17deg) saturate(0.75) contrast(1.1) brightness(1.1)
Beside doing all by manual harmonizing just with the own eye has anyone the same problem and a more consistent method achieving exactly (or almost) the same color filters on the different output formats?

Custom icon for <a-cursor>

i have <a-scene> with a <a-cursor> which has the default look for display. Can I change the look and feel to a pointer or icon of some sort?
just put anything inside the <a-cursor>
check out the live fiddle, and for sure check out the docs, they're full of examples, including creating a ring - shaped cursor.
UPDATE
For some reason this anwser is getting attention, so i'd like to elaborate.
You can either use <a-cursor> primitive:
<a-camera>
<a-cursor>
<a-entity id="myCursor"></a-entity>
</a-cursor>
</a-camera>
like i did here, or utilize the cursor component:
<a-camera>
<a-entity id="myCursor" cursor></a-entity>
</a-camera>
like i did here.
Nonetheless do not be afraid of the official docs, the algolia search makes it really easy to look through.

Loading 3D file using A-frame

I want to load .obj file in a-frame scene. But sometimes file does not appear. And sometimes file is appeared but color does not appear. How can I overcome this problem?
Although it is possible to load .obj's, obj + mtl won't work properly.
A-frame recommends the .gltf format on their official website.
From my own experience, it's a good idea to convert Your model to the .gltf format.
You can find the blender exporter here.
Firstly, load your asset .obj and .mtl to your assets.
<a-assets>
<a-asset-item id="asset-obj" src=".../asset.obj"></a-asset-item>
<a-asset-item id="asset-mtl" src=".../asset.mtl"></a-asset-item>
</a-assets>
From there, you can then load in your asset. (If you have borrowed an asset from someone and want to change the color yourself then don't apply the .mtl file)
<a-entity obj-model="obj: #asset-obj; mtl: #asset-mtl">
If applying a custom color:
<a-entity obj-model="obj: #asset-obj" material="color: red">
Edit: As pointed out in the comments, the material component wont work if you want to apply a custom texture/image to the entity. However it does work fine when it comes to applying a flat colour to an object.

MagicaVoxel Matter properties not showing in A-Frame

I am using MagicaVoxel to build my scene, exporting via File > Export > obj and importing via
<a-assets>
<a-asset-item id="sceneObj" src="assets/scene.obj"></a-asset-item>
<a-asset-item id="sceneMtl" src="assets/scene.mtl"></a-asset-item>
</a-assets>
<a-entity obj-model="obj: #sceneObj; mtl: #sceneMtl"></a-entity>
I can change the material of portions of the scene via MagicaVoxel's "Matter" tools in the Render view, but properties like transparency do not transfer to the scene in A-Frame. Neither can I set transparency="true" opacity="0.5" on an entire model and see my desired results.
For now I have settled on using A-Frame primitives to create the portions of my scene that require transparency, but if it is possible to create more elements via MagicaVoxel I would prefer that for stylistic consistency and ease of workflow. Is this not possible or am I doing something wrong?
EDIT1:
Here's the version where I'm setting transparency:
- Code
- Running application
EDIT2:
Removed aframe-extras.
The Render section of MagicaVoxel is not real-time. Pre-rendered screenshots can not be run in real-time. Notice how long it takes to render each frame on each setting or camera angle you change.

How to assign different textures to sides of a box in A-Frame

Is there a way to assign different textures for each side of a box geometry in A-Frame, without building the box from 6 unique planes?
<a-box></a-box> <!-- How to apply a cubemap? -->
More specifically, how can I do a cubemap in A-Frame? Here is an example of cubemapping in three.js: http://threejs.org/examples/#webgl_materials_cubemap
Thanks!
You might want to try this component that allows you to add different textures to different sides of a-frame shapes (including boxes)
https://github.com/elbobo/aframe-multisrc-component
I think it could be more what you are looking for. Have a go, it would be great to hear how you get on with it.
You can use the Cubemap Component.
<a-scene>
<a-entity cubemap="folder: /assets/Yokohama3/"></a-entity>
</a-scene>
Attach the component to an entity using the path to the folder holding your cubemap as the attribute.
<a-entity cubemap="folder: /assets/Yokohama3/"></a-entity>
Inside the folder, the component assumes the following naming scheme:
var urls = [
'posx.jpg', 'negx.jpg',
'posy.jpg', 'negy.jpg',
'posz.jpg', 'negz.jpg'
];
This is the scheme used by Three.js's CubeTexture. If your cubemap images do not follow this scheme, you will need to rename them (or fork this repo and alter the above in index.js).

Resources