Currently, I'm in the process of learning how to apply decals onto a mesh using the THREE.DecalGeometry.
I've been attempting to attach decals to the vertex on each face - face.a. I experimented with utilizing the face normal and an arbitrary Vector3 to specify the direction for the decal.
However, despite my efforts, I am facing issues where not all decals are being generated accurately. What could be causing this discrepancy? Could it be due to errors in determining the correct direction or perhaps incorrect usage of the face normal?
function addObjects(){
var geometry = new THREE.BoxGeometry(200, 200, 200, 8, 8, 8);
var material = new THREE.MeshLambertMaterial({color: 0xff0000});
cube = new THREE.Mesh(geometry, material);
// addWireframeHelper(cube, 0xffffff, 1);
scene.add(cube);
THREE.ImageUtils.crossOrigin = 'Anonymous';
var texture = THREE.ImageUtils.loadTexture( 'http://i.imgur.com/RNb17q7.png' );
geometry.faces.forEach(function(face){
var index = face.a;
var vertex = geometry.vertices[index];
var direction = new THREE.Vector3(0,1,0);
addDecal(cube, vertex, direction, texture);
})
}
function addDecal(mesh, position, direction, texture){
var size = 16;
var decalGeometry = new THREE.DecalGeometry(
mesh,
position,
direction,
new THREE.Vector3(size,size,size),
new THREE.Vector3(1,1,1)
);
var decalMaterial = new THREE.MeshLambertMaterial( {
map: texture,
transparent: true,
depthTest: true,
depthWrite: false,
polygonOffset: true,
polygonOffsetFactor: -4,
});
var m = new THREE.Mesh( decalGeometry, decalMaterial );
mesh.add(m);
}
The dimensions of the hotspot are 64px x 64px
https://i.sstatic.net/pCrdS.png
Below is how the mappings appear...
https://i.sstatic.net/D5LjD.png
What could be causing certain decals to become stretched?
I have provided a demonstration on JSFIDDLE
EDIT:
Following WestLangley's suggestion to use SphereBufferGeometry, I now believe that this approach will suit my requirements.