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

【问题标题】：Are there pros & cons in rendering three.js on <canvas> instead of <div>?在 <canvas> 而不是 <div> 上渲染 three.js 有优缺点吗？
【发布时间】：2018-11-26 14:05:12
【问题描述】：

我在三个.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，并且画布也可以设置样式，所以它是否完全相同，或者有什么优点和缺点，比如设备的支持、性能和限制——为什么要选择一个而不是另一个？

【问题讨论】：

标签： javascript three.js html5-canvas renderer

【解决方案1】：

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

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

【讨论】：

“但你不一定要为此使用容器元素。document.body.appendChild(renderer.domElement) 在大多数情况下就足够了。”谢谢，也很高兴知道这一点。