从 CanvasRenderer 转换为 WebGLRenderer答案

【问题标题】：Converting from CanvasRenderer to WebGLRenderer从 CanvasRenderer 转换为 WebGLRenderer
【发布时间】：2017-03-23 17:06:50
【问题描述】：

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

下面是两个场景的对比：

画布渲染器：

大脑有一定的透明度，有一个绿色的球体代表感兴趣的区域（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 类似的结果？

非常感谢

【问题讨论】：

标签： three.js

【解决方案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
})

【讨论】：