三.js 平面几何与 jpg 图像的纹理贴图显示为黑色

Question

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

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

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

这些文件由 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);
}

Answer 1

THREE.ImageUtils已被弃用。（来源）
使用THREE.TextureLoader().load('field.png')代替