three.js组件无法在HTML页面显示 运行报错立方体不渲染求解决

依赖引入校验 #

• 确认Three.js库的引入顺序在你的自定义业务JS代码之前，引入路径不存在404错误。如果是全局script标签引入，打开浏览器控制台输入THREE回车，确认能返回对应的构造函数对象，不存在未定义报错。
• 所有Three.js内置构造函数调用必须加THREE.前缀，示例正确写法：

  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  const renderer = new THREE.WebGLRenderer()
  

  前缀漏写、构造函数大小写拼写错误（比如把Scene写成scene、PerspectiveCamera拼错）都会直接触发未定义报错，导致渲染中断。

Canvas 关联校验 #

• 确认JS中获取的canvas元素和HTML中的canvas元素id/选择器完全匹配，不存在拼写错误。
• 渲染器初始化完成后，需要将渲染器的DOM节点挂载到页面中，示例写法：document.body.appendChild(renderer.domElement)，如果直接使用页面中已有的canvas元素，需要在初始化渲染器时传入配置：const renderer = new THREE.WebGLRenderer({ canvas: 你获取到的canvas元素变量 })

渲染逻辑校验 #

• 必须调整相机位置，默认相机和立方体都处于坐标原点，重合后无法看到渲染内容，需要手动调整相机位置，示例写法：camera.position.z = 5
• 所有场景、模型、相机配置完成后，必须手动调用渲染方法：renderer.render(scene, camera)，缺少这一步不会生成渲染内容。
• 确认立方体网格已经添加到场景中：scene.add(立方体网格变量)，没有添加到场景的模型不会被渲染。

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