Как я могу получить текстуру в нужном месте, когда я изменяю текстуру в формате gltf с Three.js? - PullRequest
Новая
       36

Как я могу получить текстуру в нужном месте, когда я изменяю текстуру в формате gltf с Three.js?

0 голосов
/ 01 апреля 2019

Я попытался динамически изменить текстуру модели glTF, заменив текстуру на THREE.TextureLoader.Цвет текстуры изменился, как я и ожидал, однако рисунок текстуры был несколько смешанным.

Я впервые занимаюсь веб-графикой.Я делал ремикс примера средства просмотра 3d-моделей с three.js, который может загружать модели glTF.Я хотел динамически изменять текстуру с помощью кнопок.Из разных форматов я выбрал glTF, потому что это казалось новым стандартом.Лучшее решение, которое я мог найти до сих пор, было добавить texture.flipY = false; ниже моего загрузчика текстур, но это не сработало.Я также пытался изменить некоторые значения в объекте текстуры, но ничего не произошло.

Здесь я загружаю свою модель: 

loader.load( urls, function (texture) {
    var pmremGenerator = new THREE.PMREMGenerator( texture );
    pmremGenerator.update( renderer );

    var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker(pmremGenerator.cubeLods);
    pmremCubeUVPacker.update( renderer );

    var envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
    var loader = new THREE.GLTFLoader().setPath( `models/${modelName}/`);

    loader.load(`${modelName}.gltf`, (gltf) => {

        gltf.scene.traverse((child) => {
            if (child.isMesh) {
                child.material.envMap = envMap;
            }
        });

        gltf.scene.scale.set(0.01,0.01,0.01)
        scene.add(gltf.scene);
    });

, и я пытался изменить ее текстуру, реализуя эту функцию: 

function changeColor(color) {

    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load(`models/${modelName}/textures/fabric-${color}.jpg`);

    texture.flipY = false;

    scene.traverse((child) => {
        if (child.isMesh) {
            if (child.material.map.format === 1022) {
                child.material.map = texture;
            }
        }
    });
}

Несмотря на то, что я смог нацелиться на нужный мне меш и изменил его цвет, текстура текстуры была очень неловкой.Это была верхняя часть стула, выполненная из ткани.

чтобы нарисовать его в тексте, это выглядело так ...

То, что должно было быть: 

-------------------
| / / / / / / / / |
| / / / / / / / / |
| / / / / / / / / |
| / / / / / / / / |
| / / / / / / / / |
| / / / / / / / / |
| / / / / / / / / |
-------------------
Figure 1

Реальность: 

-------------------
|      +++++      |
|      +++++      |
| ++++++++++++++  |
| ++++++++++++++  |
| ++++++++++++++  |
|      +++++      |
|      +++++      |
-------------------
Figure 2

Чтобы быть ясным: как я могу зарезервировать шаблон текстуры, как на рисунке 1, при изменении файла текстуры с помощью функции выше?

1 Ответ

0 голосов
/ 11 апреля 2019

Благодаря помощи DonMcCurdy я наконец-то получил ответ.

Это действительно была проблема с UV-отображением.

Чтобы получить текстуру в нужном месте, мне нужно было добавить следующее: wrapS, wrapT и RepeatWrapping 

function changeColor(color) {

    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load(`models/${modelName}/textures/fabric-${color}.jpg`);

    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.flipY = false;

    scene.traverse((child) => {
        if (child.isMesh) {
            if (child.material.map.format === 1022) {
                child.material.map = texture;
            }
        }
    });
}

Официальная документация: https://threejs.org/docs/#api/en/textures/Texture

...