MagicaVoxel Matter properties not showing in A-Frame - aframe

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.

Related

Importing animation from MagicaVoxel to Aframe?

I have created a simple frame-based animation in MagicaVoxel(v.0.98) and can't work out how to import the model with its animation into aframe VR.
The aframe docs re using MagicaVoxel don't mention animation https://github.com/aframevr/aframe/blob/master/docs/guides/building-with-magicavoxel.md
When I look at the recommended animation-mixer component (https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders) it says that only glTF and three.js models support animation. glTF isn't one of the export options in MagicaVoxel but I'm not sure whether it would be possible to convert a MagicaVoxel export into that format.
Am I right in thinking that at present you can't create animations in MagicVoxel and import them along with your model into aframe? the above documentation points to that but doesn't say it explicitly. Likewise I haven't found documentation for MagicaVoxel that says clearly one way or the other.
Thanks in advance
MagicaVoxel cannot export to any formats that support animation, and in any case the type of animation it uses isn't a fit for typical formats that do support animation (via keyframes, morph targets, and skinning). You would need to export each frame of your animation as a separate OBJ and then import them all. You can use A-Frame's animation feature or some JavaScript to swap them out over time.
See: https://forum.sketchfab.com/t/how-to-export-an-animation-from-magicavoxel/15460/10
MagicaVoxel animations are rendered frame-by-frame stop-motion style animations, they don't actually create any real-time animations. You can use a second tool to try to add animation (e.g., Mixamo).

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.

Using a-frame primitive to display 360 content

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.

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).

Embedding SVG in XUL

I want to Embed SVG into XUL. I tried to use the this tutorial which requires pasting of the SVG code in XUL application and it works but this is not clean. I want to keep SVG and XUL files separate, further I will like to use a separate CSS file for SVG part, any examples how we can do this?
You can use xul-overlays:
1) Declare the overlay at the top of your xul file:
<?xul-overlay href="africa.svg"?>
2) Define an empty container svg element inside your xul file and assign the same id to it as to the main svg element in the included file.
<box>
<svg:svg id="mapa" />
</box>
3) Remember to use a separate namespace for the svg part (see svg:svg above) and declare it.
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:svg="http://www.w3.org/2000/svg">
4) Make your svg file an overlay by putting an overlay declaration all around (I'm afraid you have to do this).
<overlay xmlns="http://www.w3.org/2000/svg">
<svg id="mapa">
...
</overlay>
About separate css files: Just create two of them and include them wherever you want - even in the svg overlay.
You might want to look inside a working example - a small geography quiz which I created years ago and just updated yesterday to make it work again in current firefoxes:
http://open-projects.net/~nico/countryquiz/
Just look at the source files!

Resources