将纹理附加到 json 对象答案

【问题标题】：Attach a texture to a json object将纹理附加到 json 对象
【发布时间】：2018-06-30 12:36:14
【问题描述】：

我无法将纹理应用于加载的 json 文件。它适用于我放入场景的飞机，但不适用于我正在加载的对象（尽管我可以更改金属度等属性）。

这是我所在的地方：

const towerObj = new THREE.ObjectLoader()

towerObj.load( "./3dassets/models/buiding.json",  function (object) {
    let tower = object
    scene.add(tower)

    const texture = new THREE.TextureLoader().load("./3dassets/materials/Concrete.png")
    const bumpMap = new THREE.TextureLoader().load("./3dassets/materials/Concrete_nrm.png")

    texture.wrapS = THREE.RepeatWrapping
    texture.wrapT = THREE.RepeatWrapping
    texture.repeat.set( 0.1, 0.1 )
    bumpMap.wrapS = THREE.RepeatWrapping
    bumpMap.wrapT = THREE.RepeatWrapping
    bumpMap.repeat.set( 0.1, 0.1 )

    tower.traverse( function (child) {
        if ( child instanceof THREE.Mesh ) {
            child.castShadow = true
            child.receiveShadow = true

            child.material = new THREE.MeshStandardMaterial()
            child.material.map = texture
            child.material.bumpMap = bumpMap
            child.material.needsUpdate = true
            child.material.roughness = 0.1
            child.material.metalness = 0
            child.color = 'rgb(244,244,244)'
            console.log(child.name)

        }
    });


});

这是对象的简化版本（我删除了对顶点、法线和面的大部分引用，否则会导致浏览器崩溃）：

{
"metadata": {
    "version": 4.5,
    "type": "Object",
    "generator": "Object3D.toJSON"
},
"geometries": [
    {
        "uuid": "2920CDAB-6DEC-4BEB-9BFB-C794B33A5AFB",
        "type": "Geometry",
        "data": {
            "vertices": [0.720958,8.47758],
            "normals": [-0.448833,0.782579],
            "faces": [50,0,48,47,0,0,1,2,3,50,48,95,]
        }
    }],

"object": {
    "uuid": "EE10C174-4F45-45B3-80E6-8AA488B29F34",
    "type": "Mesh",
    "name": "tower",
    "castShadow": true,
    "receiveShadow": true,
    "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
    "geometry": "2920CDAB-6DEC-4BEB-9BFB-C794B33A5AFB",
}}

【问题讨论】：

您是如何创建此 JSON 文件的，它在没有纹理的情况下是否正确显示在您的场景中？该文件在我看来无效。
感谢唐的回复。 json 文件通过 blender 导出并导入到 three.js 编辑器中并作为对象从那里导出（因为原始的 blender json 不起作用）。对象本身工作正常，我可以在场景中正确看到它，对其进行动画处理，我可以对其应用材质并调整粗糙度、金属度等属性。我只是无法应用纹理
谢谢你的链接，我现在看看。为了清楚起见，我在搅拌机中使用的模型没有纹理，我正在尝试单独添加它们，就像我在放置在效果很好的场景中的飞机上所做的那样。
是的，即便如此，如果您想稍后添加纹理，您仍需要在模型中添加 UV。 stackoverflow.com/questions/18972672/…

标签： three.js blender

【解决方案1】：

即使您没有在 Blender 中使用纹理，您也需要在导出之前在 Blender 中创建 UV，以便以后能够添加纹理。

见：

完成此操作后，您应该会在导出的 JSON 中的某处看到这样的 UV，并且能够在 threejs 中添加纹理：

"uvs":[[0,0,1,0,1,1,0,1]],

【讨论】：