Can I convert camera rotation to sphere mesh rotation? - three.js

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?

Related

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

How can I add an event listener to a sprite on THREE js? [duplicate]

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?

Disable Particle rotation in Three.js

I'm trying to use Three.js to create an ’asteroid field' using particle systems or point clouds or stuff like that. One of the problems I've bumped into with all of these is that when the camera rotates around the z axis, the particles rotate individually with the camera, preserving the same orientation no matter how the camera is turned. I want the simulation to look as if the user is flying through a bunch of asteroids, and obviously asteroids don't magically spin whenever you tilt your head, so I was wondering if there is any way to prevent them from turning when the camera turns. Must particles always be upright?
If you want to rotate sprites you can use attribute SpriteMaterial.rotation:
var sprite = new THREE.Sprite( new THREE.SpriteMaterial({map: texture,rotation: Math.PI/4}));
see this http://threejs.org/examples/webgl_sprites.html
In your case, rotation of all sprites should be equal to camera rotation.

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