Question

我尝试将collada文件（从Blender导出）加载到three.js场景中，然后用ShaderMaterial替换材质。

由于此collada文件中只有一个对象，因此它位于collada.scene.children [0]，因此我尝试将材质属性更改为新创建的属性。我可以使用线框甚至纹理的StandardPhongMaterial轻松替换材质，但是只要添加ShaderMaterial，模型就会显示为黑色，没有任何光照或纹理。

材料设置如下：

materials[0] = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

var shader = THREE.ShaderUtils.lib[ "normal" ];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "tDiffuse" ].texture = THREE.ImageUtils.loadTexture( "color.png" );
uniforms[ "tNormal" ].texture = THREE.ImageUtils.loadTexture( "normal.png" );
uniforms[ "tSpecular" ].texture = THREE.ImageUtils.loadTexture( "spec.png" );
uniforms[ "enableDiffuse" ].value = true;
uniforms[ "enableSpecular" ].value = true;

materials[1] = new THREE.ShaderMaterial( {
  uniforms: uniforms,
  vertexShader: shader.vertexShader,
  fragmentShader: shader.fragmentShader,
  lights: true
});

var basicTexture = THREE.ImageUtils.loadTexture( "color.png ")
materials[2] = new THREE.MeshPhongMaterial( { map: basicTexture });

在模型加载中，我将ShaderMaterial添加到模型中，然后将其添加到场景中，以便可以使用所有必需的属性：

loader.load('model.dae', function(collada) {
  model = collada.scene;
  model.scale.x = model.scale.y = model.scale.z = 50;
  model.rotation.y = 180;
  model.updateMatrix();
  model.children[0].material = materials[1];
  model.children[0].geometry.computeTangents();
  scene.add(model);
});

完整的源代码可在此处获取：http://rainbowrangers.de/normalmap/

我该如何解决这个问题？

Answer 1

您使用的是旧格式。它应该是

制服[“tDiffuse”]。value = THREE.ImageUtils.loadTexture（“color.png”）;

请参阅three.js Wiki上的迁移帖子：https://github.com/mrdoob/three.js/wiki/Migration

纹理均匀变化：纹理单位现在自动分配，纹理对象转到value属性而不是纹理1 {type：“t”，value：0，texture：map} =＆gt; {type：“t”，value：map}

在Three.js中使用带有ShaderMaterials的Collada模型时显示黑色的模型

1 个答案: