Panning in React Three Fiber - three.js

When I right click, I can move my camera up and down. By default, when my model loads, half of its body is out of the frame. I want to move the camera down, so the whole body fits in the frame. Is there a setting to do this? I’ve tried using camera position but that didn’t work. Thank you!

when I come across cases like this I do this:
try to scale down the object first, so that I can see the whole picture
add axesHelpers to object or scene, to figure out which direction should I move to
change position of camera accordingly.

Related

How to prevent object from flying towards camera when using Ray-cast in unity?

I got an unity project where object is meant to be moving with mouse cursor. The object moves fine, but when the object is still, it starts to float towards the camera that Ray-casts. I would like that the object doesn't float towards camera.
I couldn't find any reason for objects behavior.
I'm quite a novice who's had issues with gameobjects following cursors myself.
But could you try freezing the Y position in the Rigidbody and ensure gravity is unchecked?
More of a workaround if it even works.
Also I believe it's better practice to use rigidbody.position than transform.position. Try this:
public Rigidbody rigidbody;
void Update()
{
rigidbody.position = Camera.main.ScreenToWorldPoint(new Vector3(Input.mousePosition.x, Input.mousePosition.y, -Camera.main.transform.position.z));
}
What is happening here is when you send a ray and you get a hit result using hit.point it gives the exact location of the tris on the object it is hitting. Lets say the object is centered in the world (Vector3.zero). Ray is hitting a tris that is different than the position zero. Just because the object is in x:0y:0z:0 doesnt mean all the tris on the object is located at the same coordinates.
You get the coordinates of the hit.point, they are probably closer than the object center position, therefore the object is updating its center position to the hit.point location. And it does that every frame moving the object closer to camera.
You might want to try sending a ray from screen to world position. You can use custom vector length which would help to keep the object in the same depth you like.
Unity Docs Screen to World

animation of an object wont center

hi guys i recently start experimenting lots of thing using points to make a particle effect and one of it try to create is a space wrap animation, the animation is correctly display but the position of the effect it wont center, it always goes in right or left i try to change the camera type and the position of the canvas camera it seems it dosen't help at all i think am missing something. can anyone help me to figure this out.
here is my code thanks
https://codesandbox.io/s/spacewrap-l82e3s?file=/src/App.js:0-1784

Group of objects on top but added to a camera

As a precision I already noticed threads about this but didn't find a way to achieve exactly what I need.
Basicaly I have a board of objects that I need remaining always on top of everything but also attached to the camera.
I first tried to add the group to the camera and it stayed as wished always in the viewport. But in this configuration the group of objects still be a part of the scene so while zooming to regular objects in the "editor" the board goes into/among these objects of the scene.
My second trial was based on this thread and work wonderfully in order to get all of the board objects rendered above everything. But on such a configuration when rotating around the axis (with orbit control) both scenes rotates. So I tried to update the foreground scene with coordinates of the camera but the update was not immediate and this scene is flickering (I suppose that while rotating the update function is not called immediately).
My best wish would have been to "attach" the foreground scene to the camera so that it would stay on top and sticked on the screen/viewport but I don't even know if it is possible and how to do that (as only groups of objects seem to be capable to be attached to the camera).
I am really stuck on that point. Thanks you for any help!
If this is what you need,
just set object.material.depthTest = false; and object.renderOrder = 1000; for all objects you need to be always on top and attached to the camera.

Threejs Rotating object with device orientation control

I am trying to achieve an effect similar to one of the cardboard app examples that Google has put out with their cardboard app called the 'exhibit'. I have a 3D object that I want to rotate using device orientation control. Right now with just the device orientation control, I can view the 3D object but when I turn around, the camera rotates (it seems) causing the object to fall out of view until I turn all the way back around to where it was in the beginning. In other words the camera seems to rotate in its axis as I look around. What I want is to be able to rotate the object as I turn around.
Kinda like this example http://threejs.org/examples/#misc_controls_orbit except I want to rotate using device orientation control.
Any idea how I can incorporate this feature?
Thank you for your assistance.
The answer to my own question for future seekers is to replace camera in
controls = new THREE.DeviceOrientationControls(camera, true);
with the 3D object you are trying to rotate.

camera.lookAt not called when THREE controls are being used

I am working on a program, that uses THREE.RollControls, when the user goes too far away from the center of the screen, they tend to get lost, so I am working on creating a function that reorients them, facing the center of the scene.
What I had intened to do was simply call the following:
camera.lookAt(scene.position)
However, this has no affect. From what I was reading on different stack overflow questions specifically this:
ThreeJS camera.lookAt() has no effect, is there something I'm doing wrong?
It seems like their solution was to do the camera position change using the controls, rather then changing the camera itself.
I do not believe there is any 'Target' in the Roll Controls, so I don't know how I can reset where the camera is looking at based on a THREE.Vector3() Is there a simple way to do this, or will I basically have to:
So far I have 'attempted' to do the follow:
- Calculate the difference of position of the camera with the position of the scene.
- Normalize this vector
- Subtract it from the direction forward of the camera
- use this vector in controls.forward.add(thisVector)
but this doesn't do at all what I want (probably because I have no idea what I'm doing)
Thank you in advance for your time!
Isaac
The same thing bugged me too about the RollControls but I took a different approach in solving the problem. Since the controls are in the example code (in r55) you can modify the controls, as they are not part of the core library. You can see my modifications at http://www.virtuality.gr/AGG/EaZD-WebGL/js/three.js/examples/js/controls/RollControls.js
I introduced a local variable called mouseLook because I could not use the this.mouseLook. I initialized it to false and I only make it true when there is a button press i.e. when navigating in the scene. That solved my problem.

Resources