React-360: Moving camera in new react 360, not react VR

[yerkejs]

I wanted create website with new react 360. But I faced this problem. I searched answers but could not find. I want move my camera with keyboard. Help!

[andrewimm]

This has been covered in other issues. React 360 provides a pluggable interface called CameraController (https://github.com/facebook/react-360/tree/master/React360/js/Controls/CameraControllers) that has the opportunity to change the camera's rotation and position each frame. Your application's input controls are found at r360.controls.
If you want to move the camera with the keyboard, you should build a CameraController that updates the position based on keypresses. A CameraController must implement the following method:

fillCameraProperties(
  position: [number, number, number],
  rotation: [number, number, number, number]
): boolean

Each frame, this method will be called. If you want to update the position, you should change the elements of the array passed to the first argument.

When your application initializes, you should remove the existing camera controllers (r360.controls.clearCameraControllers) and add your new one (r360.controls.addCameraController(myKeyboardController))

[erkeElzhan]

it is really big actual question. It is always hard for beginners. @andrewimm could you show little example. I mean can you make simlpe example and send source code.

[andrewimm]

GitHub issues are meant to be used for reporting bugs or requesting features. If you have questions about how to build something, a website like StackOverflow is more appropriate.

[yerkejs]

@andrewimm it is not worked for me. I must just copy CamerControllers.js and Types.js?

[andrewimm]

You don't need to actually copy it. You just need to make a class that implements the fillCameraProperties method I mentioned above.
Each frame, this method will be filled, and you can put values in the position or rotation arrays that will be used to adjust the camera. So, for example, if you wanted to move up the X axis, you would add a value to the first element of the position array.

[zmax92]

@Jorybraun can you please post code what exactly have you changed?

[MartinPham]

After some minutes checking the react-360-web and the controllers, I've found a way to implement my own camera and move it.
It's quite simple, just implement CameraController interface (with method fillCameraProperties(position: Vec3, rotation: Quaternion): boolean) and add to react 360 instance by method addCameraController.

[MartinPham]

I've published a package so everyone can use it :)

https://www.npmjs.com/package/@martinpham/react-360-keyboard-camera-controller

check the sample folder for demo