Question

我一直在使用动画gif作为置换贴图的示例http://meetar.github.io/threejs-shader-demos/llama.html。但是，它使用THREE.js r58和我使用THREE.js r85并且示例中的以下代码对我不起作用

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" ];给了我麻烦 - 错误消息：

未捕获的TypeError：无法读取属性＆＃39;制服＆＃39;未定义的

所以我将normalmap替换为normal，修复了该错误，但是uniforms["tDiffuse"].value = dispTexture给了我一条错误消息：

未捕获的TypeError：无法设置属性＆＃39; value＆＃39;未定义的

这是我发现THREE.js版本的巨大差异的时候。我想知道是否有人可以帮助我理解如何在更新版本的THREE.js中实现这一点

它与geometry.computeTangents();有关，它仍然是r58的一部分，但已被移除。

谢谢！

更新：我继续处理此问题，并将tDiffuse替换为diffuse，每次动画循环更新时都会收到以下错误消息：

Uncaught TypeError: Cannot set property 'value' of undefined

控制台指向我在three.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
  }

具体来说，程序停在

c.lights && (l.ambientLightColor.value = da.ambient,

遇到da.ambient问题。我不知道下一步该做什么。

Answer 1

比我想象的复杂得多。

在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一段时间但不是必需的。

THREEjs - 使用动画gif作为置换贴图 - 着色器

1 个答案: