将图像纹理添加到three.js中的行

Question

我想在下面添加图像纹理，但只能获得黑线。  来自how-to-apply-a-texture-to-a-custom-geometry-in-three-js，我需要设置UV或写自己的阴影。  但我对three.js和webGL很新，不知道怎么做。  欢迎任何帮助。感谢。

loader.load('images/direction.png', function ( texture ) {
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set( 40, 40 );
    var material = new THREE.MeshBasicMaterial({map: texture});
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(-10, 10, 0));
    geometry.vertices.push(new THREE.Vector3(-10, 20, 0));
    line = new THREE.Line(geometry, material);
    line.material.linewidth = 5;

    scene.add(line);
    renderer.render( scene, camera );
}