Using aframe, I would like to display a flat image with transparency (e.g. as png) which is dark when no light points at it. The parameter I figured out is emissiveIntensity, which is not recognized when using a-image (according to the console of my Chrome Browser):
<a-image src="#img-colorwheel"
position="8 3 -10"
rotation="0 0 0"
height="5"
width="5"
material="emissiveIntensity:0;">
</a-image>
When using a regular a-entity, it works:
<a-entity geometry="primitive: plane; height:5; width:5;"
material="src:#img-colorwheel; emissiveIntensity:0;"
position="0 2 -19.9"
rotation="0 0 0">
</a-entity>
My problem is, that in this case the transparent part of the png is displayed in white color.
Any hints - or workarounds?
Working with a-frame 0.7.0; same issue with 0.7.1
The <a-image> does not have the emissive mappings. You can also check it out, by searching for a-image in the source code, where You can see the mappings.
I would use the entity, since the a-image is clearly an abridged version of a-entity with the plane geometry.
If You really need the <a-image> with emissive, You need to change the shader, since <a-image> uses the meshBasicMaterial. Check out it's properties. No emissive. What needs to be done is:
<a-image src="https://i.imgur.com/wjobVTN.jpg"
position="0 2 -3"
rotation="0 0 0"
height="5"
width="5"
material = "shader:standard;color:blue;
emissive:red;emissiveIntensity:2">
</a-image>
like i did here.
Ofc You could make a component, which changes the material to any other, but the meshStandardMaterial should be sufficient.
Related
I'm trying to use A-Frame within Webflow, however, I've hit a roadblock pretty quick.
The embedded A-Frame element will always take up 100% of the screen with no ability to scroll or anything, as if in full screen constantly.
I just want the A-Frame element to fit within a box (A div specifically) on the page allowing me to display other content on the page around it as well. I tried looking through their content and guides as well as searching to no avail.
Currently, I have my:
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
Within the project settings > custom code > Head section
and then the actual A-Frame content code within a specifically sized div element using the embed tool:
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
Use the embedded component or use an <iframe> to place your scene.
I'm using A-Frame 1.0.0 and my basic scene is not rendering in Chrome m79 when using an Oculus headset: Rift, Rift S or Quest via link.
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
I click the enter VR button but I cannot see my content in headset. There are no errors in console
Make sure you do the following:
Make sure you are serving your content over https as it's enforced by the new WebXR standard.
Disable XR device sandboxing in chrome://flags
If the above doesn't work. In some laptops with NVidia cards Chrome might default to integrated graphics. Locate Chrome in NVIDIA Control Panel -> Manage 3D Settings -> Program Settings and select High-performance NVIDIA processor in the Select the preferred graphics processor for this program dropdown. Be aware that this option might cause Chrome to consume more battery.
I've tried <a-videosphere> and <a-video> and they are great.
But if i use a "normal" video, it is incredibly stretched with a-videosphere and just flat with a-video.
But is there a way for the video to be curved around the user ?
Just like if the user was inside a cylinder : similar to a-curvedimage but for a video.
EDIT (problem with a-curvedimage and src) :
You can display a video as a texture on any geometry by using the src attribute:
<a-box src="#video"></a-box>
<a-curvedimage src="#video"></a-curvedimage>
<a-torus-knot src="#video"></a-torus-knot>
remixed example glitch here.
If you're asking if you can make a normal video equirectangular, without earlier preparation, or some image manipulation library, aframe won't do it for you.
I encountered the same issue with a-curvedimage and the src attribute, and solved it by using the generic a-entity element instead, recreating the open-ended, double-sided cylinder of the a-curvedimage element.
Example for a 1280x720 video:
<a-scene>
<a-assets>
<video id="myvideo" preload="auto" src="/path/to/video.mp4" width="1280" height="720" autoplay="true" loop="true" crossorigin="anonymous" playsinline="" webkit-playsinline=""></video>
</a-assets>
<a-entity material="shader: flat; side: double; src: #myvideo" geometry="primitive: cylinder; radius: 5; height: 3.6815; open-ended: true; theta-start: 142.5; theta-length: 75; position="0 1.5 0" rotation="0 0 0" scale="-1 1 1"></a-entity>
</a-scene>
Additional Info:
Stefie has a great calculator for the attributes of different dimensions for curved images and videos.
Edit: Video was inverted on the X-Axis to the user, so added a scale attribute with -1 for the X-Axis.
I'm trying to include a STL file like a GLTF object in my A-Frame page, but I'm not making progress. I don't understand why the file doesn't work in a similar manner. Here is my code for the working page on Glitch with a GLTF file and a non-working one with the STL file. All object files are hosted on GitHub.
glitch.com/edit/#!/dramatic-hornet
(below is the non-working code excerpt copied from Glitch)
<a-scene>
<a-assets>
<a-asset-item id="object" src="https://github.com/rschildge/models/raw/master/NinjaSpinner.stl"></a-asset-item>
</a-assets>
<a-entity model="#object" position="0 0 -4" scale=".1 .1 .1"></a-entity>
<!-- <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>-->
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
As far as i know, a-frame's core doesn't have any loader for the .stl format.
There is a pretty recent community-made loader, be sure to check it out.
If it won't work, be sure to file an issue. If it works - give it a friendly star.
As for models in general, the a-frame team recommends the glTF format in the docs, as it is designed for webGL.
As for the model=.. syntax, you need to use a loader component, either the gltf-loader (like you do on glitch), or any other, but it won't work just with a model keyword
I am trying to create a simple animation of falling dices. With below code, I am trying to apply a cubemap to a-box but not able get the desired results.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.2.0/aframe.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-cubemap id="sky">
<img src="dice/Dice-1.png">
<img src="dice/Dice-2.png">
<img src="dice/Dice-3.png">
<img src="dice/Dice-4.png">
<img src="dice/Dice-5.png">
<img src="dice/Dice-6.png">
</a-cubemap>
</a-assets>
<a-entity geometry="primitive: box" material="envMap: #sky"></a-entity>
</a-scene>
</body>
</html>
As far as i know, environmental maps, using i.e. cubemaps, are used to provide a sphere environment, or work with reflecion/refraction, by providing a map of the surrounding environment.
In Your case, I would use a texture for <a-box>, or create a custom box made of planes, and texture them accordingly like this:
<a-entity id="dice">
<a-plane position="-0.5 0 0" rotation="0 -90 0"></a-plane>
<a-plane position="0.5 0 0" rotation="0 90 0"></a-plane>
<a-plane position="0 0.5 0" rotation="-90 0 0"></a-plane>
<a-plane position="0 -0.5 0" rotation="90 0 0"></a-plane>
<a-plane position="0 0 0.5" rotation="0 0 -90"></a-plane>
<a-plane position="0 0 -0.5" rotation="0 0 90"></a-plane>
</a-entity>
working fiddle: https://jsfiddle.net/x8dt1jjb/.
Cubemaps:
As I see from multiple sources, cubemaps had many issues:
Like here or here
I found some guy claiming that cubemaps work on all entities except the first one, check out his github,
cubemaps are working on his index.html
Please note, indeed cubemaps on his example are not working on the first entity, so my advice would be copying his cubemap declarations, and create <a-entity> with your envMap applied, but with scale="0 0 0", or visible="false". When made so, the first entity get's 'bugged' (but invisible, so who cares), and Your entity should work fine.
Works properly for me, inverted my sources though: http://gftruj.nazwa.pl/cubemap/
Note, that there is an order in which You need to declare faces of Your cubemap, as explained here. Looking at a dice cubemap, you need to get your order straight, for example:
dice-5, dice-2, dice-4, dice-3, dice-6, dice-1
btw I found a cubemap component, didn't tried it yet though.