THREEjs - 使用動畫gif作爲置換貼圖 - 着色器

我一直在研究此示例http://meetar.github.io/threejs-shader-demos/llama.html，它使用動畫gif作爲置換貼圖。但是，它使用three.js所R58和我使用three.js所R85，並從例如下面的代碼不爲我THREEjs - 使用動畫gif作爲置換貼圖 - 着色器

dispTexture = new THREE.Texture(llamacanvas); 

var shader = THREE.ShaderLib[ "normalmap" ]; 
uniforms = THREE.UniformsUtils.clone(shader.uniforms); 

uniforms[ "enableDisplacement" ] = { type: 'i', value: 1 }; 
uniforms[ "tDisplacement" ] = { type: 't', value: dispTexture }; 
uniforms[ "uDisplacementScale" ] = { type: 'f', value: 35 }; 

uniforms[ "enableDiffuse" ] = { type: 'i', value: 1 }; 
uniforms[ "tDiffuse" ].value = dispTexture; 

uniforms[ "tNormal" ] = { type: 't', value: new 
THREE.ImageUtils.loadTexture('flat.png')};

在第一var shader = THREE.ShaderLib[ "normalmap" ];是給我找麻煩工作 - 錯誤信息：

Uncaught TypeError: Cannot read property 'uniforms' of undefined

所以我換成normalmap與normal，修復該錯誤，
但隨後uniforms["tDiffuse"].value = dispTexture給我一個錯誤信息：

Uncaught TypeError: Cannot set property 'value' of undefined

這是當我發現THREE.js構建的巨大差異。我想知道是否有人可以幫助我理解如何在更新版本的THREE.js中實現這個功能。

它與geometry.computeTangents();有關，它仍然是r58的一部分，但已被刪除。

謝謝！

更新：我繼續在這方面努力，我代替tDiffuse與diffuse和每一個動畫循環更新，我收到此錯誤信息時間：在三個

Uncaught TypeError: Cannot set property 'value' of undefined

控制檯指向我一個專.min.js，而不是在示例代碼我使用：

 if (c.morphNormals) 
     for (m = c.numSupportedMorphNormals = 0; m < J.maxMorphNormals; m++) 
      0 <= l["morphNormal" + m] && c.numSupportedMorphNormals++; 
     l = h.__webglShader.uniforms; 
     if (!c.isShaderMaterial && !c.isRawShaderMaterial || !0 === c.clipping) 
     h.numClippingPlanes = Oa.numPlanes, 
     h.numIntersection = Oa.numIntersection, 
     l.clippingPlanes = Oa.uniform; 
     h.fog = b; 
     h.lightsHash = da.hash; 
     c.lights && (l.ambientLightColor.value = da.ambient, 
     l.directionalLights.value = da.directional, 
     l.spotLights.value = da.spot, 
     l.rectAreaLights.value = da.rectArea, 
     l.pointLights.value = da.point, 
     l.hemisphereLights.value = da.hemi, 
     l.directionalShadowMap.value = da.directionalShadowMap, 
     l.directionalShadowMatrix.value = da.directionalShadowMatrix, 
     l.spotShadowMap.value = da.spotShadowMap, 
     l.spotShadowMatrix.value = da.spotShadowMatrix, 
     l.pointShadowMap.value = da.pointShadowMap, 
     l.pointShadowMatrix.value = da.pointShadowMatrix); 
     m = h.program.getUniforms(); 
     l = db.seqWithValue(m.seq, l); 
     h.uniformsList = l 
    } 
    c.needsUpdate = !1 
    }

具體地，程序在

停止

與da.ambient有問題。我不知道下一步該怎麼做。

來源

2017-09-25 aeiou

想通了。比我想象的要複雜得多。在r85中，我根本不用擔心顯式設置制服。我只需要導入gif，創建材質，然後添加gifCanvas： var supGif = new SuperGif（{gif：document.getElementById（'gif1'）}）; supGif.load（）; var gifCanvas = supGif.get_canvas（）; material = new THREE.MeshStandardMaterial（）; material.displacementMap = new THREE.Texture（gifCanvas）; – aeiou

比我想象的要複雜得多。

在r85中不需要明確地設置制服。只有導入的GIF，創造物質然後添加gifCanvas作爲displacementMap：

var supGif = new SuperGif({ gif: document.getElementById('gif1') }); 
supGif.load(); 
var gifCanvas = supGif.get_canvas(); 

          .  .  . 

material = new THREE.MeshStandardMaterial(); 
material.map = new THREE.Texture(gifCanvas); 
material.displacementMap = material.map;

然後在animate()功能：

material.displacementScale = 200; 
material.map.needsUpdate = true; 
material.displacementMap.needsUpdate = true;

我看着CanvasTexture和ShaderMaterial一段時間，但沒有必要這個。

來源

2017-09-27 16:03:12 aeiou

THREEjs - 使用動畫gif作爲置換貼圖 - 着色器

回答

相關問題