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

Question

我试图了解如何使用THREE.DecalGeometry将贴花添加到网格中

我正在为每个面上的顶点添加贴花 - face.a,我尝试使用face normal和任意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对于您的用例，使用 a 的扇区SphereGeometry就足够了，并且计算成本较低，而不是使用。

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

三.js r.143