如何用Three.js中的ShaderMaterial替换Collada导入的纹理?

时间:2012-05-28 09:36:47

标签: javascript webgl three.js collada

有没有办法在Three.js库中通过Collada加载器导入的简单3D模型中替换所有纹理?

我想要完成的是通过ShaderMaterial将颜色,镜面和法线贴图应用到模型中,指向具有模型材质名称但添加了“-color”,“ - normal”和“-spec”的新文件措词:

“brochureFrontCover” - > “brochureFrontCover-color.jpg”,“brochureFrontCover-normal.jpg”,“brochureFrontCover-spec.jpg”

如果有任何好心灵可以告诉我这种功能应该如何看待,我会非常感激。

脚本: http://dev.printhouse.co.uk/uv-simulator/j/Brochure.js

Collada型号: http://dev.printhouse.co.uk/uv-simulator/m/Brochure.dae

1 个答案:

答案 0 :(得分:1)

我认为它应该是这样的:

THREE.SceneUtils.traverseHierarchy( dae, function ( child ) {

    if ( child.material ) {

        var shader = THREE.ShaderUtils.lib[ "normal" ];
        var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

        uniforms[ "tDiffuse" ].texture = THREE.ImageUtils.loadTexture( child.material.name + "-color.jpg" );
        uniforms[ "tNormal" ].texture = THREE.ImageUtils.loadTexture( child.material.name + "-normal.jpg" );
        uniforms[ "tSpecular" ].texture = THREE.ImageUtils.loadTexture( child.material.name + "-spec.jpg" );

        uniforms[ "enableDiffuse" ].value = true;
        uniforms[ "enableSpecular" ].value = true;

        child.geometry.computeTangents();

        child.material = new THREE.ShaderMaterial( {
            uniforms: uniforms,
            vertexShader: shader.vertexShader,
            fragmentShader: shader.fragmentShader,
            lights: true
        } );

    }

} );
如果你需要调整制服,

This example应该是一个很好的参考。