How to set correct direction for a decal using THREE.DecalGeometry

Question

I am trying to understand how to add decals to a mesh using THREE.DecalGeometry

I am adding decals to the vertex on each face - face.a, I've tried using the face normal and arbitrary Vector3 to define the direction for the decal.

I cannot understand why all the decals are not being created correctly. Where am I go wrong with the direction? Is the face normal not correct?

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);
}

This is the hotspot 64px x 64px

This is how they are getting mapped...

Why are some decals stretched?

I have setup a JSFIDDLE

EDIT:

Using SphereBufferGeometry suggested by WestLangley, I am now happy that this solution will work for me.

Answer 1

Rather than using THREE.DecalGeometry, for your use case a sector of a SphereGeometry will be sufficient, and computationally less-expensive.

var geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength );

three.js r.143