Question

我使用ShaderMaterial为我的立方体创建真实材质。但它效果不佳。可以看出，只有第一张脸很好用。即使我对不同的面孔使用不同的纹理，它也不起作用。我不知道我的代码有什么问题。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test_material</title>
<style type="text/css" media="all">
canvas {
    border: 1px solid #000;
}
</style>
</head>
<body>
<div id='container'></div>
<script type="text/javascript" src="js/threejs/Three.js">
</script>
<script type="text/javascript" src="js/lib/util.js">
</script>
<script type="text/javascript" src="js/threejs/TrackballControls.js"></script>
<script>
var WIDTH= 400;
var HEIGHT = 400;
var container = document.getElementById('container');
var camera =new THREE.PerspectiveCamera(25, WIDTH/HEIGHT, 1, 10000);
camera.position.set(0,300,100);
var animate;
var scene = new THREE.Scene();

scene.add(camera);
camera.lookAt(scene.position);
var controls = new THREE.TrackballControls(camera);

//custom shape
materialArr = [];
var data = new utils.Storage.ResourceStorage();
data.load({
    'textures': {
        'track_normal_0' : 'images/pattern/track_normal_0.jpg',
        'track_diffuse_0' : 'images/pattern/track_diffuse_0.jpg',
        'track_specular_0' : 'images/pattern/track_specular_0.jpg',

        'track_normal_0' : 'images/pattern/track_normal_0.jpg',
        'track_diffuse_0' : 'images/pattern/track_diffuse_0.jpg',
        'track_specular_0' : 'images/pattern/track_specular_0.jpg',

        'track_normal_1' : 'images/pattern/track_normal_1.jpg',
        'track_diffuse_1' : 'images/pattern/track_diffuse_1.jpg',
        'track_specular_1' : 'images/pattern/track_specular_1.jpg',

        'track_normal_2' : 'images/pattern/track_normal_2.jpg',
        'track_diffuse_2' : 'images/pattern/track_diffuse_2.jpg',
        'track_specular_2' : 'images/pattern/track_specular_2.jpg',

        'track_normal_3' : 'images/pattern/track_normal_3.jpg',
        'track_diffuse_3' : 'images/pattern/track_diffuse_3.jpg',
        'track_specular_3' : 'images/pattern/track_specular_3.jpg',

        'track_normal_4' : 'images/pattern/track_normal_4.jpg',
        'track_diffuse_4' : 'images/pattern/track_diffuse_4.jpg',
        'track_specular_4' : 'images/pattern/track_specular_4.jpg',

        'track_normal_5' : 'images/pattern/track_normal_5.jpg',
        'track_diffuse_5' : 'images/pattern/track_diffuse_5.jpg',
        'track_specular_5' : 'images/pattern/track_specular_5.jpg',

    },
    'onReady': init
});

function init(){
    var materialArr = [];

    for (var i=0; i< 6; i++){

        var shader = THREE.ShaderLib['normalmap'];
        var normalTexture = data.getTexture('track_normal_' + i).clone();
        normalTexture.needsUpdate = true;
        var diffuseTexture = data.getTexture('track_diffuse_' + i);
        diffuseTexture.needsUpdate = true;
        var specularTexture = data.getTexture('track_specular_' + i);
        specularTexture.needsUpdate = true;
        var uniforms = THREE.UniformsUtils.clone(shader.uniforms);

        uniforms['tNormal'].value = normalTexture;
        uniforms['tDiffuse'].value = diffuseTexture;
        uniforms['tSpecular'].value = specularTexture;

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

        uniforms['uSpecularColor'].value.setHex(0x00cc00);
        uniforms['uDiffuseColor'].value.setHex(0x0000ff);

        <!--uniforms['uShininess'].value = 100;-->

        var material = new THREE.ShaderMaterial({
            fragmentShader: shader.fragmentShader,
            vertexShader: shader.vertexShader + " ",
            uniforms: uniforms,
            lights: true
        });
        material.perPixel  = true;
        material.needsUpdate = true;
        materialArr.push(material);
    }
    var geometry = new THREE.CubeGeometry(40, 40, 40);
    geometry.computeTangents();

    var material = new THREE.MeshFaceMaterial(materialArr);
    for (var i=0; i< material.materials.length; i++){
        material.materials[i].needsUpdate = true;
    }
     mesh =new  THREE.Mesh(geometry, material);

    scene.add(mesh);

    var renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(WIDTH, HEIGHT);
    container.appendChild(renderer.domElement);


    var dirLight = new THREE.DirectionalLight(0xffffff);
    scene.add(dirLight);

    var ambientLight = new THREE.AmbientLight(0xcddacc);
    scene.add(ambientLight);

        renderer.render(scene, camera);
    animate = function (){
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    };

    animate();
}
</script>
</body>
</html>

My result

Answer 1

我建议使用单一材质并调整几何体的UV。看看minecraft example，看看如何做到这一点。

ShaderMaterial不适用于MeshFaceMaterial

1 个答案: