Loading 3D file using A-frame - aframe

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.

Related

How to reference a Sass stylesheet within SVG in a React App

For background, I am trying to load SVG icons in my react app and am using the object tag so that I can manipulate the color of the icons easily.
In this guide, they say:
If you want to use external styles, which are mostly much easier to work with and maintain, you can’t use or background-image. If you are using you need to reference your stylesheet internally from the SVG file (see code following). Remember: if you do this the SVG will also not be able to know what its parent class is (i.e. the ) so don’t try to use that in its styling. Inline SVGs don’t need this added and therefore can be slightly easier to work with in this sense.
and provide this code example:
// Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>
// In style.css
.firstb { fill: yellow; }
.secondb { fill: red; }
To give you an idea of how my files are organized, my src folder contains an assets folder along with my components folder. My style.scss file lives within the src folder as well.
I'm having trouble figuring out what to add to the top of my svg files. My understanding of sass is that it would usually compile style.scss to style.css, however, when I look at my sources in dev tools it shows that style.scss is being loaded directly. Is this just because I'm still in development mode?
Anyways, I've tried the following (none of which have worked):
<?xml-stylesheet type="text/css" href="./style.scss"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<?xml-stylesheet type="text/css" href="style.scss"?>
It would be a huge help if anyone knows how I can get this to work! Let me know if there's any other information I can provide. Thanks so much!
You are correct to assume that you'd need to compile style.scss to style.css, so first ensure that only the CSS is being referenced in the SVG. This is the most straightforward way to get this to work, but a better solution would be to import your styles once in your root HTML template instead.
Now, if you're using React it's likely that you're also using a bundler such as webpack. You can tell bundlers like webpack to handle non-JS imports such as Sass files by using loaders. There is a sass-loader for webpack that will allow you to import Sass files, however you may also need to add the svg-inline-loader so that you can import the SVG directly.
I think with both loaders, what will happen is that webpack will start bundling your React app, see that an SVG is imported, grab it and see that it is referencing a Sass file, grab the sass file and compile it, and then output the styles in your index.html file. Please let me know if this solution works for you!
I found a workaround. Not exactly what I was hoping for, but it works for me.
There's a react-svg package that handles an ajax request and pulls the svg in as a normal svg tag. This allows me to edit with my sass file.
https://www.npmjs.com/package/react-svg

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.

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.

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