THREE.js में सही नक्शा कैसे बनाएँ?

Question

मैं सिर्फ निम्न कोड के साथ मेरी दृश्य में एक घन के Normal map Ninja demo लागू करने की कोशिश - देव शाखा से नई नवीनतम संस्करण का उपयोग कर 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 
); 

मैं कर रहा हूँ, फिर भी, क्रोम में निम्नलिखित WebGL त्रुटि मिल रही है :

GL_INVALID_OPERATION : glDrawXXX: attempt to access out of range vertices 

फ़ायरफ़ॉक्स में, मुझे इस तरह की कोई त्रुटि नहीं मिल रही है, लेकिन घन या तो दिखाई नहीं देगी। मानक रंगीन MeshLambertMaterial का उपयोग करके, सबकुछ ठीक काम कर रहा है। इसलिए, ShaderMaterial के साथ एक संघर्ष होने की आवश्यकता है। यदि मैं मास्टर शाखा से नवीनतम तीन.जेएस संस्करण का उपयोग करता हूं, तो यह स्थिति में सुधार नहीं करता है - एक ही त्रुटि होती है।

कोई विचार क्यों यह मामला हो सकता है और इसे काम करने के लिए मुझे क्या बदलने की आवश्यकता है?

Answer 1

इसे जोड़ने का प्रयास किया?

geometry.computeTangents();