Three.js camera does not follow parent's lookAt - three.js

When a camera is attached to an object, it won't follow object's lookAt.
Shouldn't a child be aligned to the parent and follow its moves, or what?

Related

Can't get Three.js camera up direction

I need to get the camera up direction and i've tried many ways with no luck, i'm not an expert of quaternions so i'm doubting i did it right.
I've tried:
camera.up
camera.up.applyMatrix4(camera.matrixWorld);
new THREE.Vertex3(0,1,0).applyMatrix4(camera.matrixWorld);
camera.up.normalize().applyMatrix4(camera.matrixWorld);
after this i create two planes passing by two points of my interest, and add the plane helper to the scene and i can see they are very far from where i was expecting them. (i'm expecting two planes that looks like the top and bottom of the camera frustum).
P.s. the camera is a shadow camera of a directional light so an orthographic camera, and i manipulate the directional light position and target before doing this operation, but i've called updateMatrixWorld on the light, on it's target and the camera, on the camera i've called also updateProjectionMatrix... still no results
I've made a sandbox to see what i've tried till now, and better visualize what i want to achieve:
https://codesandbox.io/embed/throbbing-cache-j5yse
once i manage to get the green arrow to point to the top of the blue triangle of the camera helper i'm good to go
In the normal render flow, shadow camera matrices are updated as part of rendering the shadow map (WebGLShadowMap.render).
However, if you want the updated matrix values before the render, then you'll need to update them manually (you already understand this part).
The shadow camera is a property of (not a child of) the DirectionalLight. As such, it doesn't follow the same rules as other scene objects when it comes to updating its matrices (because it's not really a child of the scene). Instead, you need to call the shadow property's updateMatrices method (inherited from LightShadow.updateMatrices).
const dl = new THREE.DirectionalLight(0xffffff, 1)
dl.shadow.updateMatrices(dl) // <<------------------------ Updates the shadow camera
This updates the shadow camera with information from the DirectionalLight's own matrix, and its target's matrix, to properly orient the shadow camera.
Finally, it looks like you're trying to get the "world up" of the camera. Personally, I'd use the convenience function localToWorld:
let up = new THREE.Vector3(0, 1, 0)
dl.shadow.camera.localToWorld(up) // destructively converts "up" from local-to-camera into world coordinates
via trial and errors i've figured out that what gave me the correct result was:
calling
directionalLight.shadow.updateMatrices(...)
and then
new THREE.Vector3(0,1,0).applyQuaternion(directionalLight.shadow.camera.quaternion)

Rotate mesh about another element?

I want to have the camera move with a mesh. Foward/backward motion was easy:
if (Input.is_key_pressed(KEY_W)):
self.translation.z -= movement_speed; # relies on camera script to move camera
if (Input.is_key_pressed(KEY_S)):
self.translation.z += movement_speed;
I just put those short blocks on both the camera and the mesh. But I can't figure out how to rotate the mesh about the camera while rotating the camera. If I just rotated the mesh, it would rotate about it's center point and end up unaligned with the camera. In photoshop, you can set anchor points to rotate a layer about a point other than the center. How can I set an anchor point to another element/node in godot?
EDIT:
The solution to rotation was pretty simple. All I had to do was make the camera a child of the mesh I wanted it to follow. But then the camera did not move with the mesh... How do I get the motion to work?

Object not visible when making child of a camera in three.js

I am a beginner to three.js. I am trying to make a sphere a child of my camera in my scene. But the sphere doesn't appear in the scene anywhere. I assumed that the position of the sphere is set in such a way that it is behind or above the camera so it isn't visible because it moves with the camera.
But I tried using a second camera in order to view where the object is with respect to the first camera but the sphere isn't visible anywhere in the scene.
The sphere is visible when I don't make it a child of the camera.
Is there an easier way to do it or an I missing something.
The camera must be added to the scene graph if the camera has a (renderable) child.
The camera looks down its local negative-z axis, so to ensure the child is visible, set the z-coordinate of the child's position to a negative value.
scene.add( camera );
camera.add( child );
child.position.set( 0, 0, - 100 );
three.js r.94

Aframe calculate position in local system from world position.

I've got a component to animate to a position in front of the camera, but when it's a child of another object this is animating in the wrong direction (away from the camera) because it's using the world position in an entity.
I know it's because of world coordinates.. can anyone help tell me how to convert this world position into local coordinates?
pLocal= new THREE.Vector3(0, 0, -distX)
this._targetPosition = pLocal.applyMatrix4(this._threeCamera.matrixWorld)
I this example the box is a child of the sphere and animates away from the camera.
https://jsfiddle.net/jpvsrnq1/2/
If the box is not a child it animates towards camera.
https://jsfiddle.net/jpvsrnq1/3/
How do I make it animate to camera when it's a child of another object?
You should use the worldToLocal() method:
from the docs:
.worldToLocal ( vector : Vector3 ) : Vector3
Updates the vector from world space to local space.
by using the method on your parent: parentObj.worldToLocal(vec) you can apply its world position to the local position vector. Fiddle here.
Fiddle here.
Another way would be looping through parent entities, and subtracting their positions, but it doesn't seem to have any advantage over the worldToLocal method

Sphere object does not rotate

I have a THREE.JS scene where there's a plane geometry in the middle of the scene. The plane geometry has a camera added to it. I also am using this example http://mrdoob.github.io/three.js/examples/webgl_materials_lightmap.html to add a lightmap and am adding it to my plane geometry.
Psuedocode:
planeGeometry.add(camera);
planeGeometry.add(sphereGeometryLightMap);
The problem is that when I try to rotate the sphere geometry on any axis, nothing happens. I tried using .rotation and setting the matrix4. Why is it that I can't rotate this sphere object when added to another object? How can I work around this?
You don't need to add the camera to the planeGeometry.
Also I assume that sphereGeometryLightMap is of type THREE.Mesh in which case you need to add it to the scene. Not to the planeGeometry.
If you want the sphereGeometry relative to the planeGeometry you can do:
var object = new THREE.Object3D();
object.add (planeGeometry);
object.add (sphereGeometry);
Before you add the geometries to the object you position them relative as you want.
Then, instead of modifying the planeGeometry, you modify the object.

Resources