使用threejs在单个场景中使用多个渲染

Question

我想使用render（CanvasRenderer和WebGlRenderer）来渲染公共场景中的形状。有没有办法使用它？

Answer 1

这会有帮助吗？

function webglAvailable() {
    try {
        var canvas = document.createElement( 'canvas' );
        return !!( window.WebGLRenderingContext && (
            canvas.getContext( 'webgl' ) ||
            canvas.getContext( 'experimental-webgl' ) )
        );
    } catch ( e ) {
        return false;
    }
}

if ( webglAvailable() ) {
    renderer = new THREE.WebGLRenderer();
} else {
    renderer = new THREE.CanvasRenderer();
}

Reference

Answer 2

我不相信任何人真的想要这样做......但是要回答问题：

1. 使用CanvasRenderer以所需宽度渲染线条
2. 从该画布
创建THREE.Texture
3. 将该纹理应用于WebGLRenderer
中的屏幕大小四边形
4. 添加场景的其余部分
5. 编写自定义片段着色器以根据需要将画布纹理与场景的其余部分组合