如何使用THREE.DecalGeometry为贴花设置正确的方向

Question

我试图了解如何使用THREE.DecalGeometry

将贴花添加到网格物体中

我正在为每个脸上的顶点添加贴花 - face.a ，我尝试使用面法线和任意Vector3来定义贴花的方向。

我无法理解为什么没有正确创建所有贴花。我哪里出错了方向？面部正常不正确吗？

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

这是热点64px x 64px

这是他们如何映射......

为什么有些贴花会拉长？

我已设置JSFIDDLE

修改

使用WestLangley建议的SphereBufferGeometry，我现在很高兴这个解决方案对我有用。

Answer 1

不是使用THREE.DecalGeometry，而是使用SphereBufferGeometry的扇区就足够了，而且计算成本更低。

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

three.js r.73