how do I add a texture to a triangle in three.js?
- by Kae Verens
I've created a scene which has many cubes, spheres, etc, in it, and have been able to apply textures to those primitives, but when I want to add a texture to a simple triangle, I'm totally lost.
Here's the closest I've come to getting it right:
var texture=THREE.ImageUtils.loadTexture('/f/3d-images/texture-steel.jpg');
var materialDecalRoof=new THREE.MeshBasicMaterial( {
'map': texture,
'wireframe': false,
'overdraw': true
} );
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(tentX/2+1, tentY, tentZ/2+1));
geometry.vertices.push(new THREE.Vector3(0, tentT, 0));
geometry.vertices.push(new THREE.Vector3(0, tentT, 0));
geometry.vertices.push(new THREE.Vector3(-tentX/2-1, tentY, tentZ/2+1));
geometry.faces.push(new THREE.Face4(0, 1, 2, 3));
geometry.faceVertexUvs[0].push([
new THREE.UV(0, 0),
new THREE.UV(0, 0),
new THREE.UV(0, 0),
new THREE.UV(0, 0)
]);
geometry.computeFaceNormals();
geometry.computeCentroids();
geometry.computeVertexNormals();
var mesh= new THREE.Mesh( geometry, materialDecalRoof);
scene.add(mesh);
This does not work. All i get is a flickering triangle (when the scene is moved) where an image should be.
To test this, go to https://www.poptents.eu/3dFrame.php, upload an image in the Roof section, and drag the view to see the roof flicker.
Does anyone know what I'm doing wrong here?
