three.js - 帮助向 css3d_youtube 演示添加捏缩放 - 轨迹球控件弄乱了相机位置

Question

我正试图向我的老板推荐使用 three.js 创建与视频提供商（如 YouTube）集成的 CSS3D 界面。其中一个要求是在移动设备上显示它 - 我选择了 iPad，因为 Android 平板电脑很古怪。

由于我的演示计划在本周四进行，我认为最快的办法就是向他展示精彩的 css3d_youtube 演示。

问题是它没有配置为使用手势（触摸捏缩放），我很难做到这一点。

我还需要添加一些东西，例如背景图片和让 YouTube 播放器全屏显示的功能，因此我不得不获取原始代码并对其进行修改。我看到了元素周期表，所以我决定在我的代码中使用 TrackBall 控制器。可以看到我修改后的代码here

轨迹球控制器似乎改变了相机的 y 位置。你可以看到我创建的实际页面here if you view in a tablet。我使用 Modernizr 库来识别设备是否为触摸屏，因此您仅使用桌面浏览器就不会看到它。

如果它更有帮助，我可以删除该条件，以便在桌面浏览器中看到它。

如果我删除了扰乱摄像头位置的代码（您可以看到我在代码中搜索 Modernizr.touch 的位置），单击按钮时摄像头不再以视频海报图像为中心。

我还通过添加此函数尝试了常规 JavaScript 手势事件：

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

并在事件处理程序中调用它：

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

但那是一场灾难。 CSS3D 对象的渲染速度非常慢。

有人可以帮我在 css3d youtube 演示中添加捏缩放功能吗？或者至少提供一些关于如何进行的建议？我无法通过 Google -ing 找到任何帮助

Answer 1

看起来像 TrackballControls.js has been updated to support touch zoom gestures。

如果其他人有这个问题，请get the latest version。

CSS3D periodic table 和 youtube 示例似乎也已更新。