【问题标题】:How to set a texture on a Object3D child Mesh如何在 Object3D 子网格上设置纹理
【发布时间】:2026-02-03 08:20:12
【问题描述】:

我这样导入我的 Object3D:

var globalObject; // this is a global object

var loader = new THREE.ObjectLoader();
loader.load('path/to/object3d.json', function(object) {
    globalObject = object;
    scene.add(globalObject);
});

我想要实现的是,当用户点击一个按钮时,整个对象的某些 Mesh 元素会获得一个纹理。我是这样做的:

// on button click {
    for(var i in globalObject.children) {
        // apply to Mesh of interest {
            var texture = THREE.ImageUtils.loadTexture('path/to/image.jpg');
            globalObject.children[i].material = new THREE.MeshLambertMaterial({map: texture, needsUpdate: true});
        } // end apply to Mesh of interest
    }
} // end on button click

就设置纹理而言,上述代码似乎有效。这里的问题是纹理看起来有点扭曲。看起来像这样http://db.tt/S5VEsByd

如何纠正这个问题,以便将完整的纹理应用到两个表面?

【问题讨论】:

  • 您的对象的纹理坐标似乎设置不正确。你从哪里得到的对象?如果可以,请在 Blender 或用于创建它们的软件中检查对象的纹理坐标。
  • 是的,我认为这样的事情是可能的。我实际上不是 3d 设计师,我从设计师那里得到了我的对象。有没有办法将纹理坐标从 three.js 重置为一些默认值,或者只能在用于创建对象的软件中检查这些坐标?
  • 好吧,我目前不知道有什么方法。你必须自己做这件事。在此处查看此答案:github.com/mrdoob/three.js/issues/2065#issuecomment-6352320 它为 X/Y 平面中的所有面生成平面映射。您将不得不根据 faceDirection 执行此操作以获得一些自动展开。你从哪里得到 obj,你只需要这 1 个 obj 是正确的吗?您还可以尝试使用具有正确纹理坐标的 three.js 中的标准几何图形重建 obj。
  • 好的,谢谢,我试试!

标签: javascript 3d three.js webgl


【解决方案1】:

这应该可以解决问题:

// on button click {
    for(var i in globalObject.children) {
        // apply to Mesh of interest {
            var texture = THREE.ImageUtils.loadTexture('path/to/image.jpg');
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            globalObject.children[i].material = new THREE.MeshLambertMaterial({map: texture, needsUpdate: true});
        } // end apply to Mesh of interest
    }
} // end on button click

【讨论】:

  • 还是不行。什么对纹理如何应用于网格有影响?我的目标文件中的设置是否可能在这里干扰?还有一张关于纹理应该是什么样子的图片(后面的立方体)以及它在我的对象上的样子(前面的表格结构):db.tt/j3M5Tghe
  • 确保纹理为power of 2