来自jpg图像的纹理贴图的three.js平面几何即将出现黑色答案

【问题标题】：three.js planegeometry with texture map from jpg image is coming up black来自jpg图像的纹理贴图的three.js平面几何即将出现黑色
【发布时间】：2015-07-22 06:01:55
【问题描述】：

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

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

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

文件由 http 服务器在本地提供。

我用来构建材质和 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);
}

【问题讨论】：

标签： three.js textures jpeg plane

【解决方案1】：

THREE.ImageUtils 已被弃用。 (source)
改用 THREE.TextureLoader().load('field.png')

【讨论】：

【解决方案2】：

试试这个，自己的三个.js 方法通常效果更好...：

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

【讨论】：