I can create an entity as camera:
<a-entity id="camera" camera look-controls wasd-controls></a-entity>
and get the position and rotation information, but in VR mode the built-in, default camera automatically takes over.
How do I get the same kind of information about that default camera?
Or maybe I need a different KIND of information?
I tried this:
var scenic = document.querySelector('a-scene');
var cam = scenic.camera;
console.log("camera position x= " + cam.position.x);
But no matter when I trigger the cosole.log (ie; after moving about in the scene) it still signals:
camera position x= 0
For context: I want to make a projectile launcher that follows the camera around and allows users to launch from camera position in the direction and angle of the camera's FOV...
See example (triggered, at the moment, by pressing the P key in the registered component "launcher")
https://glitch.com/edit/#!/query-aframe-camera-position-rotation?path=index.html:27:0
var position = document.querySelector('a-scene').camera.el.object3D.position;
Related
I have created a plane geometry within the world and I have looked into the orbit controls library and I have restricted some controls with controls.maxPolarAngle = Math.PI / 2; and controls.enableRotate = false; which is all good. However, I can't see to find an option to restrict panning as I want the pan to stop at the parameters of the plane geometry so it stays within the plane if that makes sense. Because if I continue to pan it goes on forever. I have tried maxDistance and minDistance, but to no avail. Maybe I need to clamp the camera position between certain values?..but I don't know how to do this.
I have an object (a pen) in my scene, which is rotating around its axis in the render loop.
groupPen.rotation.y += speed;
groupPen.rotation.x += speed;
and I have also a TrackballControls, which allows the user to rotate the whole scene.
What I now want is to get the "real" position of the pen (or its pick) and place small spheres to create a trail behind it.
This means I need to know where the camera is looking at and place the trail spheres behind the peak of the pen and exclude them from the animation and the TrackballControls.
What I tried is:
groupSphereTrail.lookAt(camera.position);
didn't work. Means no reaction at all.
camera.add(groupSphereTrail);
didn't work. groupSphereTrail is than not in the view area, couldn't make it visible - manipulating position.z didn't help.
Then I tried something like sending a tray with traycaster. The idea was to send a ray from the center of the camera through the peak of the pen and then draw the trail there. But then I still doesn't have the "real" position.
Another idea was to create a 2d vector of the current position of the pen peak and just draw an html element on top of the canvas:
var p = penPeak.position.clone();
var vector = p.project(camera);
vector.x = (vector.x + 1) / 2 * width;
vector.y = -(vector.y - 1) / 2 * height;
but this also doesn't work.
What could be another working solution?
Current progress:
https://zhaw.swissmade.xyz
(click on the cap of the pen to see the writing - this writing trail should stay at its place when you rotate the camera)
If i understood the question right, you want to show the trail as if it were draw on the screen itself (screen space)?
yourTrailParticle.position.project(camera)
camera.add(yourTrailParticle)
That's the basic idea, but it gets a bit tricky with PerspectiveCamera. You could set up a whole new THREE.Scene to hold the trail, and render it with a fixed size orthographic camera.
The point is .project() will give you a normalized screen space coordinate of a world space vector, and you need to keep it somehow in sync with that camera (since the screen is too). The perspective camera has distortion so you need to figure out the appropriate distance to map the coordinate to. With a separate scene, this may become easier.
I want to programmatically move the position of the view in a webvr scene. To do this I am using the position.add method.
Here is how I move the camera programmatically:
<a-entity position="33 0 -33" rotation="0 180 0" look-controls id="camera"
camera="userHeight: 1.6" listener></a-entity>
Camerage is moved here:
var obj3d = document.querySelector("#camera").object3D;
var angleobj = obj3d.getWorldDirection();
angleobj.y = 0;
obj3d.position.add(angleobj.multiplyScalar(0.004*3));
This works in normal mode, but in cardboard mode, the camera is not moving. How can I move the camera in cardboard view mode programmatically?
As far as i know, once you switch to the "VR mode", you get to use other camera than the one outside of "VR mode".
I think You should listen for the VR enter / exit events, and change the camera reference:
this.el.sceneEl.addEventListener('enter-vr',() => {
obj3d = document.querySelector("#camera").object3D;
}
this.el.sceneEl.addEventListener('exit-vr',() => {
obj3d = document.querySelector("#camera").object3D;
}
Please rethink, if this is necessary, when the user moves his head, and the camera goes wild, it can get really dizzy, really fast.
A-frame's Diego Marcos in his anwsers often recommends visual indications WHERE to look, instead of such options.
If the above does not work, try grabbing the camera entity, instead if its object3D:
var obj3d = document.querySelector("#camera");
and move it using the setAttribute() method
obj3d.setAttribute("position", {x: _x, y: _y, z: _z});
I have an interface I developed with three.js using the CSS3DObject rendering tool.
I have set the orbit to 0 to prevent rotating and limit my movement to panning and zooming.
Please note I'm also using Orbit Control.
I set the position of the camera to x=-2000 with the following code:
camera.position.x=-2000;
camera.position.z=4000;
When I do this, the camera moves positions but is still pointing to (0,0,0) resulting in a skewed look.
So I assume that I need to give it a vector
camera.up = new THREE.Vector3(0,1,0); //keeps the camera horizontal
camera.lookAt(new THREE.Vector3(2000,0,0)); //should point the camera straight forward
Please note that I'm still trying to find a good explanation of how setting up the lookAt works.
After a bit more research, it seems that the orbit control is overriding the camera.lookAt and as a result, doesn't do anything.
To achieve the panning I set the location of the camera x position equal to the value of the target.
I also removed the camera.up line.
var myCameraX = -2000;
var myCameraY = 500;
camera.position.x=myCameraX;
camera.position.y=myCamerYa;
control.target.set(myCameraX,myCameraY,0);
Hope that helps someone.
I would like to apply the three.js script TrackballControls to a moving object in a way that preserves the ability to zoom and rotate the camera while the object moves through the scene. For example, I would like to be able to have the camera "follow" a moving planet, while the user retains the ability to zoom and rotate around the planet. Here is a basic jsfiddle:
http://jsfiddle.net/mareid/8egUM/3/
(The mouse control doesn't actually work on jsfiddle for some reason, but it does on my machine).
I would like to be able to attach the camera to the red sphere so that it moves along with it, but without losing the ability to zoom and rotate. I can get the camera to follow the sphere easily enough by adding lines like these to the render() function:
mouseControls.target = new THREE.Vector3(object.position);
camera.position.set(object.position.x,object.position.y,object.position.z+20);
But if I do that, the fixed camera.position line overrides the ability of TrackballControls to zoom, rotate, etc. Mathematically, I feel like it should be possible to shift the origin of all of the TrackballControls calculations to the centre of the red sphere, but I can't figure out how to do this. I've tried all sorts of vector additions of the position of the red sphere to the _this.target and _eye vectors in TrackballControls.js, to no avail.
Thanks for your help!
I'd recommend OrbitControls rather than TrackballControls. My answer here applies primarily to OrbitControls; the same principle might also work with TrackballControls (I have not looked at its code in a while).
If you look at how OrbitControls works you should notice it uses this.object for the camera, and this.target for where the camera is looking at, and it uses that vector (the difference between them) for some of its calculations. Movement is applied to both positions when panning; only the camera is moved when rotating. this.pan is set to shift the camera, but out of the box it only deals with a panning perpendicular to the this.object to this.target vector because of the way it sets the panning vector.
Anyway, if you subtract the vector from object.position to controls.target and set controls.pan to that vector, that should make it jump to that object:
Fixed example code:
Add a helper to OrbitControls.js which has access to its local pan variable:
function goTo( vector ) {
// Cloning given vector since it would be modified otherwise
pan.add( vector.clone().sub( this.target ) );
}
Your own code:
function animate() {
requestAnimationFrame(animate);
mouseControls.goTo( object.position ); // Call the new helper
mouseControls.update();
render();
}
You'll also probably want to set mouseControls.noPan to true.