iOS：带有Three.js开发的HTML5

Question

我计划开发一个带有Three.js页面的HTML5，这样我就可以使用它实现3D屏幕，并且可以在跨平台方法中轻松支持Mobile平台。我看过Three.js使用WebGL，但iOS和Android浏览器不支持它，所以我无法开发这样的组合应用程序。

有人可以建议，我是否可以使用Three.js页面开发HTML5以实现iOS和Android应用程序上的3D交互，或者不作为Web应用程序？如果没有，请提供官方链接，其中提到它不受支持。

谢谢。

Answer 1

没有WebGL，Three.js可以正常工作。你可以使用Canvas渲染器 - 它在Three.js文档中描述，我相信你可以使用谷歌甚至Bing在github上找到它。它没有使用WebGL那么快，但是人们不会在日产Sentra中与蒙特卡洛竞争。

你不应该期望任何移动平台上的高性能3D - 主要是因为javascript性能可能会慢得令人惊讶。尝试使用移动设备（包括和不使用webgl）访问一些各种Three.js示例，以了解性能。

Answer 2

“但iOS和Android浏览器不支持它” 我可以从版本2.3.7开始在Stock浏览器上使用Three.js及其webgl演示。高达4.3+。 你的论点无效：P

Answer 3

我尝试在iPad Air上运行Three.js Canvas演示，这太可怕了。通常Safari崩溃，即使渲染工作，它执行2-3 fps。所以看来它现在在iOS设备上非常原始

Answer 4

iOS和Android浏览器支持webgl不如Web浏览器，有时您可以减少渲染效果以使其工作。通常这样做。对于app，android webview渲染能力很低。 Ios有一个更好的。

你可以将一些渲染引擎插入你的应用程序，例如XWalkView，这是我的post如何使用它在我的android4.2.0应用程序中使用three.js渲染3D模型。对于IOS，还有相关解决方案。

Answer 5

iOS Safari和Android Chrome已经支持WebGL多年了。

您可能会提到的问题是Android的WebView或iOS的UIWebView（您可以在本机应用中放置以显示网页的控件）可能支持也可能不支持WebGL。 WebGL is supported in WebViews as of Android 5.0 apparently虽然人们有run into issues

另一种选择是使用CocoonJS之类的东西。他们显然为Android 4.0+和iOS 8+提供custom webview implementations。

至于性能，three.js在移动简单场景上表现得很好。有很多例子。移动设备上的3D虽然需要优化的资产（较低的多边形模型，较小的纹理，较简单的着色器，较少的灯光等等），但相对于桌面而言，尤其是需要三个.js

Answer 6

此问题的所选答案建议使用 Three.js CanvasRenderer ，但在Three.js文档中显示为 here ，CanvasRenderer已被弃用：

  

注意：Canvas渲染器已被弃用，不再是Three.js核心的一部分。

重要的是要注意它仍然可以用于简单的3D场景，可以在Github上找到 here

Androids WebView v36及更高版本支持WebGL，如 here 所示。 另外，对于较旧的Android Chrome浏览器，可以通过在浏览器中键入：chrome://flags并选择浏览器中启用WebGL 标题下显示的启用链接来启用WebGL窗口，或通过Android Android Play商店更新网页视图。

自iOS 8.0b以来，Mobile Safari一直支持WebGL。

在mobilehtml5.org，您可以看到哪些移动设备版本支持特定的HTML5功能：

索尼Xperia Android 2.3也支持WebGL。