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;
}
Related
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);
Is there any way I can use an image as a <a-cursor>.
<a-cursor>
</a-cursor>
I tried to put an <a-image> inside it but it doesn't works for me.
Try to place the image as a sibling of a-cursor and wrap both with the camera. Here's an example:
<a-entity id="main-camera-wrapper">
<a-camera id="main-camera">
<a-cursor id="fuse-cursor" material="opacity: 0;" position="0 0 -1"></a-cursor>
<a-image src="#my-image" position="0 0 -.99"></a-image>
</a-camera>
</a-entity>
I'm trying to play a short rotation animation for this parent camera entity. I have the following a-animation:
<a-animation attribute="rotation" dur="1000" to="0 163.5761975835419 0" fill="forwards" begin="rotateCam"></a-animation>
Then, I try to set the 'to' attribute before emitting rotateCam (with animation.setAttribute(...)), but it only plays the default rotation I set in the HTML. Am I missing something?
See this fiddle for example. v0.5.0.
Thank you for your time.
After some research and talking to dirkk0 on A-Frame Slack it became clear they're going for a component-based approach. I have changed my code to apply ngokevin's animation component and it solved my problem! :)
Relevant test (AFrame v0.5.0)
HTML:
<a-scene>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box position="-1 0.5 -3" width="1" height="1" depth="1" color="#4CC3D9" animation="property: rotation; dur: 1000; startEvents: rotateBox"></a-box>
<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>
JS:
setTimeout(() => {
let box = document.querySelector('a-box');
box.setAttribute('animation', 'to', '0 20 0');
box.emit('rotateBox');
}, 2000);
Does anyone know how to create a button in aframe
One way to create a button with A-Frame would be to use the <a-box> primitive combined with a cursor. The following is a simple demo:
<a-scene>
<a-entity position="0 .6 4">
<a-camera>
<a-entity id="mycursor" cursor="fuse: true; fuseTimeout: 500; max-distance: 30;"
position="0 0 -5"
geometry="primitive: ring"
material="color: blue; shader: flat">
</a-entity>
</a-camera>
</a-entity>
<!-- "button" -->
<a-entity id="refresh-button" geometry="primitive: box" material="color: red" position="0 0 -2"></a>
</a-scene>
<script>
document.querySelector('#refresh-button').addEventListener('click', function() {
// Refresh stuff would go here!
});
</script>
When the cursor focuses on the "button", the click event would fire. To add text to the button, you can use this component:
https://github.com/ngokevin/aframe-text-component
Lastly, if you're looking for a more traditional "button", you could simply float a <button> element over the canvas or Iframe if you're embedding.
i like https://www.npmjs.com/package/aframe-event-set-component for the hover event. And i give my cursor an attribute (data clickable) and then i say the raycaster he should just trigger entities with the attribute. If you want to let something just be clickable if you for example enter the vr-mode simply remove the dataclickable attribute. Scene looks like this:
<a-scene cursor="rayOrigin: mouse" raycaster="objects: [data-clickable]">
<a-image id="button" data-clickable visible="true" position="2 1.75 -0.2" height="0.5" width="0.5" rotation="0 90 0" onclick="dosomething()" event-set__enter="_event: mouseenter; width: 0.53; height: 0.53;"
event-set__leave="_event: mouseleave; width: 0.5; height: 0.5;"></a-image>
<a-camera>
<a-cursor id="curseid" raycaster="objects: [data-clickable]"</a-cursor>
</a-camera>
</a-scene>
If you want that a button works just if something happend give him the attribute later:
document.getElementById('button').setAttribute('data-clickable', '');
If you done with the button use:
document.getElementById('button').setAttribute('visible', 'false');
document.getElementById('button').removeAttribute('data-clickable');
If you want that the cursor just triggers button if you for example enter vr-mode, change the raycaster="objects: .notclickable" and then give him later with this line his attribute back:
document.getElementById('curseid').setAttribute('raycaster', 'objects: [data-clickable]');
This is for now my way to do buttons, maybe there is a smarter way. I hope this helped a bit :D