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

Question

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

由于我的演示安排在这个星期四，我认为最快的事情就是向他展示精彩的 css3d_youtube 演示。

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

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

轨迹球 Controller 似乎改变了相机的 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示例似乎也已更新。