2013-07-22 4 views
0

두 개의면이 서로 겹치면서 간격을두고 투명도가 활성화되어 있습니다. 최상위 평면의 투명도가 예상대로 작동하지 않습니다. 마우스 (트랙볼)를 움직이면 상단 평면을 통해 가장 낮은 평면을 볼 수없는 경우가 있습니다.투명도 여러면

문제는 여기를 참조하십시오 : 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(); 

답변