Javascript TextureLoader在Three.js中不工作。我如何让它工作？

我正在使用Three.js创建一个3D环境。 当我尝试使用颜色时，效果很好

var geometry = new THREE.PlaneBufferGeometry( 4, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0x999999, side: THREE.DoubleSide, wireframe: false});
var plane = new THREE.Mesh( geometry, material);
scene.add( plane );

然而，当我试图加载一个图像作为纹理时，屏幕只是空白的

var geometry = new THREE.PlaneBufferGeometry( 4, 20, 32 );
var material = new THREE.MeshPhongMaterial( {map: new THREE.TextureLoader( ).load('img/4.png'), side: THREE.DoubleSide, wireframe: false});

var plane = new THREE.Mesh( geometry, material);
scene.add( plane );

我的最终目标是使用“从纹理重复”为我的飞机创建棋盘式纹理。（）

请帮我找到TextureLoader的替代品

我也尝试过手动加载，但不起作用

var request = require('request').defaults({ encoding: null });
var url = "img/4.png";

request(url, function(error, response, data) {
  if (!error && response.statusCode == 200) {
    var image = new Canvas.Image();
    image.src = data;

    var texture = new THREE.Texture(image);
    texture.needsUpdate = true;

    var material = new THREE.MeshPhongMaterial({map: texture, overdraw: true});
  } else {
    response = 'error';
  }
});

---

控制台中有任何警告或错误消息吗？@prisoner849没有。我实际上是想从你那里实现。我仍在试图理解如何将它放在平面上而不是盒子上。看看这个和它的JSFIDLE，在那里你可以找到一个方法

.toGrid（）

，用于对

THREE.PlaneBufferGeometry（）

的索引重新排序，以便将它与

THREE.LineSegments（）

一起使用。另外，另外，看看这个。