从CanvasRenderer转换为WebGLRenderer

Question

我在我的场景中使用CanvasRenderer来渲染带有神经元的大脑。 问题在于，当我绘制神经元（每个神经元由许多行组成）时，场景非常慢，因为我渲染了很多神经元。所以我切换到了WebGLRenderer，它更加快速和平滑，但场景看起来完全不同！不再使用不透明度使神经元隐藏在大脑内

这是两个场景之间的比较：

CanvasRenderer：

大脑有一定的透明度，有一个绿色球体代表一个感兴趣的区域（ROI）也具有透明度。

WebGLRenderer：

透明度已经完全消失了！

我使用以下材料制作大脑模型和ROI模型：

var brain_material = new THREE.MeshPhongMaterial({
    wireframe: false,
    color: 0xaaaaaa,
    specular: 0xcccccc,
    opacity: 0.4
});

var roi_material = new THREE.MeshBasicMaterial({
            color: selected_roi_color,
            opacity: 0.2,
            visible: true
})

这是我的渲染器：

        renderer = new THREE.WebGLRenderer({alpha:true});            
        renderer.setClearColor(renderer_clear_color);
        renderer.setPixelRatio(viewport_width / viewport_height);
        renderer.setSize(viewport_width, viewport_height);
        renderer.sortObjects = false;
        container.appendChild(renderer.domElement);

如何使用WebGLRenderer向CanvasRenderer获取类似的结果？

非常感谢

Answer 1

如果您使用opacity，则必须将其与transparent：

一起使用

var brain_material = new THREE.MeshPhongMaterial({
    wireframe: false,
    color: 0xaaaaaa,
    specular: 0xcccccc,
    transparent: true, // here
    opacity: 0.4
});

var roi_material = new THREE.MeshBasicMaterial({
    color: selected_roi_color,
    transparent: true, // here
    opacity: 0.2,
    visible: true
})