How to set the right direction for a decal using THREE.DecalGeometry

Question

I am trying to figure out how to add decals to the grid using THREE.DecalGeometry

I add labels to the top on each face - face.a , I tried to use the normal face and arbitrary Vector3 to determine the direction for the decal.

I cannot understand why all decals are not created correctly. Where am I mistaken in this direction? Is 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); } 

This is a hotspot 64px x 64px

Here's how they appear ...

Why are some transcripts stretched?

I have JSFIDDLE installed

EDIT:

Using the SphereBufferGeometry proposed by WestLangley, I am now glad that this solution will work for me.

Answer 1

Instead of using THREE.DecalGeometry , you will use a sector with SphereBufferGeometry , which is computationally less expensive.

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

three.js r.73