Three.js 3.jsα撕裂

我目前正在玩ThreeJs（画布模式），我有一个alpha问题

我试图得到一个围绕Y逆时针旋转的实心球体，一个稍大的半透明球体围绕Y顺时针旋转。当它们静止时，我移动相机，一切看起来都很好，但只要我添加旋转，半透明球体就会“撕裂”或与较小的实心球体剪辑

我已经查看了StackOverflow的解决方案，并确保所有内容都具有y>0，renderer.SortObject为false，transparents设置为true，并使用depthWrite/depthTest进行了一次尝试，我似乎无法更改结果

如果我将内部球体缩小很多，似乎可以解决问题，但对于手头的任务，我需要使两个球体的大小接近相同

我还玩过近平面和远平面剪辑，因为我认为这可能与z深度分辨率有关，但这并没有什么区别

这里有一个问题，任何帮助都将不胜感激

enter code here
var container;
var camera;
var scene;
var renderer;
var objects = [];

init();
animate();

function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    var info = document.createElement('div');
    info.style.position = 'absolute';
    info.style.top = '10px';
    info.style.width = '100%';
    info.style.textAlign = 'center';
    container.appendChild(info);

    var width = window.innerWidth
    var height = window.innerHeight

    camera = new THREE.PerspectiveCamera(70, width / height , 1, 1000);
    camera.position.set(0, 10, 400);

    scene = new THREE.Scene();

    // ---------------------------------------------------------------
    // object 1
    var geometryOne = new THREE.SphereGeometry(190, 10, 10);
    var materialOne = new THREE.MeshBasicMaterial({
        color: 0x0000ff,
        opacity: 1.0,
        transparent: true
    });

    var objectOne = new THREE.Mesh(geometryOne, materialOne);

    objectOne.position.x = 0.0;
    objectOne.position.y = 10.0;
    objectOne.position.z = 0.0;

    objectOne.scale.x = 1.0;
    objectOne.scale.y = 1.0;
    objectOne.scale.z = 1.0;

    objectOne.rotation.x = 0.0;
    objectOne.rotation.y = 0.0;
    objectOne.rotation.z = 0.0;

    scene.add(objectOne);
    objects.push(objectOne);

    // ---------------------------------------------------------------
    // object 2
    var geometryTwo = new THREE.SphereGeometry(200, 10, 10);
    var materialTwo = new THREE.MeshBasicMaterial({
        color: 0xffff00,
        opacity: 0.5,
        transparent: true,
        depthWrite: false,
        depthTest: false
    });

    var objectTwo = new THREE.Mesh(geometryTwo, materialTwo);

    objectTwo.position.x = 0.0;
    objectTwo.position.y = 10.0;
    objectTwo.position.z = 10.0;

    objectTwo.scale.x = 1.0;
    objectTwo.scale.y = 1.0;
    objectTwo.scale.z = 1.0;

    objectTwo.rotation.x = 0.0;
    objectTwo.rotation.y = 0.0;
    objectTwo.rotation.z = 0.0;

    scene.add(objectTwo);
    objects.push(objectTwo);

    //------------------------------------------------------------------
    //renderer
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.sortObjects = false;

    container.appendChild(renderer.domElement);

    //------------------------------------------------------------------
    //event listener(s)
    window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    objects[0].rotation.y += 0.001;
    objects[1].rotation.y -= 0.001;
    renderer.render(scene, camera);
}

---

使用

CanvasRenderer

，您可以通过增加几何体的细分（面数）来减少瑕疵：

var geometryOne = new THREE.SphereGeometry( 200, 24, 16 );

更新小提琴：

---

three.js r.59

使用

CanvasRenderer

，您可以通过增加几何体的细分（面数）来减少瑕疵：

var geometryOne = new THREE.SphereGeometry( 200, 24, 16 );

更新小提琴：

---

three.js r.59

好的，非常好，谢谢。我想我可能错过了一个材料设置或什么，但这是一个完美的修复谢谢。好的，非常好，谢谢。我想我可能已经错过了一个材料设置或东西，但这是一个完美的修复谢谢。