Присвоенная текстура модели glb в Three.js полностью изменена и работает только с THREE.RepeatWrapping - PullRequest
Новая
       51

Присвоенная текстура модели glb в Three.js полностью изменена и работает только с THREE.RepeatWrapping

0 голосов
/ 04 июня 2019

Я загружаю модель glb в Three.js, созданную в SketchUp. Файл можно найти здесь https://www.graviditetsberegner.dk/bpnew.skp

Модель содержит группу, которая называется текст с сеткой. Я хочу отобразить текстуру, содержащую текст здесь. Я использую следующий код: 

var modelLoader = new THREE.GLTFLoader();

modelLoader.load("https://www.graviditetsberegner.dk/bpnew.glb", function (gltf) {

model = gltf.scene.clone();
model.scale.set(50,50,50)
scene.add(model);

//Use canvas to draw texture and add it to the model group Text
var textModelMesh = FindMeshWithNameInModel(model, "Text");
var textTexture = CreateCanvasTexture("This is a test");

textTexture.wrapS = THREE.RepeatWrapping;
textTexture.wrapT = THREE.RepeatWrapping;

textModelMesh.material.map = textTexture;

У меня есть две проблемы с кодом:

  • Текст зеркальный. В других форматах, таких как dae, текст не отражается
  • Текст отображается только тогда, когда я установил wrapS и wrapT на RepeatWrapping. Однако текстура, используемая в SketchUp, должна быть аналогична размерам сгенерированной текстуры на холсте.

Как я могу исправить эти проблемы?

Скрипка, показывающая проблему: https://jsfiddle.net/Lgmds9ce/2/

1 Ответ

2 голосов
/ 04 июня 2019

Текст зеркальный. В других форматах, таких как dae, текст не отражается

Как упомянуто в официальной документации для THREE.GLTFLoader, вы должны установить Texture.flipY на false, если вы вручную замените текстуру.

Текст отображается только тогда, когда я установил wrapS и wrapT на RepeatWrapping. Однако текстура, используемая в SketchUp, должна быть аналогична размерам сгенерированной текстуры на холсте.

Текстура из актива также установила Texture.wrapS и Texture.wrapT на THREE.RepeatWrapping.

Обновленная скрипка: https://jsfiddle.net/d12t6p5q/1/

three.js R105

...