Can I use THREE JS to make a 2D panorama with regular canvas?

Questions
1

Greetings all -

I need to use my mobile device to pan across a 360 degree landscrape with some vertical movement. I know about “deviceorientation” but when I rotate my phone to be straight up, my ALPHA values start jumping from 0 to 70 to 340. Something is freaking out.

I know THREE has really good motion support for a 3D environment so that such wigging out doesn’t occur, but the fact is, I can’t build this project of mine in a 3D space: it’s all 2D DOM elements and 2d context canvas.

How can I translate THREE’s Euler and Quaternian smooth camera movements to a simple 2D plane?

var _controls = new THREE.DeviceOrientationControls(camera, true);
_controls.alpha; // returns a Radian value

In the above instance, I can convert my Euler radian value back to degrees, but then I might as well be using stock window.ondeviceorientation listeners. I don’t know how to compensate for phone flippery in a 2D space.

2

Hello jaylerd,

From what I am understanding you would like to integrate a THREE.js controls library to feed a custom 2D canvas app. If this is the case, it will be “overkilled” to use such a library which has great controls and 3D math classes, but is really tailored for web 3D rendering.

Have you tried to find a stand alone “javascript mobile user control library” to do just that?

Or go for it and make the jump to use THREE.js and have it all. You could reuse your 2D canvas logic and apply it to a 3D plane as texture. This may take you longer to get up and running, but in mid/long terms, you will have full 3D power. It may just be the best option specially if you are into 360° works.

To get you started, have a look at the following examples, your solution may just be there:

Hope this help and dont forget to have fun !

1 Like
3

Thanks for reaching out!

The reason I’d go into using THREE’s massive library to do this simple thing is because it has smoothy device rotation than what I’ve been able to find. I’ve found some ok libraries but the fact is once my deviceorientation.beta value nears 90 degrees, the alpha values start freaking out. I don’t seem to have that problem with a full 3D THREE environment so unless I can extract that insane math (and I don’t believe I am capable of doing that, honestly) then I don’t know what else to do.

Keep plugging away, I suppose.

4

You are welcome! Let me know how it turns out… ++