React-360: [QUESTION] How to increase the speed of rotating scene when using mobile ?

[mthinh]

Description

I'm working well on react360 project. However there's a problem that it's quite slow to rotate the image when using react360 on the mobile.
Is there anyway to speed up ?

Expected behavior

Able to rotate the image faster

Actual behavior

Rotating on the mobile is slow.

Additional Information

• 'react-360' package version: 1.0.0
• 'react-360-web' package version: 1.0.0
• Operating System: Mac
• Browser: Chrome

[mthinh]

someone please helps ? :(

[larrylin28]

Do you mean touch to rotate? The default way to rotate 360 background on mobile is the using device's orientation(rotate your device).
The touch to rotate is a fallback way to control, it's defined in MousePanCameraController.js, if you want to have your own camera controller, you can write your own one to implement CameraController and add it to ReactInstance(ReactInstance.controls.addCameraController(<your own controller>))

[Jorybraun]

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

ok so create an new controller and replace it with the new one

[mthinh]

@Jorybraun Have you tried implementing this ? Did it work ? Do we have to rewrite the same logic in controller or just rewrite what we need ?

[Jorybraun]

@mthinh , creating a copy of the existing controller works, but the logic behind the rotation is difficult to figure out.

I assume there would have to be some sort of quanterionEase or something but im shit at math. so all i've done so far is broken it.

[mthinh]

@Jorybraun I would try implementing it, tks for you help

[Jorybraun]

@mthinh how do you plan on doing the ease?

[larrylin28]

@Jorybraun @mthinh
The main function you can look into is _onMouseMove/_onTouchMove function in MousePanCameraController, where it calculate a delta yaw and pitch value depends on mouse/touch movement on the screen.

[Jorybraun]

@larrylin28 @mthinh , i figured out that increasing the X delta is the only way to make this non janky, but i would really like to figure out how to change the Quaterion so that it accelerates and slows down into the delta.

[larrylin28]

You can see it the _onMouseMove function, it ends up with a delta value on yaw/pitch, which is the Euler Angle. And in fillCameraProperties it is just a simple conversion on applying the delta of euler angle to the Quaternion. So if you want to do a slerp, you can do it on the Quaternion/Eular Angle.

For more details please read some article about how Quaternion/Euler Angle works.

[Jorybraun]

@larrylin28 thank you, but the _onMouseMove and _onTouch are basically only fired inside the MousePanCameraController, the deviceOrientatationCameraController on touch doesnt really seem to be used.

[larrylin28]

@Jorybraun It's doing the similar logic in deviceOrientatationCameraController. What I'm trying to help you is understand how this controller works, so you can write your own one taking these as template

[mthinh]

@Jorybraun how can you create an copy ? I created a copy and it said that fillCameraProperties is not a fuction? :(

[Jorybraun]

if you look at the ReactController I noticed that it calls the constructor for the classes before passing it to the cameraCOntroller array.

So i initialized it, and passed it a reference to the element that it needs.
r360.controls.addCameraController(new MousePanCameraController(r360._eventLayer));

[mthinh]

@Jorybraun yass, I managed to do it. Thanks.
Also, do you know what this means ?

const cp = Math.cos(this._deltaPitch / 2);
const sp = Math.sin(this._deltaPitch / 2);
const cy = Math.cos(this._deltaYaw / 2);
const sy = Math.sin(this._deltaYaw / 2);

I cant understand what is cp sp cy sy, but I wanna limit the vertical rotate

[Jorybraun]

@mthinh Dont do it in that function, do it on the _onTouchMove and just hard code the y axis

[mthinh]

@Jorybraun I mean I wanna limit rotating vertical from 0 to 180, not 360 which makes the image up side down, hard code the y axis does not work for me

[Jorybraun]

then just write that into the _onTouchMove