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.js方法通常效果更好......：

  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（＆＃39; field.png＆＃39;）而不是

来自jpg图像的纹理贴图的three.js planegeometry即将出现

2 个答案: