Javascript 如何使用THREE.detachGeometry设置贴花的正确方向

我正在尝试了解如何使用添加贴图到网格

我正在将贴花添加到每个面的顶点-面。a，我尝试使用面法线和任意向量3来定义贴花的方向

我无法理解为什么没有正确创建所有贴花。我的方向哪里错了？脸是正常的还是不正常的

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 64px

这就是他们被映射的方式

为什么有些贴花会拉伸

我已经设置了一个

编辑：

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

---

而不是使用

THREE.deapgeometry

，对于您的用例，

SphereBufferGeometry

的扇区就足够了，并且计算成本更低

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

---

three.js r.73

不是答案，而是（1）在控制台中键入

renderer.info

，查看769个几何体，以及每帧769个绘图调用。此外，立方体每边有128个面，而2个面就足够了。（2） 当面法线平行于y轴时，贴花可能无法正确定向。试试球体。（3） 为什么要使用贴花而不是

THREE.Sprite

s或

THREE.Points

？@WestLangley（1）确认了769和769（2）添加了球体示例（3）精灵和点都指向相机，并且不像贴花那样平放在球体上。我可能不得不妥协，用精灵或点来解决这个问题。（1）你的演示带有隐形球体和一个大贴花。-只是想看看你到底在做什么。。。（2） 是的，我不是建议使用贴花，而是建议使用

THREE.PlaneBufferGeometry

@WestLangley您认为可以创建一个平面来获取每个贴花并将其弯曲以适合球体的形状吗？然后我可以将这些网格定位到我需要它们的位置？如果您希望贴花弯曲，请使用

SphereBufferGeometry

的扇形部分：