1

我在 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 );

}
4

1 回答 1

2

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

在我看来，这张照片就像是 Z 战的经典案例。与表面之间的 Z 距离相比，您的近/远平面相距甚远，以至于它们的 Z 值发生碰撞。

快速回答，将投影线更改为这样的东西......

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

如果你真的需要在近/远平面上有如此大的差异，它会变得有点复杂。

一个快速的谷歌出现了这些：

于 2013-10-31T14:44:33.423 回答