If I use the A-Frame Asset Management System I'm having problem getting the img assets to render. Example Glitch and code below. I previously had success with the A-Frame Asset Management System, and my old projects are still working, but for some reason, new projects using the exact same format don't. If I put the URL inline, it works fine, so the assets themselves are fine, but when piped through the asset management system, not so much.
https://asset-problem.glitch.me/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
</head>
<a-scene>
<!--Assets-->
<assets>
<img id="sky" src="https://cdn.glitch.com/c96b441a-61dd-427b-86b9-ab2241e3eb22%2Ftwo_tone_sky.jpg?1538274492274">
<img id="bust" src="https://cdn.glitch.com/c96b441a-61dd-427b-86b9-ab2241e3eb22%2Fbust.jpg?1538276649814">
</assets>
<!--Sky-->
<a-sky src="#sky"></a-sky>
<!--Box-->
<a-box class="clickable" position="-2 0.5 -3" rotation="0 45 0" material="#ffccff" shadow></a-box>
<!--bust-->
<a-image src="bust" position=".5 2 -1.5" rotation="0 -25 0"></a-image>
<!--Plane-->
<a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#9999ff" shadow></a-plane>
</a-scene>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</html>
Related
I would like to make a portal in A-Frame. I followed this page on the official website. The portal is displayed, but I encountered 2 issues. Thank you in advance.
The title did not change even though I added a title tag in <a-link title="Forest"...></a-link>
I used VSCode + Live Server for development. When I click on the portal, I expected it to navigate to forest.html, but nothing happened.
My code is as below:
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/a-framedc#1.0.7/dist/aframedc.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component#^4.0.0/dist/aframe-event-set-component.min.js"></script>
</head>
<body>
<a-scene>
<!-- Assets -->
<a-assets>
<img id="forest" src="https://cdn.aframe.io/link-traversal/thumbs/forest.png">
</a-assets>
<a-link title="Forest" href="forest.html" position="0 1 1" image="#forest"></a-link>
<!--Forest Environment-->
<a-entity environment="preset: forest; dressingAmount: 100"></a-entity>
<!--A regular box-->
<a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<!--Text-->
<a-entity
text="value: Hello, A-Frame!; color: #BBB"
position="-0.9 2 -3"
scale="5 5 5"></a-entity>
</a-scene>
</body>
</html>
There is a warning in the browser console logs related to this:
The primitive a-link has a mapping collision. The attribute title has
the same name as a registered component and has been renamed to
link-title
The issue here is that there is a "title" component in the aframedc module that you have included, and so there is a clash.
https://github.com/fran-aguilar/a-framedc/blob/master/dist/aframedc.js#L90
Assuming you need to include aframedc, follow the advice in the warning, use "link-title" instead of "title" and it will work.
The way the link component works is described here:
https://aframe.io/docs/1.2.0/components/link.html
Specifically, the "on" setting configures the name of an event to use to trigger the link. Default is "click".
So to activate the link, you need to set things up so that you'll get a "click" event when someone clicks on the link entity.
On desktop, you can do that like this:
<a-scene cursor="rayOrigin:mouse" raycaster="objects:[clickable]">
And then set an attribute "clickable" on the <a-link> entity.
The reason for the raycaster component and clickable attribute is that if you enable raycasting without a filter like this, you'll get performance warnings in the console.
Also note that VR will need some different set-up, but in any case, links in VR are a whole other can of worms...
Full working code:
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/a-framedc#1.0.7/dist/aframedc.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component#^4.0.0/dist/aframe-event-set-component.min.js"></script>
</head>
<body>
<a-scene cursor="rayOrigin:mouse" raycaster="objects:[clickable]">
<!-- Assets -->
<a-assets>
<img id="forest" src="https://cdn.aframe.io/link-traversal/thumbs/forest.png">
</a-assets>
<a-link clickable href="forest.html" position="0 1 1" image="#forest" link-title="Forest"></a-link>
<!--Forest Environment-->
<a-entity environment="preset: forest; dressingAmount: 100"></a-entity>
<!--A regular box-->
<a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<!--Text-->
<a-entity
text="value: Hello, A-Frame!; color: #BBB"
position="-0.9 2 -3"
scale="5 5 5"></a-entity>
</a-scene>
</body>
</html>
Also as a Glitch here:
https://glitch.com/edit/#!/make-a-links-work?path=index.html%3A1%3A0
A-Frame Version: 1.0.4
Platform / Device: chrome safari firefox /mac os sierra
Reproducible Code Snippet or URL:
...
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://rawgit.com/oscarmarinmiro/aframe-video-controls/master/dist/aframe-video-controls.min.js"></script>
</head>
<a-video position="0 2.2 -0.5" rotation="0 0 0" width="3" height="2" depth="0" src="https://www.dropbox.com/s/7mi6b0hk0j4qaj0/3079389037345071501.MOV"></a-video>
not working white results
...
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://rawgit.com/oscarmarinmiro/aframe-video-controls/master/dist/aframe-video-controls.min.js"></script>
</head>
<a-assets><video id="penguin-sledding" autoplay src="https://www.dropbox.com/s/7mi6b0hk0j4qaj0/3079389037345071501.MOV"></video></a-assets>
<a-video position="0 2.2 -0.5" rotation="0 0 0" width="3" height="2" depth="0" src="#penguin-sledding"></a-video>
not working black results
Ok the problem is scr=... dropbox
if i put a local file no problem at all
i saw there is like access-control-allow-origin to put in the code, but i have not really understand where and how
I am working on a scene with multiple cameras set at distinct predefined positions and rotations. I noticed when I look around using the mouse (or in VR mode), the camera rotation is linked between cameras. So I thought this could be avoided by using the attribute active: false but both cameras still rotate together. Below is an example scene where both cameras are at the same position and feature an <a-box> in their field of view, notice that when you look around the scene box cubes (children of two separate cameras) move in unison. Is there a way to prevent the inactive camera from following the rotation of the active camera so that the blue cube (with the inactive camera) would stay stationary?
Also, there are no console errors related to A-Frame in this script. Your assistance is greatly appreciated, many thanks in advance for your time.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-camera active="true" look-controls>
<a-box color="red" position="-2 0 -10"></a-box>
</a-camera>
<a-camera active="false" look-controls>
<a-box color="blue" position="2 0 -10"></a-box>
</a-camera>
<a-plane color="gray" rotation="-90 0 0" width="20" height="20"></a-plane>
</a-scene>
</body>
</html>
A viable solution for this is to enable and disable the look-controls on the cameras when switching between them. This can be done in JavaScript with : newCameraElement.setAttribute('look-controls', 'enabled', true); and oldCameraElement.setAttribute('look-controls', 'enabled', false); Here's a revised version of the question's example that initially disables the other camera's look-controls to provide the desired behaviour of having distinct cameras:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-camera active="true" look-controls>
<a-box color="red" position="-2 0 -10"></a-box>
</a-camera>
<a-camera active="false" look-controls="enabled: false">
<a-box color="blue" position="2 0 -10"></a-box>
</a-camera>
<a-plane color="gray" rotation="-90 0 0" width="20" height="20"></a-plane>
</a-scene>
</body>
</html>
I am getting this error using A-frame VR v0.9.2 "Uncaught DOMException: Failed to execute 'setAttribute' on Element: 0 is not a valid attribute name." when trying to set an invisible entity as visible using Kevin Ngo's aabb-collider component.
<!DOCTYPE html>
<html>
<head>
<script src=".../aframe-v0.9.2.min.js"></script>
<script src=".../aframe-extras.min.js"></script>
<script src=".../aframe-event-set-component.js"></script>
<script src="...aframe-aabb-collider-component.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item
id="modelo"
response-type="arraybuffer"
src=".../model.glb">
</a-asset-item>
</a-assets>
<a-entity
id="3Dmodelo"
gltf-model="#modelo"
scale="1 1 1"
position="-16.7 0 -7.8"
visible="false">
</a-entity>
<a-entity
id="rig"
position="-5.481 -0.15 13"
rotation="0 0 0"
movement-controls="speed: 0.08"
aabb-collider="objects: a-box">
<a-entity
camera
geometry="primitive: box"
position="0 1.6 0"
look-controls="pointerLockEnabled: false">
</a-entity>
</a-entity>
<a-box id="testeColisao" color="red" position="-5 1 10" event-set__hitstart="modeloVisivel()"></a-box>
</a-scene>
<script type="text/javascript">
function modeloVisivel(){
document.getElementById('3Dmodelo').setAttribute('visible','true')
}
</script>
</body>
</html>
Can anyone help me please as i am struggling with the resolution of this issue. If anyone knows a better aproach for the intended please share.
Thank you.
change event-set__hitstart attribute to
event-set__hitstart="_target: #blackSofa; visible: false"
Here is event-set component's documentation https://github.com/supermedium/superframe/tree/master/components/event-set
According to it you can't set function names
I am loading an Aframe object in the wavefront format, but the texture remains invisible, that means the object appears all black:
<!doctype html>
<head>
<meta charset="utf-8">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="test-obj" src="test.obj"></a-asset-item>
<a-asset-item id="test-mtl" src="test.mtl"></a-asset-item>
</a-assets>
<a-entity position="1.75 0 1.2" rotation="0 28 0">
<a-camera near="0.1" user-height="0"></a-camera>
</a-entity>
<a-obj-model src="#test-obj" mtl="#test-mtl" scale="0.1 0.1 0.1"></a-obj-model>
<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>
</html>
How can I make the texture of this model visible?
Here's a solution that may work if the object was created in Magica Voxel or a similar editor.
Open your .mtl file in a text editor, look for the line that starts with map_Kd. Just after it is the name of another file such as "test.png".
That file must also be in the same directory as your .mtl and .obj files, so make sure you include it. It's the texture map that maps colors to locations on the object.
More information about the Wavefront .mtl file format can be found here:
https://people.cs.clemson.edu/~dhouse/courses/405/docs/brief-mtl-file-format.html