In a a-scene, I try to change my camera position at runtime. The DOM property changes but the camera does not move.
What could have I missed ?
my js code:
document.querySelector('#myCameraPosition').setAttribute('position', '0 0 0');
My a-scene:
<a-entity id="myCameraPosition" position="0 0 50">
<a-entity id="myCamera" camera look-controls keyboard-controls>
</a-entity>
</a-entity>
Create a wrapper entity around the camera:
<a-entity id='cameraWrapper' position="0 0 0">
<a-camera></a-camera>
</a-entity>
Then change position of the wrapper:
document.querySelector("#cameraWrapper").object3D.position.set(1, 1, 1);
Had to set "look-controls" to false for javascript rotation control, otherwise wouldn't work :
function resetView(el){
el.setAttribute('look-controls','false');
el.setAttribute('rotation',{x:0,y:0,z:0});
el.setAttribute('look-controls','true');
}
On the example below I can change the position of the camera entity's parent and it works as expected:
https://aframe.io/examples/showcase/helloworld/
Is any of the openearthview or acceleration components writing the position of the camera entitiy's parent? They might be overwritting its position.
document.getElementById('myCameraPosition').setAttribute('position', {x:0, y:0, z:0});
or
document.querySelector('#myCameraPosition').setAttribute('position', {x:0, y:0, z:0});
When it comes to position you can directly change the camera position(unlike rotation where you need a wrapper entity).
so
document.getElementById('myCameraPosition').setAttribute('position', {x:0, y:0, z:0});
should work
Related
I'm attempting to make a rolodex menu in Aframe like this.
Here is the glitch so far https://glitch.com/edit/#!/fourth-kitten
I'm trying to get the entity to rotate into view with the camera
AFRAME.registerComponent('rotate-with-camera', {
tick: function (){
console.log(this)
if(this.el.sceneEl.camera){
const {rotation} = this.el.sceneEl.camera.parent
const containerRotation = this.el.getAttribute('rotation')
this.el.setAttribute('rotation', {...containerRotation, z: containerRotation.y -= rotation._y * 360})
}
}
})
However I can't get a nice smooth roll like this example and I'm confused as to the right maths to get it staying in front of the camera on roll up or roll down to make the next row animate into view.
Any ideas?
If you want to position it in front of the camera, then just use the parent - child DOM hierarchy:
<a-camera>
<a-entity position="0 0 -3></a-entity>
</a-camera>
This way your menu will be in front of the camera, and will be rotating with the camera.
To access outer elements, you can move the container a bit when the camera is looking right - left
Glitch here.
I'm setting up augmented reality with AR.js, and I'm trying to get the camera/scene to be oriented to due North when the page loads.
Short example is that I'm trying to create a view that has a virtual compass with North/East/South/West displayed to the user.
I've got it working to a certain extent so far, but the calibration seems a little off at times. I'm using a MEAN stack and AR.js
Here's what I have:
view.html:
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
<a-entity id="camera-entity" wasd-controls-enabled="false" position="0 -2 0" rotation="0 0 0" aframe-injected="">
<a-camera></a-camera>
</a-entity>
<a-text font="kelsonsans" width="6" position="0 0 -3.5" rotation="0 0 0" text="" value="North"></a-text>
</a-scene>
angular client controller (this section running only once on initialization):
var compass = event.webkitCompassHeading;
document.querySelector('#camera-entity').object3D.rotation.y = THREE.Math.degToRad(-compassdir);
Am I doing something incorrect with how I'm setting rotation on the camera-entity? Is there a better way to do this? Any suggestions?
I have compass bearing outputting to my development display, and it appears that the hardware is getting compass readings correctly.
Hardware: iPhone X
Reference:
Also, see this for reference regarding how aframe orients to relative phone position when opening:
https://github.com/aframevr/aframe/issues/349
And this for reference about a-frame rotation:
https://aframe.io/docs/0.8.0/components/rotation.html
If you want your items on the marker to be oriented compass-wise, then I'd suggest rotating the scene, not messing with the camera
<a-marker>
<a-entity id='parent' rotate-this-with-the-compass-readings>
<!-- Everything you want to rotate northwise --!>
</a-entity
</a-marker>
Preferably, with a aframe component, to be sure the element is ready:
AFRAME.registerComponent("rotate-this-with-the-compass-readings", {
init: function() {
var compassdir // however you get the compass reading
var pos = this.el.getAttribute('position')
pos.y = THREE.Math.degToRad(-compassdir);
this.el.setAttribute('position', pos)
}
})
In the scene, I have two boxes. I am trying to make one box cloning the other one's rotation angle in real time.
<a-entity id="original" mixin="cube" position="0 1.6 -1" material="color: red" sleepy collision-filter="group: red; collidesWith: default, hands, blue" rotation="0 0 0">
<a-entity id="clone" mixin="cube" position="2 1.6 -1" material="color: blue" sleepy
collision-filter="group: blue; collidesWith: default, red" rotation="0 0 0">
I can see that the property of a cloned box updates correctly through console.log(), but in the scene the box does not change its angle. What am I missing?
The code below is my attempt to make it work.
var check = document.querySelector('.controllers');
var ori = document.getElementById('original');
var clo = document.getElementById('clone');
check.addEventListener('xbuttondown', () => {
var ori_pos = ori.getAttribute("rotation");
//console.log(ori_pos.x);
clo.object3D.rotation.set(
THREE.Math.degToRad(ori_pos.x),
THREE.Math.degToRad(ori_pos.y),
THREE.Math.degToRad(ori_pos.z)
);
console.log(clo.getAttribute("rotation"));
});
From the A-Frame FAQ: To improve performance, A-Frame does not update the HTML to save on stringification operations. This also means mutation observations will not fire. Use the debug component or .flushToDOM methods if you need to sync to the DOM
<a-assets>
<a-mixin id="ring" geometry="primitive: ring; radiusOuter: 0.20;
radiusInner: 0.15;"
material="color: cyan; shader: flat"
cursor=" fuse: true"></a-mixin>
<a-asset-item id="mancloth" src="../models/man.obj"></a-asset-item>
<a-asset-item id="manclothmtl" src="../models/man.mtl"></a-asset-item>
</a-assets>
<a-entity camera look-controls wasd-controls><a-entity mixin="ring" position="0 0 -3">
<a-animation begin="cursor-click" easing="ease-in" attribute="scale"
fill="backwards" from="0.3 0.3 0.3" to="1 1 1"></a-animation>
<a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
fill="forwards" from="1 1 1" to="0.3 0.3 0.3"></a-animation>
</a-entity>
</a-entity>
<a-obj-model scale="1 1 1" src="#mancloth" mtl="#manclothmtl"></a-obj-model>
I use the camera to interact with the obj but aframe.js shows an error on line 57766. How can I solve this problem without changing aframe.js.
var intersectedEl = intersection.object.el;
intersectedEl.emit('raycaster-intersected', {el: el,intersection:intersection});
intersection.object is a THREE.Mesh, so intersection.object.el is undefined!
This problem has been fixed at https://github.com/aframevr/aframe/pull/1497 by binding the A-Frame entity to each child of the model.
You can wait for A-Frame 0.3.0 or use the latest A-Frame master. Right now, the cursor uses a raycaster to see what object was intersected. With OBJ/COLLADA models, it creates a tree of objects. However, A-Frame was only treating the top-level object as an entity. So when the raycaster returned the object, it did not have an associated entity to emit an event with.
Now it should just work:
<a-camera><a-cursor></a-cursor></a-camera>
<a-obj-model></a-obj-model>
I am trying to manually tween camera rotation to 0,0:
camera.object3D.matrixAutoUpdate=false;
var orgrot = { x : camera.object3D.rotation.x, y: camera.object3D.rotation.y };
var target = { x : 0, y: 0 };
var tween = new TWEEN.Tween(orgrot).to(target, 500);
tween.onUpdate(function(){
camera.object3D.rotation.x= this.x;
camera.object3D.rotation.y= this.y;
camera.object3D.updateMatrix();
});
The tween works as expected, but I am loosing mouse control over camera.
To get it back I am setting matrixAutoUpdate to true
tween.onComplete(function(){
document.querySelector('#camera').object3D.matrixAutoUpdate=true
});
But after that, the camera rotation changes back to original position (before tween ) and I would like to keep 0,0. What I am missing ? thanks
UPDATE Below is a version using aframe only without going into threejs objects
I think the problem is camera look-control component
When enabled - I can not animate camera rotation or even setAttribute.
I have to disable it first - than fire animation and than enable it again.
But the problem is, when I enable it again:
camera.setAttribute ('look-controls-enabled',"true")
camera goes back to original rotation ( state before reset animation ).
Similar problem when using matrixAutoUpdate=false/true
Here is my pen http://codepen.io/anon/pen/dMjrWd
If you rotate left 30deg, it will fire resetCamera animation - it works as intended.
But only when look component is disabled. If I enable it again in "animationend" event - the rotation will go back to original state and trigger resetCamera again and again
You really should not have to mess with matrixAutoUpdate.
But given that you are, try the following to force the position, quaternion, and scale to match the matrix:
object.matrix.decompose( object.position, object.quaternion, object.scale );
three.js r.76
I see several problems. If you are using aframe you should not access the object3D directly. You should do
cameraEl.setAttribute('position', {x: 0, y: 0; z;0 })
You can apply a tween to any entity using the declarative API
If you want to modify the camera independently of the running tween you can wrap your camera in another entity
<a-entity rotation="0 360 0"><a-entity id="camera" camera><a-animation ...></a-animation></a-entity></a-entity>
try this codeblock, it works for me on aframe 0.8.2
static faceCameraToCoords(camera, coords){
camera.setAttribute("look-controls",{enabled:false})
camera.setAttribute("rotation", coords);
var newX = camera.object3D.rotation.x
var newY = camera.object3D.rotation.y
camera.components['look-controls'].pitchObject.rotation.x = newX
camera.components['look-controls'].yawObject.rotation.y = newY
camera.setAttribute("look-controls",{enabled:true})
}
You can no longer set a-camera rotation after version 0.8.0.
Updated solution for Aframe 0.9.2:
Given the following camera setup:
<a-entity
id="rig"
position="0 1.6 0">
<a-camera position="0 0 0"></a-camera>
</a-entity>
You can directly alter the camera rotation thus:
const cameraEl = document.querySelector('a-camera');
cameraEl.components['look-controls'].pitchObject.rotation.x = newRotation.x;
cameraEl.components['look-controls'].yawObject.rotation.y = newRotation.y;
Make sure the newRotation values are in radians. For example, use THREE.Math.degToRad(newRotation.x).