ThreeJS-按不同顺序添加对象会影响alpha/显示

ThreeJS - adding objects in different order affects alpha / display

本文关键字：影响 alpha 显示 对象 添加 顺序 ThreeJS-      更新时间：2023-09-26

我的程序使用自定义属性创建动态数量的点云对象，其中包括每个粒子的alpha值。然而，当对象相互嵌套（比如球体）时，即使粒子的alpha设置正确，较小的（内部）对象也会被较大的对象遮挡，这一点也很好。当我颠倒将点云对象添加到场景的顺序时，从较大的对象开始，向下到较小的对象，我可以通过较大的对象看到较小的对象。我的问题是，是否有一种方法可以告诉渲染器更新或重新计算alpha值，或者重新渲染较小的内部对象，使其显示出来？

我遇到了和你一样的问题。我修复了它，为每个网格计算和设置渲染深度。为此，您需要相机位置和网格中心。

您可能已经为每个对象创建了网格。如果将所有这些网格保存到阵列中，则更容易计算和设置这些对象的渲染深度。

下面是我的一个例子。

updateRenderDepthOnRooms(cameraPosition: THREE.Vector3): void {
    var rooms: Room[] = this.getAllRooms();
    rooms.forEach((room) => {
        var roomCenter = getCenter(room.mesh.geometry);  
        var renderDepth = 0 - roomCenter.distanceToSquared(cameraPosition);
        room.mesh.renderDepth = renderDepth;            
    });
}
function getCenter(geometry: THREE.Geometry): THREE.Vector3 {
    geometry.computeBoundingBox();
    var bb = geometry.boundingBox;
    var offset = new THREE.Vector3();
    offset.addVectors(bb.min, bb.max);
    offset.multiplyScalar(0.5);
    return offset;
}

因此，要获得对象的中心，可以从网格中询问几何体，并使用我的示例中的getCenter（..）函数。然后使用ThreeJs函数distance ToSquared（..）计算渲染深度，然后将此渲染深度设置为网格。

就是这样。希望这对你有帮助。

相关文章：