ShaderMaterial不適用於MeshFaceMaterial

我使用ShaderMaterial爲我的多維數據集創建真實材質。但它效果不佳。可以看到，只有第一張臉才能很好地工作。即使我對不同的面孔使用不同的紋理，它也不起作用。我不知道我的代碼有什麼問題。這裏是我的代碼：ShaderMaterial不適用於MeshFaceMaterial

<!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

來源

2013-08-01 newvalue

我會建議使用單一材料和調整幾何體的UV的替代。看看minecraft example看看如何做到這一點。

來源

2013-08-01 22:26:00 mrdoob

它不能給實際效果。我想創建這樣的東西：[link]（http://android-apps.com/wp-content/uploads/2011/08/switch-android-game-screen-1.jpg）。我認爲我可以創建多個形狀並將幾何連接在一起以創建軌道，但這可能會損失內存。這是我第一次製作3D遊戲，所以我沒有太多的實驗。 – newvalue

ShaderMaterial不適用於MeshFaceMaterial

回答

相關問題