three.js 带有来自 jpg 图像的纹理贴图的平面几何正在变黑

Question

我正在尝试使用 three.js 引擎将纹理应用于 planeGeometry。我应该看到一个足球场，我实际上看到的是黑色。

如果我用 color:0x80ff80 替换 map:texture 参数，我会得到一个纯绿色的区域，表明几何图形位于正确的位置。

该页面包含一个出现在文件中任何脚本之前的。我可以显示那个图像，证明图像没有问题。

这些文件正在本地由 HTTP 服务器提供。

我用来构建 material 和 PlaneGeometry 的代码如下。任何想法表示赞赏。谢谢。

function buildField( fieldLength, fieldWidth, scene) {
    var image = document.getElementById("fieldTexture");
    var texture = new THREE.Texture(image);
    texture.minFilter = THREE.LinearFilter;
    var geometry = new THREE.PlaneGeometry(fieldLength, fieldWidth, 5, 5);
    var material = new THREE.MeshBasicMaterial( {map:texture, side:THREE.DoubleSide});
    var field = new THREE.Mesh(geometry, material);
    field.rotation.x = -Math.PI/2;
    scene.add(field);
}

Answer 1

试试这个，自己的 THREE.js 方法通常效果更好...:[=11=]

  texture = THREE.ImageUtils.loadTexture('field.png');
  material = new THREE.MeshBasicMaterial({map: texture});
  var field = new THREE.Mesh(geometry, material);

Answer 2

THREE.ImageUtils 已弃用。 (source)
使用 THREE.TextureLoader().load('field.png') 代替

three.js 带有来自 jpg 图像的纹理贴图的平面几何正在变黑

three.js planegeometry with texture map from jpg image is coming up black

jpeg

textures

plane

three.js