I'm trying to add an image to my scene with src pointing to one of the items inside assets tag:
<a-assets>
<a-asset-item id="shoot" src="/assets/icons/shoot.png"></a-asset-item>
</a-assets>
...
<a-image src="#shoot"
position="0 0 -0.2"
scale="0.05 0.05 0.05"
material="alphaTest: 0.5"></a-image>
...
And I'm getting the following error in console:
THREE.WebGLState: TypeError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Overload resolution failed.
at Object.texImage2D (aframe-master.js:27470)
at uploadTexture (aframe-master.js:28387)
at setTexture2D (aframe-master.js:27939)
at WebGLTextures.safeSetTexture2D (aframe-master.js:28819)
at SingleUniform.setValueT1 [as setValue] (aframe-master.js:23479)
at Function.WebGLUniforms.upload (aframe-master.js:23938)
at setProgram (aframe-master.js:32143)
at WebGLRenderer.renderBufferDirect (aframe-master.js:30878)
at renderObject (aframe-master.js:31625)
at renderObjects (aframe-master.js:31595)
at WebGLRenderer.render (aframe-master.js:31376)
at HTMLElement.render (aframe-master.js:79612)
at bound (aframe-master.js:83391)
at onAnimationFrame (aframe-master.js:31231)
at onAnimationFrame (aframe-master.js:21566)
I've tried to load it this way also, but it didn't work:
<a-assets>
<a-asset-item id="shoot" src="/assets/icons/shoot.png"></a-asset-item>
</a-assets>
<a-image src="/assets/icons/shoot.png"
position="0 0 -0.2"
scale="0.05 0.05 0.05"
material="alphaTest: 0.5"></a-image>
But if I remove a-asset-item, it works:
<a-image src="/assets/icons/shoot.png"
position="0 0 -0.2"
scale="0.05 0.05 0.05"
material="alphaTest: 0.5"></a-image>
Could you please advice what I'm doing wrong? Is it a bug?
My bad. I should have used img instead of a-asset-item tag
Yeah, Similar issue I have found two days ago, Actually a-assets works only when you are running it through server. I have solve this by using django.
Related
I'm getting the following error when using a simple plane as a nav-mesh and setting my rig's movement-controls="constrainToNavMesh: true".
aframe-extras.min.js:1 Uncaught TypeError: Cannot read property 'forEach' of undefined
at m.getClosestNode (aframe-extras.min.js:1)
at o.getNode (aframe-extras.min.js:1)
at i.<anonymous> (aframe-extras.min.js:1)
at HTMLElement.tick (a-scene.js:709)
at HTMLElement.render (a-scene.js:759)
at bind.js:12
at f (three.js:24703)
at e (three.js:15038)
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.0/dist/aframe-extras.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
<a-entity id="rig" position="0 0 0" movement-controls="constrainToNavMesh: true">
<a-entity id="camera" camera position="0 1.6 0"></a-entity>
</a-entity>
<a-entity geometry="primitive: plane; height: 350; width: 350;" position="0 0 0" rotation="-90 0 0" static-body nav-mesh>
</a-entity>
Is this a known bug? I first thought there was a conflict, but the problem persists even when all other includes are stripped out. All models load fine, and everything else is working.
Error happens only when movement is started by pressing arrow keys. Any advice?
Problem for me was that the nav mesh was too big. Using the same nav mesh scaled down worked. You might have to scale down your whole project, but that is the only solution I know of.
I am new to A-Frame and still trying to figure everything out! I'm currently constructing a 3D space and would like to create a guided experience for visitors by providing dots on the floor for them to click and be transported to that position. I found this code online which is perfect but I can't get it to work.
Here is the link to my project on Glitch: https://glitch.com/~museum-exhibit-demo
This is the code for my camera:
<a-entity position="1.8 -1.1 3" rotation="0 90 0" id="pov">
<a-camera universal-controls="movementControls: checkpoint" checkpoint-controls="mode: animate">
<a-entity cursor position="0 0 -1" geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.015;" material="color: #CCC; shader: flat;"> </a-entity>
</a-camera>
</a-entity>
And this is the code for the cylinder:
<a-cylinder checkpoint radius="0.1.5" height="0.01" position="-0.164 0.111 2.363" color="#39BB82"></a-cylinder>
Can anyone spot where I'm going wrong?
UPDATE:
I just read the current source of aframe-extra and it seems that nothing is broken! In fact there was a backward-incompatible change in the new versions. Rather than the old syntax of:
universal-controls="movementControls: checkpoint;"
Now this new syntax should be used:
movement-controls="controls: checkpoint;"
But keep in mind that since version 3.2.7, the movement offset is calculated on all 3 XYZ axis and therefore the camera will move to the center of the checkpoint. If you want to preserve the height (y) then simply add the code below above line 83:
targetPosition.y = position.y;
Here is a complete working example:
<html>
<head>
<meta charset="utf-8">
<title>Checkpoint Control with AFrame 1.2.0</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.1/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene stats>
<!-- CAMERA -->
<a-entity position="0 0 0" id="pov">
<a-camera camera="active: true; spectator: false;" look-controls="pointerLockEnabled:true" movement-controls="controls: checkpoint;" checkpoint-controls="mode: animate; animateSpeed: 10" wasd-controls="enabled: false;" position="0 1.6 22">
<a-cursor></a-cursor>
</a-camera>
</a-entity>
<!-- CHECKPOINTS -->
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 20" color="#FF0000"></a-cylinder>
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 16" color="#FF0000"></a-cylinder>
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 12" color="#FF0000"></a-cylinder>
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 8" color="#FF0000"></a-cylinder>
</a-scene>
</body>
</html>
Information below this line is not valid anymore.
As Piotr already mentioned, the new releases of Aframe-Extra are somehow broken!
Using an older version everything will work again.
Below is a working example with Aframe-extra version 3.2.7.
Once the page is fully loaded, click on the screen to lock the cursor, then point the cursor (tiny ring) at a red circle and click.
I also noted few additional options just in case:
spectator: false (switch between 1st and 3rd person view)
pointerLockEnabled:true (hide the mouse)
mode: animate (the other option is teleport)
animateSpeed: 10 (well... adjusts the animation speed)
wasd-controls="enabled: false;" (otherwise user can move around via WASD/arrow keys)
Code:
<html>
<head>
<meta charset="utf-8">
<title>Checkpoint Control with AFrame 1.2.0</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v3.2.7/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene stats>
<!-- CAMERA -->
<a-entity position="0 0 0" id="pov">
<a-camera camera="active: true; spectator: false;" look-controls="pointerLockEnabled:true" universal-controls="movementControls: checkpoint;" checkpoint-controls="mode: animate; animateSpeed: 10" wasd-controls="enabled: false;" position="0 1.6 22">
<a-cursor></a-cursor>
</a-camera>
</a-entity>
<!-- CHECKPOINTS -->
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 20" color="#FF0000"></a-cylinder>
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 16" color="#FF0000"></a-cylinder>
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 12" color="#FF0000"></a-cylinder>
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 8" color="#FF0000"></a-cylinder>
</a-scene>
</body>
</html>
This won't answer the question, but should solve your problem.
You can substitute the checkpoint-controls with a simple animation system:
you click on a cylinder
you animate the camera from the current position to the cylinder
Which could be implemented like this:
// use a system to keep a global track if we are already moving
AFRAME.registerSystem('goto', {
init: function() {
this.isMoving = false
}
})
// this component will have the actual logic
AFRAME.registerComponent('goto', {
init: function() {
let camRig = document.querySelector('#rig')
// upon click - move the camera
this.el.addEventListener('click', e => {
// check if we are already moving
if (this.system.isMoving) return;
// lock other attempts to move
this.system.isMoving = true
// grab the positions
let targetPos = this.el.getAttribute("position")
let rigPos = camRig.getAttribute("position")
// set the animation attributes.
camRig.setAttribute("animation", {
"from": rigPos,
"to": AFRAME.utils.coordinates.stringify({x: targetPos.x, y: rigPos.y, z: targetPos.z}),
"dur": targetPos.distanceTo(rigPos) * 750
})
camRig.emit('go')
})
// when the animation is finished - update the "shared" variable
camRig.addEventListener('animationcomplete', e=> {
this.system.isMoving = false
})
}
})
with a setup like this:
<!-- Camera with locked movement --/>
<a-entity id="rig" animation="property: position; startEvents: go">
<a-camera look-controls wasd-controls-enabled="false"></a-camera>
<a-entity>
<!-- Cylinder node --/>
<a-cylinder goto></a-cylinder>
You can see it working in this glitch.
I read the documentation about the scene entity that's responsible for rendering the scene, but I didn't find anything regarding stopping the rendering to happen.
Question: Is there a way to halt the rendering?
I'm not sure you can completely stop the rendering, however you can pause specific entities or the scene:
https://aframe.io/docs/0.7.0/core/entity.html#pause
Here's a demo, it waits for the scene to load, and then calls the pause function on the scene, which pauses all components and entities in the scene.
https://glitch.com/edit/#!/a-frame-pause-scene-on-load
<a-scene>
<a-node id="waitOnMe"></a-node>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow>
<a-animation attribute="rotation"
dur="10000"
fill="forwards"
to="0 360 0"
repeat="indefinite"></a-animation>
</a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<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>
Note: I've added an a-node element to guarantee it catches the load event at the end of the page.
Then the js to pause:
<script>
var scene = document.querySelector('a-scene')
scene.addEventListener('loaded', function () {
scene.pause();
});
document.getElementById('waitOnMe').emit('loaded');
</script>
Related info about waiting for load can be found here:
https://stackoverflow.com/a/47363072/8005106
I did not find any satisfactory answer to this, so here's how I managed to stop it (and also start it when needed):
let sceneEl = document.querySelector('a-scene');
let renderer = sceneEl.renderer;
// Stop rendering
renderer.setAnimationLoop(null);
// Start rendering, personally i set this inside a button click
renderer.setAnimationLoop(sceneEl.render);
I am trying to embed a .OBJ model into an element so that it is confined to a specific width and height, instead of a full page canvas. I'm trying to replicate the "scene" embedded into the header of https://sketchfab.com/. I would like the camera in my scene to pan round the central axis of the model(just like in the example).
I'm having trouble accomplishing this... so far, I am able to successful load the following afame scene into my browser:
<a-scene>
<a-box color="#6173F4" width="4" height="10" depth="2"></a-box>
</a-scene>
But I can't get the scene to be resized and confined within a div or within a canvas (i think canvas would be better?).
I tried:
1. to nest the a-scene into a div and size the div in CSS
<div class="aframebox"><a-scene></a-scene></div>
2. I also tried to following which I guess is no longer part of version 0.3.0?
<a-scene canvas="height: 50; width: 50"></a-scene>
0.2.0 information
If someone could please let me know how to do this I would really appreciate it,
Thank you.
A-Frame's embedded component is intended to remove fullscreen styles, allowing you to style/size the canvas as needed.
<a-scene embedded></a-scene>
More details here: https://aframe.io/docs/0.3.0/components/embedded.html
Don McCurdy,
Thank you for pointing me in the right direction. I was able to finally change the scene window size. Here is the code to accomplish this.
HTML:
<a-scene class="aframebox" embedded>
<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
<a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 0 3.8">
<a-camera></a-camera>
</a-entity>
</a-scene>
CSS:
.aframebox {
height: 500px;
width: 500px;
}
var obj = document.querySelector("#sphere");
obj.components.material.data.roughness = 0.3;
obj.components.material.update(object);
obj.components.material.flushToDOM();
//I don't think object matters for this use,
// it is only useful for shaders I believe.
I am trying to "flushToDOM()", but that doesn't seem to update the entity html material at all it is still stuck at initial settings...
<a-sphere id="sphere" position="0 0.25 -4.5" radius="1.25" color="#712ef0" transparent="true" material="color:#712ef0;transparent:true;metalness:0.3;opacity:1" geometry="primitive:sphere;radius:1.25" rotation="0 0 0" scale="1 1 1">
You should be using setAttribute('material', 'roughness', 0.3).
But there might be a bug with flushing "sub-components" like shaders and geometries. Will check out the issue.