Wie richtige Richtung für ein Abziehbild setzen THREE.DecalGeometry mit

Question

ich zu verstehen versuchen, wie Abziehbilder auf ein Gitter hinzufügen mit THREE.DecalGeometry

I Abziehbilder auf jeder Seite an die Spitze bin Zugabe - face.a, Ich habe versucht, das Gesicht normal und willkürlich Vector3 zu verwenden, um die Richtung für das Abziehbild zu definieren.

Ich kann nicht verstehen, warum alle Aufkleber nicht richtig erstellt werden. Wo gehe ich mit der Richtung falsch? Ist das Gesicht 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); 
} 

Dies ist der Hotspot 64px x 64px

Dies ist, wie sie abgebildet werden immer ...

Warum werden einige Abziehbilder gestreckt?

Ich habe Setup ein JSFIDDLE

EDIT:

Mit SphereBufferGeometry von WestLangley vorgeschlagen, bin ich jetzt froh, dass diese Lösung für mich arbeiten.

Answer 1

Anstatt THREE.DecalGeometry verwenden, für Sie Fall verwenden ein Sektor eines SphereBufferGeometry ausreichend sein wird, und rechnerisch weniger teuer.

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

three.js r.73