Как использовать текстуру на сфере в three.js - PullRequest
Новая
       35

Как использовать текстуру на сфере в three.js

9 голосов
/ 02 августа 2011

Я скачал пример сферы из: http://aerotwist.com/lab/getting-started-with-three-js/, и я вижу красивую красную сферу.Я хотел бы использовать текстуру на нем.Я пробовал это: 

var texture = THREE.ImageUtils.loadTexture("ball-texture.jpg");
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
texture.repeat.set( 125, 125 );
texture.offset.set( 15, 15 );
texture.needsUpdate = true;
var sphereMaterial = new THREE.MeshBasicMaterial( { map: texture } );
var sphere = new THREE.Mesh(new THREE.Sphere(radius, segments, rings),sphereMaterial);

но я ничего не вижу, все черное.У кого-нибудь есть рабочий пример текстуры сферы?

Ответы [ 4 ]

3 голосов
/ 09 октября 2011

У вас могут быть две проблемы.

Сначала попробуйте загрузить его так: 

var texture = THREE.ImageUtils.loadTexture('ball-texture.jpg', {}, function() {
    renderer.render(scene, camera);
});

texture.needsUpdate = true;

Убедитесь, что размер текстуры является степенью двойки (512x512px для IE).

2 голосов
/ 04 августа 2011

Вы используете Firefox?Это может быть проблемой в вашем браузере.Firefox использует какой-то кросс-сайт-блокиратор для текстур.Результат черный вместо.Взгляните на этот сайт для получения дополнительной информации: http://hacks.mozilla.org/2011/06/cross-domain-webgl-textures-disabled-in-firefox-5/

1 голос
/ 15 апреля 2012

У меня была эта проблема, но если вы загружаете html как файл (то есть локально, а не как веб-сервер), многие браузеры (например, chrome) не позволяют загружать изображения стандартным способомнарушение безопасности.

1 голос
/ 30 января 2012

Есть ли у вас цикл рендеринга, или вы визуализировали сцену только один раз?

Вам нужно иметь цикл рендеринга, чтобы при загрузке изображения и обновлении текстуры THREE.ImageUtils вырендеринг сцены с обновленной текстурой.

Все примеры three.js основаны на этой технике.То есть, запустить несколько асинхронных операций, включающих выборку удаленного ресурса, запустить цикл рендеринга, позволить сцене обновляться по мере поступления удаленных ресурсов.

ИМХО, это самая большая проблема Three.js для новичков Javascript (таких как я), которыене знакомы с тем, как работают асинхронные операции.

...