THREE.jsの法線マップを正しく作成する方法は？

Question

私はちょうど次のコードで私のシーンでキューブにNormal map Ninja demoを適用しようとした - のdevの枝から新しい最新Three.jsのバージョンを使用して：

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

私は、しかし、Chromeで次のWebGLのエラーを取得しています：

GL_INVALID_OPERATION : glDrawXXX: attempt to access out of range vertices 

Firefoxでは、このようなエラーは発生しませんが、キューブは表示されません。 標準色のMeshLambertMaterialを使用すると、すべて正常に動作しています。したがって、ShaderMaterialと競合する必要があります。 MASTERブランチから最新のThree.jsバージョンを使用しても状況は改善されません - 同じエラーが発生します。

なぜこのような場合がありますか、それを動作させるために変更する必要があるのは何ですか？

Answer 1

これを追加しましたか？

geometry.computeTangents();