javascript - 在 three.js 场景中使用 div 和 canvas 元素有什么区别？

Question

我读到 three.js 需要 HTML5 <canvas>元素。但是，我可以完美地制作一个简单的 <div>工作给它高度和宽度属性，然后添加 WebGLRenderer.domElement因为它是 HTML 层次结构中的子元素。奇怪的是，如果我使用 <canvas>，它就不起作用了。而不是 <div> ，因为场景保持全黑。

使用其中一个有什么区别？每种情况下的方法应该有何不同？

我的理论是<div>如果设置了大小，元素可以像 Canvas 一样工作，并且还授予元素具有的所有优点，但浏览器仍然需要支持 HTML5 <canvas>元素才能正常工作，但我希望有更多知识的人对此进行确认。

Answer 1

有两种方法。您要么将渲染器的 DOM 元素(这是一个 <canvas> 元素)附加到另一个 DOM 元素，这就是您所做的(如果您查看 <div> 内部，您会发现 <canvas> )，或者您将引用放在一个已经存在<canvas>在渲染器的构造函数中:

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

在这两种情况下你都会得到一个 <canvas>运行时 DOM 中的元素。唯一的区别是，第一种方法是从脚本内部将其附加到 DOM，而第二种方法是在 HTML 文档中预定义它。