如何將THREE.js旋轉地球儀從Canvas更改為WebGL？

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的錯。 如果您檢查網絡控制台，則會發現類似以下錯誤：

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服務器上，那么也應該沒有問題。