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.
Related
Hello I was wondering how can i get rid of the VR button in the aframe and replace it with another link button please? I have looked all over and i can not find where it is located. I have tried the code <a-scene vr-mode-ui="enabled: false"></a-scene> but it is still there.
Joseph
Helloi figure it out. I had the code in the wrong place. I should of put it in the begining of the body and what i did was put it in the middle of the body code and that is why it wasn't working.
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.
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.
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.
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).