Question

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

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

renderer = new THREE.CanvasRenderer();

对此：

renderer = new THREE.WebGLRenderer();

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

Answer 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的错。如果您检查Web控制台，则会发现以下错误：

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服务器上，则不应该出现问题。

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

1 个答案: