多個平面的透明度

Question

兩個平面堆疊在一起，彼此之間有一定的距離，兩者都啓用透明度。頂級平原的透明度不像預期的那樣。當移動鼠標（軌跡球）時，有時候你看不到通過上部平面的最低平面。

請參閱這裏的問題：EXAMPLE CODE

代碼：

var scene = new THREE.Scene(); 

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 
    camera.position.x = 0; 
    camera.position.y = 0; 
    camera.position.z = 500; 
    var renderer = new THREE.WebGLRenderer({ 
     antialias: true 
    }); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    //renderer.sortObjects = false; 
    document.body.appendChild(renderer.domElement); 

    var light = new THREE.AmbientLight(0xFFFFFF); 
    scene.add(light); 

    var material = new THREE.MeshBasicMaterial({ 
     transparent: true, 
     side: THREE.DoubleSide, 
     fog: false, 
     color: 0xFF0000, 
     opacity: 1.0 
    }); 

    var cubeGeometry = new THREE.PlaneGeometry(100, 300, 1, 1); 
    var cubeMesh = new THREE.Mesh(cubeGeometry, material); 
    scene.add(cubeMesh); 


    var material = new THREE.MeshBasicMaterial({ 
     transparent: true, 
     side: THREE.DoubleSide, 
     fog: false, 
     color: 0x00FF00, 
     opacity: 0.3 
    }); 

    var cubeGeometry = new THREE.PlaneGeometry(50, 50, 1, 1); 
    var cubeMesh = new THREE.Mesh(cubeGeometry, material); 
    cubeMesh.position.set(0, 100, 40); 
    scene.add(cubeMesh); 

    var controls = new THREE.TrackballControls(camera, renderer.domElement); 
    controls.rotateSpeed = 1.0; 
    controls.zoomSpeed = 3.0; 
    controls.panSpeed = 3.0; 
    controls.noZoom = false; 
    controls.noPan = false; 
    controls.noRotate = false; 
    controls.staticMoving = false; 
    controls.dynamicDampingFactor = 0.3; 
    controls.keys = [65, 83, 68]; // [rotateKey, zoomKey, panKey] 

    function render() { 
     controls.update(); 

     camera.lookAt(scene.position); 
     renderer.render(scene, camera); 
     requestAnimationFrame(render); 
    } 
    render(); 

Answer 1

這種情況是容易解決的just removing the transparent: true from the red material（這不應該是透明的）。