three.js - Help adding pinch zoom to css3d_youtube demo - trackball controls messing up camera position

Question

I'm trying to sell my boss on using three.js to create a CSS3D interface integrated with video providers (like YouTube). One of the requirements is showing it on a mobile device - I've chosen an iPad since the Android tablet is quirky.

Since my demo is scheduled for this Thursday I thought the quickest thing to do was to show him the wonderful css3d_youtube demo.

The problem is it is not configured to use gestures (touch pinch zoom) and I'm having a hard time doing this.

I also needed to add a few things like a background image and the ability to have the YouTube player go full screen so I had to take the original code and modify it. I saw the periodic table is so I decided to use the TrackBall controller in my code. You can see my modified code here

The trackball controller seems to shift the camera's y position. You can see the actual page I created here if you view in a tablet. I used the Modernizr library to recognize if the device is touch screen so you wont see it just by using a desktop browser.

If it would be more helpful I can remove that condition so it can be seen in a desktop browser.

If I remove the code that is messing up the camera position (you can see where I do this my searching for Modernizr.touch in the code) the camera is no longer centered to the video poster image when clicking on the button.

I also tried just regular JavaScript gesture events by adding this function:

function onPinch(e) {
  move(e.scale)
}

and calling it in an event handler:

`document.body.addEventListener('gestureend', onPinch, false)`

but that was a disaster. The CSS3D objects rendered very slowly.

Can someone help me add pinch zoom functionality to the css3d youtube demo? Or at least offer some advice on how to proceed? I wasn't able to find anything to help via Google -ing

Answer 1

Looks like TrackballControls.js has been updated to support touch zoom gestures.

If any one else is having this problem, just get the latest version.

The CSS3D periodic table and youtube examples seem to have been updated too.