Come si fa una mappa normale in THREE.js correttamente?

Question

ho solo cercato di applicare la Normal map Ninja demo a un cubo nella mia scena con il seguente codice - utilizzando una nuova versione più recente Three.js dalla filiale dev:

// 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 
); 

sto, però, ottenendo il seguente errore WebGL in Chrome :

GL_INVALID_OPERATION : glDrawXXX: attempt to access out of range vertices 

In Firefox, non ricevo un errore come questo, ma il cubo non viene visualizzato neanche. Utilizzando uno standard colorato MeshLambertMaterial, tutto funziona correttamente. Quindi, deve esserci un conflitto con lo ShaderMaterial. Se utilizzo la versione più recente di Three.js dal ramo MASTER, non migliora la situazione - si verifica lo stesso errore.

Qualche idea del perché questo potrebbe essere il caso e di cosa ho bisogno di cambiare per farlo funzionare?

Answer 1

Provato aggiungendo questo?

geometry.computeTangents();