THREE.js'de normal bir harita nasıl doğru bir şekilde oluşturulur?

Question

Sadece aşağıdaki kodla benim sahnede bir küp Normal map Ninja demo uygulamak çalıştı - dev daldan yeni son Three.js sürümünü kullanıyor:

// common material parameters 

var ambient = 0x050505, diffuse = 0x331100, specular = 0xffffff, shininess = 10, scale = 23; 

// normal map shader 

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

uniforms[ "enableAO" ].value = true; 
uniforms[ "enableDiffuse" ].value = false; 
uniforms[ "enableSpecular" ].value = false; 
uniforms[ "enableReflection" ].value = true; 

uniforms[ "tNormal" ].texture = THREE.ImageUtils.loadTexture("normal.jpg"); 
uniforms[ "tAO" ].texture = THREE.ImageUtils.loadTexture("ao.jpg"); 

uniforms[ "tDisplacement" ].texture = THREE.ImageUtils.loadTexture("displacement.jpg"); 
uniforms[ "uDisplacementBias" ].value = - 0.428408 * scale; 
uniforms[ "uDisplacementScale" ].value = 2.436143 * scale; 

uniforms[ "uDiffuseColor" ].value.setHex(diffuse); 
uniforms[ "uSpecularColor" ].value.setHex(specular); 
uniforms[ "uAmbientColor" ].value.setHex(ambient); 

uniforms[ "uShininess" ].value = shininess; 

uniforms[ "tCube" ].texture = reflectionCube; 
uniforms[ "uReflectivity" ].value = 0.1; 

uniforms[ "uDiffuseColor" ].value.convertGammaToLinear(); 
uniforms[ "uSpecularColor" ].value.convertGammaToLinear(); 
uniforms[ "uAmbientColor" ].value.convertGammaToLinear(); 


var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, fog: false }; 
var displacementMaterial = new THREE.ShaderMaterial(parameters); 

/* 
var diamond = new THREE.Diamond({ 
    material: bumpmapMaterial 
}); 
*/ 

var diamond = new THREE.Mesh(
    new THREE.CubeGeometry(50, 50, 50), 
    displacementMaterial 
); 

Ben, ancak, Chrome'da şu WebGL hata alıyorum :

GL_INVALID_OPERATION : glDrawXXX: attempt to access out of range vertices 

Firefox'ta böyle bir hata alıyorum, ancak küp de görünmüyor. Standart bir MeshLambertMaterial kullanarak her şey iyi çalışıyor. Yani, ShaderMaterial ile bir çakışma olması gerekiyor. MASTER şubesinden en son Three.js sürümünü kullanırsam durumu iyileştirmez - aynı hata oluşur.

Bunun neden olabileceği ve çalışmasını sağlamak için neleri değiştirmem gerektiğini düşündüğüm herhangi bir fikrin var mı?

Answer 1

Bunu eklemeye çalıştı mı?

geometry.computeTangents();