1

I want add image texture to line as below , but only get black line. from how-to-apply-a-texture-to-a-custom-geometry-in-three-js, I need set UV or write my own shade. But I am very new to three.js and webGL, not sure how to do it. any help is welcome. Thanks.

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 );
}
Community
  • 1
  • 1
max
  • 146
  • 1
  • 8
  • A line is not a face, and so there's no area to map a texture to. The decision to use a line/ line material generally means the coder is not concerned with the width of the line, as the width of the line will be consistent at the glass regardless of the camera parameters. If you want to apply a texture you can use a cylinder or box geometries with a basic, lambert or Phong material. There's an excellent answer here for converting a line origin and vector to a cylinder: http://stackoverflow.com/questions/24732916/three-js-rotation-of-a-cylinder-that-represents-a-vector – Radio Jun 16 '16 at 16:38
  • 1
    thx @Radio,you are right. I will try draw 2D polygon as line and apply texture to the polygon. – max Jun 17 '16 at 02:44

0 Answers0