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

Question

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

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

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

文件由 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.ImageUtils 已被弃用。 ( source )
改用 THREE.TextureLoader().load('field.png')