I've just started with Three.js. Like really just now.
After playing with it for an hour or so and building a tool that helps me understand how the different elements work together (Camera, Light, Objects), I found something strange.
The tool: http://hotblocks.nl/tests/three/cubes.html
This is the current default set up:
the Camera is positioned 210 upwards and
500 backwards and
246 to the right
the Camera is rotated slightly to the left
the light is directly above and shines in all directions
As you can see, the objects are at the very bottom of the viewport. So I want to turn the Camera downward, so I can see more of them.
Try that: turn camera.rotation.x down.
That works, but the angle of rotation is wrong! Instead of the Camera rotating, it's the World rotating around its Z axis.
That's not right, is it?
The Y axis is also wrong. It rotates the World around its Y axis.
Rotating the Camera around its Z axis, works perfectly: the Camera rotates, not the World.
Am I doing it wrong? Or understanding it wrong?
PS Since the Camera rotation is only around its Y axis, the objects' vertical edges should be vertical in the result as well. In the default set up, they are. Rotating the camera around its X axis, shouldn't change that, but it does. Only rotating around its Z axis should change that (and it does). Am I wrong?
PPS I know about Camera.lookAt( THREE.Vector3 target ), but that changes the rotation of the camera, including its Z axis, and that shouldn't be necessary, logically.
Answer received on Github: https://github.com/mrdoob/three.js/issues/1163
Related
TLDR: I want to rotate camera but render sprites in regards to their world position not camera position.
Howdy,
I'm currently using LibGDX and have come across an issue in regards to camera/object rotation.
Say I have my camera with a rotation of 0 and I have an object(sprite) to the left of the camera's center.
i.e.
Camera Normal (0 degrees rotation)
The sprite renders fine when given a standard world coordinate, however once I rotate my camera, that world coordinate differs from the camera's new (x, y) values.
If I then rotate my camera smoothly 90 degrees to the right(clockwise so that the up direction is facing to the right like the picture below), the object(sprite) that used to be on the left should have simulated a left rotation in regards to the camera (the rotation happens via the camera, the sprite just needs to update position) and now be below the camera's center point.
i.e.
Camera Rotated (90 degrees clockwise)
I'm confused as to how I would calculate the sprite's new locations/positions during the smooth rotation.
Cheers,
Solist.
After looking everywhere for a solution to this problem for 3 weeks it was merely a matter of me needing to call the method
batch.setProjectionMatrix(camera.combined);
in order to update the sprites to their new position in regards to the changing camera rotation.
This link here explains how the Projection Matrix works.
I have a three.js scene with spheres, but when I zoom in a sphere and I move with orbit controls so it is in the side of the canvas (on in the center and deep in) it looses its round shape (do not care about the lines) :
What can I do ?
There will always be some distortion, but it is worse with a large camera field-of-view (fov).
A reasonable value for camera.fov is 40-45 degrees. A smaller value would produce less distortion.
camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
And for reference, camera.fov is the field-of-view in the vertical direction.
three.js r.70
This is expected behaviour of a THREE.PerspectiveCamera. Try it yourself with a digital camera at home.
The only real way to fix it is to use an THREE.OrthographicCamera, but this likely has other issues you do not want to have, such as objects not becoming smaller when they are further away.
How can I make a camera that I can move around and rotate around its own axis in processing 2+?
I have a camera that I can move around in the world space and have some kind of rotation:
frustum(-10,10,-10,10,10,2000);
translate(camX,camY,camZ);//I move around by adding to these values when a button is pressed
rotate(angleX,1,0,0);//same here...
rotate(angleY,0,1,0);
rotate(angleZ,0,0,1);
Bu the problem with this is that the rotation is centered in the scene, meaning that I get very strange rotations when moving further away from the scene's center coordinates. Why does that happen when I have translated before rotating?
Thanks to Nicolás Carlo and his suggestion to watch This Youtube playlist made by Jorge Rodriguez I was able to fix what I almost made right the first time.
All I had to do was really just to do some simple trigonometric calculations to get the forward-vector from the angles I got, and then just add the camera position to that for the centerX,centerY,centerZ values in camera();
Ex. where camPos is the current position 3D-Vector and vecForward is the calculated 3D-forward vector that I needed.
vecForward.x = cos(yaw)*cos(pitch);
vecForward.y = sin(pitch);
vecForward.z = sin(yaw)*cos(pitch);
camera(camPos.x,camPos.y,camPos.z, camPos.x+vecForward.x,camPos.y+vecForward.y,camPos.z+vecForward.z, 0,1,0);
If some of you do not know, Pitch is the up-down angle and Yaw is left-right angle of the camera.
And as a last note here,I highly suggest watching Rodriguez "Math for game developers" that Carlo suggested since every video explains at least one of the most important/oftenly used mathematical solutions at a time to different problems and then giving an example in the end.
I'm trying to make a little archer game, and the problem I'm having has to do with 2 pixels in particular, I'll call them _arm and _arrow. When a real archer is pulling back an arrow, he doesn't immediately pull the arrow back as far as his strength allows him, the arrow takes a little bit of time to be pulled back.
The _arm's angle is equal to the vector from a point to where the user touched on the screen. The rotation is perfect, so the _arm is good. The _arrow needs to be on the same line as _arrow, they are 1 pixel wide each so it looks as though the _arrow is exactly on top of the _arm.
I tried to decrement from the x/y coordinates based on a variable that changes with time, and I set the _arrow's location equal to the _arm's location, and tried to make it look like the _arrow was being pulled back. however, if you rotated, the x/y would mess up because it is not proportional on the x and y axis, so basically _arrow will either be slightly above the arm or slightly below it depending on the angle of the vector, based on touch.
How could I used the x/y position of _arm and the vector of touch to make the arrow appear as though it was being pulled back by a small amount, yet keep the arrow on top of the _arm sprite so that it's position would be similar to the arm, but slightly off yet still on top of the _arm pixel at all times. If you need anymore info, just leave a comment.
I'm not sure I've fully understood, but I'll have a go at answering anyway:
To make the arrow move and rotate to the same place as the consider adding the arrow as a child of the arm. You can still render it behind if you like by making its z is less than one: [arm addChild:arrow z:-1]
To then make the arrow move away from the arm as the bow is drawn, you then just set the position of the arrow with respect to the arm.
The problem I do see with this solution however is that this grouping of the sprites may be a little unusual after the arrow leaves the bow. Here you probably don't want the arrow to be a child of the arm as the coordinate systems are no longer related.
Even though they're sure what I "suggested would have solved [the] problem" here is the
Poster's solution
I had to get the x and y coords of the arm based of angle, then I got the sin/cos of a number that was based of the same angle as the arm and subtraced from that.
I want to use the same effect Apple uses in iOS5 for showing new notifications (this flip-in effect). But I don't know how to start or what to google for. Could somebody please give me a hint?
Thanks!
Create two CALayers. One aligned normally along the x and y axis, the other rotated around the x axis so that it "lies flat", i.e. its surface points down along the y axis.
Then rotate both layers by 90 degrees along the x axis. At the end of the rotation, the first layer will now "lie flat", pointing upward along the y axis and the second layer will be aligned normally along the x and y axes.
I know you asked more than a year ago, but if it's useful to you, I would checkout the new and awesome Animate.css css3 transitions! I would take the FlipInX effect, which looks exactly like in iOS5!