Three.js 无法使用预先创建的 Canvas

Question

我想使用带有 Three.js 的预先创建的 Canvas 。从我读过的教程和其他帖子来看，这应该可行:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext("2d");    // <--- This causes the error below!
const renderer = new THREE.WebGLRenderer( { canvas: canvas } );

但是，在我的浏览器控制台(Safari v14 和 Chrome v86)中，我收到以下错误:

THREE.WebGLRenderer: Error creating WebGL context.

我也尝试过添加

<canvas id='myCanvas'></canvas>

并使用:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");    // <--- This causes the same error!
const renderer = new THREE.WebGLRenderer({
   canvas: canvas,
});

并遇到同样的问题。

我还尝试添加:

window.onload = function() {
  ...
};

确保 DOM 已加载等

如果我删除 getContext("2d") 行，那么它可以工作吗？

我使用的是 Three.js 版本 0.120。

为什么这会导致问题？

Answer 1

Three.js 仅在一处抛出此错误，幸运的是它正在做一些非常简单的事情:从 canvas 获取上下文。它使用 HTMLCanvasElement.getContext 来执行此操作，并且仅在结果为 null 时抛出错误。

HTMLCanvasElement.getContext只允许您请求一种上下文类型。您可以再次请求相同的类型(或兼容的类型，在 webgl 和 webgl2 的情况下)，但它将返回在 Canvas 上创建的原始上下文。在第一个请求建立使用中上下文后，后续对不兼容类型的请求将返回 null。

let ctx_2d_1 = mycanvas.getContext( '2d' )
let ctx_2d_2 = mycanvas.getContext( '2d' )
console.log( ctx_2d_1 === ctx_2d_2 ) // true

let ctx_2d = mycanvas.getContext( '2d' )
let ctx_webgl = mycanvas.getContext( 'webgl' )

console.log( ctx_2d ) // CanvasRenderingContext2D
console.log( ctx_webgl  ) // null

let ctx_webgl = mycanvas.getContext( 'webgl' )
let ctx_2d = mycanvas.getContext( '2d' )

console.log( ctx_webgl  ) // WebGLRenderingContext
console.log( ctx_2d ) // null

由于您在调用 WebGLRenderer 构造函数之前创建 2d 上下文，因此构造函数无法从 Canvas 获取有效的 WebGLRenderingContext。相反，它得到一个null，因此它抛出错误。

如果您想在 3D 之上绘制 2D(反之亦然)，则需要对不同上下文的 Canvas 进行分层，或者使用平面将 2D 信息渲染为 WebGL 中的纹理(三.js)上下文。