Прозрачность/несогласие Three.js

Я новичок в trjs, и я пытаюсь создать простую 3d-модель. Тем не менее, у меня есть проблема с прозрачностью/диспропорцией, так как я начал играть с непрозрачностью.

важная часть моего кода, здесь:

    var cylJaun = new THREE.MeshNormalMaterial({color: 0xFFFF00, opacity: 1});
    var cylBleu = new THREE.MeshNormalMaterial({color: 0x0000FF, opacity: 0.5 });

    var cylJaun1 = new THREE.Mesh(new THREE.CylinderGeometry(50,50,50,100,1,false),cylJaun);
    var cylJaun2 = new THREE.Mesh(new THREE.CylinderGeometry(50,50,50,100,1,false),cylJaun);
    var cylJaun3 = new THREE.Mesh(new THREE.CylinderGeometry(50,50,50,100,1,false),cylJaun);

    var cylBleu1 = new THREE.Mesh(new THREE.CylinderGeometry(70,70,200,100,1,false),cylBleu);

    cylJaun1.position.y -= 60; 
    cylJaun3.position.y += 60; 

    group.add(cylBleu1);

    group.add(cylJaun1);
    group.add(cylJaun2);
    group.add(cylJaun3);

    scene.add(group);

Как вы можете видеть, я пытаюсь поместить 3 цилиндра в четвертый. Проблема в том, что некоторые из этих трех цилиндров исчезают, когда мой объект вращается в определенном диапазоне.

Ответ 1

Вам нужно установить transparent: true в материале для большего цилиндра.

var cylBleu = new THREE.MeshNormalMaterial( { transparent: true, opacity: 0.5 } );

Если вы новичок, вы прыгаете в глубоком конце, экспериментируя с прозрачностью.

Прозрачность может быть сложной с помощью WebGL. Если вы планируете продолжать этот путь, Google это как сумасшедший и узнать все, что вы можете о проблемах, и о том, как они обрабатываются в three.js.

three.js r.53