Three.js GLTF材质更新不会保留颜色

时间:2019-01-03 19:16:55

标签: three.js gltf

我在场景中设置了GLTF对象,当我第一次加载模型时,关联的纹理就很好地呈现了(纹理首先在GLTF json中定义):

enter image description here

现在,我希望能够更新GLTF材质。我这样做的方式是:

this.gltf.scene.traverse(
  (child) => {
    if (child.name == 'defaultMaterial') {
      this.rootMaterial = child.material;
      child.material.map = texture;
      child.material.map.needsUpdate = true;
    }
  }
);

但是,当材质更新时,它看起来会褪色并且照明不正确:

enter image description here

我想知道我用来覆盖材质的方法是否未正确更新,或者由于gltf JSON结构中定义的材质丢失了设置,因为材质被覆盖了。在那种情况下,我不确定如何修改图像或在网格中复制参数。

我对GLTF或建模了解不多,所以我可以深入了解它。

附上的是模型的定义,以防情况变得更加清晰

{
  "accessors": [
    {
      "bufferView": 2,
      "componentType": 5126,
      "count": 2469,
      "max": [
        0.40150400996208191,
        1,
        0.40150400996208191
      ],
      "min": [
        -0.40150400996208191,
        -1,
        -0.40150400996208191
      ],
      "type": "VEC3"
    },
    {
      "bufferView": 2,
      "byteOffset": 29628,
      "componentType": 5126,
      "count": 2469,
      "max": [
        1,
        1,
        1
      ],
      "min": [
        -1,
        -1,
        -1
      ],
      "type": "VEC3"
    },
    {
      "bufferView": 3,
      "componentType": 5126,
      "count": 2469,
      "max": [
        1,
        0.9930080771446228,
        0.99999946355819702,
        1
      ],
      "min": [
        -0.99999970197677612,
        -0.99982893466949463,
        -1,
        -1
      ],
      "type": "VEC4"
    },
    {
      "bufferView": 1,
      "componentType": 5126,
      "count": 2469,
      "max": [
        0.99194198846817017,
        0.99000000953674316
      ],
      "min": [
        0.0099999997764825821,
        0.0099999997764825821
      ],
      "type": "VEC2"
    },
    {
      "bufferView": 0,
      "componentType": 5125,
      "count": 12984,
      "max": [
        2468
      ],
      "min": [
        0
      ],
      "type": "SCALAR"
    }
  ],
  "asset": {
    "extras": {
      "author": "jmvfx (https://sketchfab.com/jmvfx)",
      "license": "SKETCHFAB Standard (https://sketchfab.com/licenses)",
      "source": "https://sketchfab.com/models/aff40b3b41e84de5a4d92d5fd1995b8d",
      "title": "Dark Angels - Monster Never Die?"
    },
    "generator": "Sketchfab-3.31.2",
    "version": "2.0"
  },
  "bufferViews": [
    {
      "buffer": 0,
      "byteLength": 51936,
      "byteOffset": 0,
      "name": "floatBufferViews",
      "target": 34963
    },
    {
      "buffer": 0,
      "byteLength": 19752,
      "byteOffset": 51936,
      "byteStride": 8,
      "name": "floatBufferViews",
      "target": 34962
    },
    {
      "buffer": 0,
      "byteLength": 59256,
      "byteOffset": 71688,
      "byteStride": 12,
      "name": "floatBufferViews",
      "target": 34962
    },
    {
      "buffer": 0,
      "byteLength": 39504,
      "byteOffset": 130944,
      "byteStride": 16,
      "name": "floatBufferViews",
      "target": 34962
    }
  ],
  "buffers": [
    {
      "byteLength": 170448,
      "uri": "scene.bin"
    }
  ],
  "images": [
    {
      "uri": "textures/initialShadingGroup_metallicRoughness.png"
    },
    {
      "uri": "textures/initialShadingGroup_normal.png"
    },
    {
      "uri": "textures/standard.jpg"
    }
  ],
  "materials": [
    {
      "doubleSided": true,
      "emissiveFactor": [
        0,
        0,
        0
      ],
      "name": "initialShadingGroup",
      "normalTexture": {
        "index": 1,
        "scale": 1,
        "texCoord": 0
      },
      "occlusionTexture": {
        "index": 0,
        "strength": 1,
        "texCoord": 0
      },
      "pbrMetallicRoughness": {
        "baseColorFactor": [
          1,
          1,
          1,
          1
        ],
        "baseColorTexture": {
          "index": 2,
          "texCoord": 0
        },
        "metallicFactor": 1,
        "metallicRoughnessTexture": {
          "index": 0,
          "texCoord": 0
        },
        "roughnessFactor": 1
      }
    }
  ],
  "meshes": [
    {
      "name": "defaultMaterial",
      "primitives": [
        {
          "attributes": {
            "NORMAL": 1,
            "POSITION": 0,
            "TANGENT": 2,
            "TEXCOORD_0": 3
          },
          "indices": 4,
          "material": 0,
          "mode": 4
        }
      ]
    }
  ],
  "nodes": [
    {
      "children": [
        1
      ],
      "name": "RootNode (gltf orientation matrix)",
      "rotation": [
        -0.70710678118654746,
        -0,
        -0,
        0.70710678118654757
      ]
    },
    {
      "children": [
        2
      ],
      "name": "RootNode (model correction matrix)"
    },
    {
      "children": [
        3
      ],
      "matrix": [
        1,
        0,
        0,
        0,
        0,
        -4.3711390063094768e-08,
        0.999999999999999,
        0,
        0,
        -0.999999999999999,
        -4.3711390063094768e-08,
        0,
        0,
        0,
        0,
        1
      ],
      "name": "Collada visual scene group"
    },
    {
      "children": [
        4
      ],
      "name": "g"
    },
    {
      "mesh": 0,
      "name": "defaultMaterial"
    }
  ],
  "samplers": [
    {
      "magFilter": 9729,
      "minFilter": 9987,
      "wrapS": 10497,
      "wrapT": 10497
    }
  ],
  "scene": 0,
  "scenes": [
    {
      "name": "OSG_Scene",
      "nodes": [
        0
      ]
    }
  ],
  "textures": [
    {
      "sampler": 0,
      "source": 0
    },
    {
      "sampler": 0,
      "source": 1
    },
    {
      "sampler": 0,
      "source": 2
    }
  ]
}

任何有经验的人对此都会很有帮助。

1 个答案:

答案 0 :(得分:1)

GLTFLoader docs中有关“纹理”的部分,您需要配置渲染器和新纹理以获得最佳效果:

renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;

// If texture is used for color information, set colorspace.
texture.encoding = THREE.sRGBEncoding;

// UVs use the convention that (0, 0) corresponds to the upper left corner of a texture.
texture.flipY = false;