在three.js场景中使用div元素和canvas元素有什么区别？
在three.js场景中使用div元素和canvas元素有什么区别？
提问于 2018-09-12 06:01:31
我读过three.js需要HTML5 <canvas>元素。但是，我可以完美地完成一个简单的<div>工作，提供它的高度和宽度属性，然后将WebGLRenderer.domElement作为它的子级添加到HTML层次结构中。奇怪的是，如果我使用<canvas>而不是<div>，它就不能工作，因为场景都是黑色的。
使用一种和另一种有什么区别？在每一种情况下，这种方法应该有什么不同？
我的理论是，如果设置了一个大小，<div>元素可以作为画布工作，并且还提供了元素所具有的所有优点，但是浏览器仍然需要支持HTML5 <canvas>元素才能正常工作，但是我希望有更多的知识的人来证实这一点。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-12 09:47:06
有两种方法。要么将呈现器的DOM元素(它是<canvas>元素)追加到另一个DOM元素(如果在<div>内部查找<canvas>)，或者在呈现器的构造函数中添加对已经存在的<canvas>的引用：
renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('canvas') })
在这两种情况下，您将在运行时在DOM中拥有一个<canvas>元素。唯一的区别是，使用第一种方法，您可以从脚本内部将它附加到DOM中，而使用第二种方法，您可以在HTML文档中预定义它。
Stack Overflow用户
发布于 2018-09-12 06:23:22
Three.js使用画布元素自动呈现。如果您能够访问您的开发工具，您将看到它夹在主体标记之间。不需要包含div元素或画布元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52288404
复制相关文章
相似问题
腾讯云开发者
