在运行时导入另一个纹理（three.js 使用 .glb 格式）

Question

我正在尝试在运行时更改 .glb 对象的纹理。我正在使用 three.js 但它不起作用。

在这个例子中它必须工作... http://necromanthus.com/Test/html5/sims_room.html

所以，我有这个对象：（带嵌入图像的 glb 导出） Shoe

现在我改变了纹理，然后发生了一些疯狂的事情： Shoe after change

我不知道我能做什么。

这是加载.glb对象的代码：

var shoeFile = 'shoe.glb';
glbLoader.load('3d_models/' + shoeFile, function(geometry) {
  shoeObject = geometry.scene.children[0];
  scene.add(shoeObject);
}, onLoadProgress);

下面是改变纹理的代码：

var textureLoader = new THREE.TextureLoader();
var remap = textureLoader.load( "3d_models/shoe.png" );

function setAnotherTexture( texture ) {
   scene.children[5].material.map = eval( texture );
}

是我的代码有误还是有什么技巧可以在 blender 中导出另一个纹理？

希望有人能帮助我。谢谢。

Answer 1

glTF 格式使用与 three.js 不同的纹理约定，并且 texture.flipY 必须设置为 false（其默认值为 true）。对于模型中包含的纹理，GLTFLoader 会自动执行此操作。在运行时更改纹理或添加新纹理时，必须在您的 JS 代码中完成：

texture.flipY = false;
mesh.material.map = texture;

在运行时导入另一个纹理（three.js 使用 .glb 格式）

Import another Texture at runtime (three.js with .glb Format)

3d

blender

three.js

gltf