Импортируйте другую текстуру во время выполнения в THREE.JS и GLTF - PullRequest
Новая
       15

Импортируйте другую текстуру во время выполнения в THREE.JS и GLTF

0 голосов
/ 29 августа 2018

Я все еще довольно новичок в Three.JS, я очень счастлив, где я дошел, но мне просто нужна помощь.

У меня есть объект GLTF, загруженный в сцену, я хочу иметь возможность загружать различные текстуры в объект на веб-сайте, выбирая стиль пользователем (например, функцией настройки).

Ниже мой код, в данный момент он ничего не выводит, и я получаю следующую ошибку:

В Chrome:

"Ошибка типа: невозможно установить свойство 'map' из неопределенного"

В Firefox:

"Ошибка типа: модель.материал не определена" 

var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('../gtf/green/green.png');
texture.flipY = false;

var loader = new THREE.GLTFLoader();
loader.load( '../gtf/Box.gltf', function ( gltf ) {
    model = gltf.scene;
    scene.add( model );
});

model.material.map = texture;

Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Функция loader.load() выполняется асинхронно, и у вас нет переменной model, установленной сразу после ее вызова. Таким образом, решение, которое вы ищете, состоит в том, чтобы переместить model.material.map = texture; в функцию обратного вызова, например: 

loader.load( '../gtf/Box.gltf', function (gltf) {
    model = gltf.scene;
    texture.flipY = false; // for glTF models only
    model.material.map = texture; // <-- move here
    scene.add( model );
});

Это гарантирует, что у вас есть действительный model объект, который вы можете использовать.

0 голосов
/ 29 августа 2018

Проблема, с которой вы сталкиваетесь, заключается в том, что сцена, которую вы назначили как model, содержит гораздо больше информации, чем просто информация о сетке и материале. Вам нужно будет перебрать объект сцены model, чтобы найти сетку, а затем соответствующим образом изменить материал. Хотя исходный формат данных, который вы используете, отличается, ответы, которые вы ищете, можно найти в предыдущем посте здесь:

Изменить текстуру загруженного .obj в three.js во время выполнения

Edit:
@HugoTeixeira прав, что присвоение текстуры необходимо перенести в функцию обратного вызова loader.load() (извините, я ранее полностью упустил это из виду), но фактическое назначение model.material.map = texture; не сработает. Вам все еще нужно будет перебрать объект gltf.scene, как упомянуто выше, чтобы найти меш, которому вы хотите присвоить текстуру.

...