three.js 中使用 jpg 图片作为纹理贴图的 PlaneGeometry 出现黑屏问题

Question

我正在尝试使用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);
}

- Eric Davies

Answer 1

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

- EProg

Answer 2

尝试使用THREE.js的方法，通常效果更好...：

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

- Miguel Xoel Garcia