在 <canvas> 而不是 <div> 上渲染 three.js 有优缺点吗？

Question

我在 three.js 示例中看到使用：

renderer = new THREE.WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } );

指的是 <canvas></canvas> 元素。

这是对比：

renderer = new THREE.WebGLRenderer();
var container = getelementbyid("container"):
container.appendChild( renderer.domElement );

指的是 <div></div> 元素。

在这两种情况下都使用了 WebGLRenderer，并且 canvas 也可以设置样式，所以它是否完全相同，或者是否有优缺点，例如设备的支持、性能和限制 - 为什么应该选择一个还是另一个？

Answer 1

第一个选项适用于想要明确传递自定义 canvas 元素的用户。如果您不这样做，WebGLRenderer 将在其构造函数中创建一个内部 canvas（请参阅 here）。

在这两种情况下，renderer.domElement 表示绘图表面，只是对 canvas 元素的引用。 container.appendChild( renderer.domElement ); 是将内部 canvas 附加到 DOM 所必需的。但是您不必为此使用容器元素。 document.body.appendChild( renderer.domElement ) 在大多数情况下就足够了。

在 <canvas> 而不是 <div> 上渲染 three.js 有优缺点吗？

Are there pros & cons in rendering three.js on <canvas> instead of <div>?

javascript

renderer

three.js

html5-canvas