如何将 THREE.js 旋转地球仪从 Canvas 更改为 WebGL？答案

【问题标题】：How to change THREE.js spinning globe from Canvas to WebGL?如何将 THREE.js 旋转地球仪从 Canvas 更改为 WebGL？
【发布时间】：2014-07-22 02:25:03
【问题描述】：

您好，我从这个链接下载了 THREE.js 地球： http://threejs.org/examples/#canvas_geometry_earth

现在我想将整个项目从 CanvasRenderer 更改为 WebGLRenderer，因为 WebGL 可以有效地加载更多段，并且可以使用 css 设置背景图像。在我下载的项目中，我改了这行代码：

renderer = new THREE.CanvasRenderer();

到这里：

renderer = new THREE.WebGLRenderer();

但是这样做会使地球和整个场景消失，我只剩下一个空白页。如何将项目成功更改为 WebGL。

【问题讨论】：

在 three.js r67 和 chrome 36.0.1985.125 中，无论我使用哪种渲染器，我都会得到相同的结果。当您打开 javascript 控制台时，您是否收到日志消息 THREE.WebGLRenderer 67？

标签： javascript canvas three.js webgl renderer

【解决方案1】：

刚刚使用 r.68 进行了尝试，完全按照建议进行了更改：

@@ -105,11 +105,11 @@
            var mesh = new THREE.Mesh( geometry, material );
            mesh.position.y = - 250;
            mesh.rotation.x = - Math.PI / 2;
            group.add( mesh );

-           renderer = new THREE.CanvasRenderer();
+           renderer = new THREE.WebGLRenderer();
            renderer.setClearColor( 0xffffff );
            renderer.setSize( window.innerWidth, window.innerHeight );

            container.appendChild( renderer.domElement );

在 Firefox 上对我来说效果很好。使用 Chrome 无法正常工作，但这不是 Three.js 的错。如果您检查您的网络控制台，您会发现如下错误：

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///D:/Temp/three.js/examples/textures/land_ocean_ice_cloud_2048.jpg may not be loaded.

应该有一个命令行选项可用于启动 Chrome 以绕过此安全限制，但我无法轻易找到它的名称。此外，不建议在启用的情况下进行浏览。如果您可以将示例放在 Web 服务器上，那么您也不应该有问题。

【讨论】：