I've been able to add textures to cubes, spheres, and other primitives in a scene I created. However, when it comes to adding a texture to a simple triangle, I'm encountering difficulties.
Below is my attempt at achieving this:
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);
Despite my efforts, the above code does not work as expected. Instead of displaying an image on the triangle, it flickers when the scene is moved.
To see this issue in action, visit , upload an image in the Roof section, and drag the view around to observe the flickering roof.
If anyone can provide insight into what I may be doing wrong here, I would greatly appreciate it.