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

【问题标题】：Use multiple render in single scene using threejs使用threejs在单个场景中使用多个渲染
【发布时间】：2015-09-27 10:03:48
【问题描述】：

我想同时使用渲染器（CanvasRenderer 和 WebGlRenderer）在常见场景中渲染形状。有什么方法可以使用吗？

【问题讨论】：

为什么？您要解决的问题是什么？
@NikolaDimitroff 我只有一个理由同时使用这两种渲染。原因是 CanvasRender 支持 LineBasicMaterial 的 lineWidth 属性，但 WebGLRender 不支持它（在 windows 中用于 ANGLE 问题）。

标签： three.js

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

【讨论】：

这只是检查 webgl 是否可用，但我的要求是在公共场景中同时使用这两种渲染。
啊！好的。您尝试创建两个函数“render”：一个用于画布，另一个用于 WebGL，您想要调用它们中的每一个，您在“surrender”处进行调用。或者尝试创建两个“div”，一个带有“render”画布，另一个带有 WebGL。但我不确定它是否会起作用。只有建议。 * __ *
感谢您的建议。我只是想让 CanvasRender 使用 EdgesHelper 创建形状的轮廓，并使用 WebGLRender 绘制完整或完整的形状。问题是一切都发生在同一个场景而不是不同的场景中。

【解决方案2】：

我不相信有人真的想这样做......但要回答所提出的问题：

使用CanvasRenderer 以所需宽度呈现线条
从该画布创建一个THREE.Texture
将该纹理应用于您的WebGLRenderer 中的屏幕大小的四边形
添加场景的其余部分
编写自定义片段着色器以根据需要将画布纹理与场景的其余部分结合起来

【讨论】：