Change the way camera looks at object - three.js

Im working on an app which uses THREE js for animations
and have a trouble with the camera
what i need is to change the way camera looks at scene
now it looks from the outside to inside of the scene
i need to change it to opposite, so the camera looks from the center to the border of the scene
is this really possible?
Here is sandbox with my code https://codesandbox.io/s/festive-mahavira-tur31?fontsize=14
Thanks!

Ok, looks like solved.
The thing was that I used camera-controls package to move/rotate camera and that package blocks native camera.lookAt() and uses its own method

Related

Not getting data from R3F useScroll because of zIndex

I'm trying to run an animation based on scroll in the background of a React app.
I use Threejs with React Three Fiber. In R3F, there is a hook called useScroll which I want to use.
Problem is that my Threejs scene (a Canvas) is in the background with zIndex: -100, so the scroll handler doesn't get the user input.
If I remove the zIndex property, everything works, but It's not what I want.
The scene look like this demo, the only difference is that mine has element in front.
I don't know if the solution is to use a different css style or something more complexe to allow the handler to do his job. I've been looking at React Portal but I don't think it will work.
Any ideas ?
Thanks in advance.

Panning in React Three Fiber

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.

GameObject does not rotate using TwoHandManipulatable nor BoundingBoxRig using Unity and HoloLens

I have a GameObject in a Unity project for HoloLens with HoloToolKit, which I need to rotate. The object has a BoxCollider and HandDraggable script, and I'm also adding a TapToPlace component in runtime. The scripts that I've tried for rotation are TwoHandManipulatable and BoundingBoxRig, and they work to resize the object, but no matter what I do, the object does not rotate.
This is how I tried with BoundingBoxRig:
And this is how it looks with TwoHandManipulatable:
None of these works, only for resize. I would appreciate the help, thanks!
For me all I had to to to get it to work was to add the Transform of your arrow2 to the box of the Two Hand Manipulatable. Just click and hold on Transform and drag it into the box next to Host Transform. I added it to my project and it looks like this:
Also I don't think you need the Hand Draggable Script if you have the Two Hand Manipulatable because the last checkbox in the Two Hand Manupulatable enables movement with one hand if you want it.
Edit: I have an Animator on it but you don't need that. I have it because I made the model in Blender and it got added automatically.

Xcode spritekit scene editor with node

I want to add a physics body to a node in the scene edit by spritekit editor, any one can show me how?
ps: I can add physics body to a sprite, it works fine, but to node, code is the only works way by now.
I don't think you can via the Scene Editor but I am not sure why you can't, given the SKPhysicsBody is a property of SKNode and not SKSpriteNode.
You could try:
Creating a sprite with a transparent texture.
Doing it in code.
The scene editor is very lacking and in my game I am seriously considering writing a custom editor to overcome the limitations.

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.

Resources