Как изменить вращающийся глобус THREE.js с Canvas на WebGL?

Привет, я скачал глобус THREE.js по этой ссылке: http://threejs.org/examples/#canvas_geometry_earth

Теперь я хочу изменить весь этот проект с CanvasRenderer на WebGLRenderer, потому что WebGL эффективно загружает больше сегментов, а установка фонового изображения возможна с помощью css. В скачанном мной проекте я изменил эту строку кода:

renderer = new THREE.CanvasRenderer();

К этому:

renderer = new THREE.WebGLRenderer();

Но при этом земной шар и вся сцена исчезают, все, что у меня остается, это чистая страница. Как я могу успешно изменить проект на WebGL.


javascript canvas three.js webgl renderer
person user3860127    schedule 21.07.2014    source источник
comment
В three.js r67 с chrome 36.0.1985.125 я получаю один и тот же результат независимо от того, какой рендерер я использую. Когда вы открываете консоль javascript, вы получаете сообщение журнала THREE.WebGLRenderer 67?   -  person gaitat    schedule 21.07.2014

Ответы (1)


arrow_upward
0
arrow_downward

Только что попробовал, используя 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, чтобы обойти это ограничение безопасности, хотя я не могу найти, как она называется. Кроме того, не рекомендуется просматривать с включенным. Если вы можете разместить примеры на веб-сервере, у вас также не должно возникнуть проблем.

person Leeft    schedule 21.07.2014