Question

我在CanvasRenderer上渲染了一些CubeGeometry对象。由于深度排序，我得到了一些裁剪问题，如下图所示。

现在我已经看到这里的回复，这是由于CanvasRenderer的限制，我尝试应用一些东西来获得更好的结果，但仍然存在剪切问题。我已经将透支设置为1，并且我尽可能多地增加了细分，而不会过多地影响性能。

图像在WebGLRenderer中看起来是正确的，但它还没有被广泛支持，所以在我放弃CanvasRenderer之前我想用尽所有选项。任何人都有其他想法尝试？

参考代码：

function SolidWood( length, width, thickness )
{
    this.ID = -1;
    this.name = "Unknown";
    this.dimensions = {};
    this.dimensions.length = length;
    this.dimensions.width = width;
    this.dimensions.thickness = thickness;
    this.properties = {};
    this.properties.color = 0x00ff00;
    this.properties.wireframe = false;
    this.properties.shading = THREE.SmoothShading;
    this.properties.overdraw = 1.0;

    this.geometry = null;
    this.material = null;
    this.mesh = null;
}
SolidWood.prototype.BuildGeometry = function(){
    var segs = (Detector.webgl ? 1 : 8);
    this.geometry = new THREE.CubeGeometry(this.dimensions.width, this.dimensions.length, this.dimensions.thickness
        , segs, segs, segs);
};
SolidWood.prototype.BuildMaterial = function(){
    this.properties.ambient = this.properties.color;
    this.material = new THREE.MeshLambertMaterial( this.properties );
};
SolidWood.prototype.BuildMesh = function(){
    this.mesh = new THREE.Mesh(this.geometry, this.material)
};
SolidWood.prototype.BuildAll = function(){
    this.BuildGeometry();
    this.BuildMaterial();
    this.BuildMesh();
};

var camera, scene, renderer, controls, light;
var panel = {};
var HEIGHT, WIDTH;
var $container = $('#content-gallery-content');
var $speed = $('#speed');

init();
animate();

function init() {

    WIDTH = 400;
    HEIGHT = 300;

    camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, .001, 1000 );
    camera.position.z = 30;
    camera.position.y = 5;
    camera.lookAt(new THREE.Vector3(0,0,0));

    scene = new THREE.Scene();

    light = new THREE.PointLight(0xffffff, 0.75, 0.0);
    light.position.set(0, -30, 0);
    scene.add(light);
    scene.add(new THREE.AmbientLight(0xb0b0b0));

    //build our panel
    panel.crossmembersCount = 2;
    panel.membersPerFoot = 4;
    panel.memberWidth = 2.5;
    panel.memberWidthHalf = panel.memberWidth/2;
    panel.degrees90 = ((90*Math.PI)/180);
    panel.gapWidth = (12-(panel.memberWidth * panel.membersPerFoot)) / panel.membersPerFoot;
    panel.members = {};
    panel.crossmembers = {};

    for(i=0; i<panel.crossmembersCount; ++i)
    {
        panel.crossmembers[i] = new SolidWood(1.25, 11.875, 0.5);
        panel.crossmembers[i].properties.color = 0x000000;
        panel.crossmembers[i].BuildAll();

        panel.crossmembers[i].mesh.rotation.x = panel.degrees90;
        panel.crossmembers[i].mesh.position.z = ((i*12)+5.5)-11.5;
        panel.crossmembers[i].mesh.position.x = 0.0625;
        panel.crossmembers[i].mesh.position.y = 0.25;

        scene.add( panel.crossmembers[i].mesh );
    }
    for(i=0; i< panel.membersPerFoot; ++i)
    {
        panel.members[i] = new SolidWood(23.0, panel.memberWidth, 0.6875);
        panel.members[i].properties.color = 0xccaa00;
        panel.members[i].BuildAll();

        panel.members[i].mesh.rotation.x = panel.degrees90;
        panel.members[i].mesh.position.z = 0;
        panel.members[i].mesh.position.x = panel.memberWidthHalf-6.125+((panel.memberWidth+panel.gapWidth)*i);
        panel.members[i].mesh.position.y = (0.6875/2)*-1;

        scene.add( panel.members[i].mesh );
    }


    renderer = (Detector.webgl ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer());
    renderer.setSize( WIDTH, HEIGHT );
    renderer.setClearColor(0xD0D0D0, 1.0);

    $container.append( renderer.domElement );

    controls = new THREE.OrbitControls(camera, $container.get(0));

}

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame( animate );

    light.position = camera.position;
    //var length = $('#speed').val() * 100;
    renderer.render( scene, camera );

}

Answer 1

深度缓冲区（或Z缓冲区）用于解决隐藏表面问题。如果传入的片段的深度值大于缓冲区中的值，则将其丢弃。如果它的值较小，它将替换当前值并写入片段颜色。

图像在我看来就像Z战斗的经典案例。与Z值碰撞的曲面之间的Z距离相比，您的近/远平面相距很远。

快速回答，将投影线改为这样......

camera = new THREE.PerspectiveCamera(60, WIDTH / HEIGHT, 0.01, 100);

如果你真的需要在近/远平面上有这么大的差异，那就会有点复杂。

快速谷歌出现了这些：

Three.js CanvasRenderer深度排序

1 个答案: