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

本文介绍了如何使用 THREE.DecalGeometry 为贴花设置正确的方向的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我试图了解如何使用

这就是他们被映射的方式...

为什么有些贴花会被拉长?

我已经设置了一个

解决方案

而不是使用 THREE.DecalGeometry，对于您的用例来说，SphereBufferGeometry 的一个扇区就足够了，并且计算成本更低.

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

three.js r.73

I am trying to understand how to add decals to a mesh using THREE.DecalGeometry

I am adding decals to the vertex on each face - face.a, I've tried using the face normal and arbitrary Vector3 to define the direction for the decal.

I cannot understand why all the decals are not being created correctly. Where am I go wrong with the direction? Is the face normal not correct?

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/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 the hotspot 64px x 64px

This is how they are getting mapped...

Why are some decals stretched?

I have setup a JSFIDDLE

EDIT:

Using SphereBufferGeometry suggested by WestLangley, I am now happy that this solution will work for me.

解决方案

Rather than using THREE.DecalGeometry, for you use case a sector of a SphereBufferGeometry will be sufficient, and computationally less-expensive.

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

three.js r.73

这篇关于如何使用 THREE.DecalGeometry 为贴花设置正确的方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！