Object not visible when making child of a camera in three.js - 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

Related

Can I convert camera rotation to sphere mesh rotation?

I have a very large SphereBufferGeometry that I project an equirectangular 360 image onto in order to create a 360 scene. I have two functions to my application: 1.) to set the initial view of which part of the scene should be viewed at scene load and 2.) to always load the scene at that saved coordinates.
To set the initial view of which part of the scene should be viewed at scene load:
I can use OrbitControls to move the camera to look at a certain direction of this sphere, and I can save the position of the camera when I look at a 360 scene position I like.
To always load the scene at that saved coordinates:
I can set the position of the camera to this previously saved position and view the scene at my favorite starting location.
This works well, but I do not want to set camera position each time a 360 scene loads. Rather, my requirement is to load the scene with camera in a neutral position, and rather the sphere mesh is rotated on the sphere such that I am looking at the [x,y,z] position of my favorite position set earlier.
Is it at all possible to take a camera position and rotation and use those values to rotate or position a mesh on my sphere?
Can I use OrbitControls to rotate the entire scene/sphere instead of the camera onClick?

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?

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.

Three.js: add light to camera

I want to move and rotate the camera but keep a PointLight on the same position relative to the camera. I've read a bunch of threads saying that you can add the light object to the camera instead of the scene. Like so:
pointLight = new THREE.PointLight( 0xffffff );
pointLight.position.set(1,1,2);
camera.add(pointLight);
However this does not seem to work for me. Instead I now when the camera changes set the light's position by applying the cameras matrixWorld to my desired relative light position. This works, but adding the light to the camera seems like a cleaner solution.
I'm a doing something wrong or is adding light object to the camera deprecated?
Thanks!
You need to add the camera to the scene if the camera has a child object, such as a `PointLight'.
scene.add( camera );
three.js r.68

Intersect Sprites with Raycaster

I want to realize a 3D interactive globe with three.js and I wonder if there is a way to intersect over Sprites primitive with the Raycaster?
If you check the source code for RayCaster at
https://github.com/mrdoob/three.js/blob/master/src/core/Raycaster.js
it would appear that the intersectObject function only checks objects that are instances of THREE.Particle or THREE.Mesh, not THREE.Sprite. Possibly this is because sprites could be set to use screen coordinates, and so a ray that projects into your 3d scene wouldn't make sense in this situation, or if placed in the scene as the sprite image always faces the camera, it doesn't act like your standard 3d mesh.
Perhaps you could attach a PlaneGeometry or a very thin CubeGeometry to the position of your sprite, set its rotation to the rotation of the camera so that it is always parallel to the view plane of the camera like the sprite is, and then check for intersections with the mesh instead?

Resources