applying texture to custom plane geometry in Threejs

Question

I am trying to apply an image a texture to a plane I create, below is the mthod that I am using. Any pointers on the mistake?

function drawPlane(plane){
    geometry = new THREE.Geometry();
    geometry.vertices.push( new THREE.Vector3( plane[0][0], plane[0][1], plane[0][2]) );
    geometry.vertices.push( new THREE.Vector3( plane[1][0], plane[1][1], plane[1][2]));
    geometry.vertices.push( new THREE.Vector3( plane[2][0], plane[2][1], plane[2][2]) );
    geometry.vertices.push( new THREE.Vector3( plane[3][0], plane[3][1], plane[3][2]) );

    geometry.faces.push( new THREE.Face3( 0, 1, 2 ) ); // counter-clockwise winding order
    geometry.faces.push( new THREE.Face3( 0, 2, 3 ) );

    geometry.computeFaceNormals();
    geometry.computeVertexNormals();

    //var material = new THREE.MeshBasicMaterial({color: 0xffffff});
    var material  = new THREE.MeshPhongMaterial();
    material.side = THREE.DoubleSide;
    material.map = texture; // this texture not applied 
    mesh = new THREE.Mesh( geometry, material );
    scene.add(mesh);
}

The texture object is not null and seems to load properly but doesnt get applied on the created plane.

Possibly, because your geometry has the empty `.faceVertexUvs` array. Create `THREE.PlaneGeometry()` and check this parameter of it, what it contains. Read about that parameter [here](https://threejs.org/docs/index.html#api/core/Geometry) and read [this SO thread](https://stackoverflow.com/q/20774648/4045502) — prisoner849, Oct 20 '17 at 15:01
how can I use PlaneGeometry with the co ordinates I specify ? — Pavan K, Oct 20 '17 at 15:12
I don't offer to use `THREE.PlaneGeometry()`. Just look at its `.faceVertexUvs` and compare it to the same parameter of your custom `THREE.Geometry()`. — prisoner849, Oct 20 '17 at 15:17
Just noticed, that you're using `THREE.MeshPhongMaterial()`. Do you have any lights in your scene? If you don't, then you'll see nothing (if the scene background is black) or a black plane (if the scene background is not black). — prisoner849, Oct 20 '17 at 15:49
Yup iadded ambient lights and also tested with basic material as well. The texture is basically a uniform color — Pavan K, Oct 20 '17 at 15:53
https://stackoverflow.com/questions/34932860/how-to-apply-a-texture-to-a-custom-geometry-in-three-js the facevertexUVs might be the issue you mentioned earlier. — Pavan K, Oct 20 '17 at 15:55

score 1 · Accepted Answer · answered Oct 20 '17 at 17:08

1

I solved this by using the UV's generated from PlaneGeometry like so,

geometry.faces.push( new THREE.Face3( 0, 1, 3 ) ); 
geometry.faces.push( new THREE.Face3( 1, 2, 3 ) );

var planeMesh = new THREE.Mesh(
new THREE.PlaneGeometry( 1000, 1000 ),
new THREE.MeshBasicMaterial() );
geometry.faceVertexUvs = planeMesh.geometry.faceVertexUvs

answered Oct 20 '17 at 17:08

Pavan K

4,085
8
41
72

It would be enough to create an instance of `THREE.PlaneGeometry()` and assign its `.faceVertexUvs` to your geometry. – prisoner849 Oct 22 '17 at 15:02

applying texture to custom plane geometry in Threejs

1 Answers1