Three.js指定自定义canvas且其位于JS前时出现空白画布问题

• 核心原因是你初始化WebGLRenderer时传入的myCanvas变量没有正确指向你HTML中提前定义的canvas元素
  • 当传入的canvas参数为null/undefined时，Three.js会自动创建一个全新的canvas实例，而非绑定你写在HTML中的那个canvas元素
  • 你注释掉document.body.appendChild(renderer.domElement)时，Three.js自动创建的canvas没有被插入到DOM树中，你在DOM里看到的是你原本写的、没有和渲染器绑定的空白canvas，所以没有内容
  • 你取消注释后，和渲染器绑定的新canvas被插入到body末尾，所以能正常渲染，你原来写在HTML里的canvas实际上一直是未被使用的空白元素

常见触发场景 #

• 你没有显式调用DOM获取方法拿到canvas实例，直接依赖部分浏览器支持的「带id的元素自动挂载到window对象」的非标准特性：如果你的代码运行在模块化环境（ES Module、webpack等）、或者浏览器不支持该特性，myCanvas会是undefined
• 你的JS脚本加了async属性：异步加载的脚本会在下载完成后立即执行，不管HTML是否解析完成，哪怕canvas标签写在script标签前面，也可能出现脚本执行时canvas还未被解析的情况
• 获取canvas的代码执行时机早于DOM解析完成：比如代码写在DOMContentLoaded事件监听之外，且script标签放在head中

修复方案 #

1. 显式获取canvas元素，不要依赖全局挂载特性：

const myCanvas = document.getElementById('你的canvas的id')
// 可以加个判断避免空值
if (!myCanvas) throw new Error('未找到canvas元素')

2. 调整脚本加载方式：要么把script标签放在body末尾，要么去掉async属性，或者把初始化逻辑放在DOMContentLoaded事件回调中执行

内容的提问来源于stack exchange，提问作者Lucas