ThreeJS 无法创建 WebGL 上下文错误

Question

这是我的 HTML 和 JS 代码。我刚开始学习 Three.js，但它已经开始给我错误，我找不到修复它的方法。感谢您的帮助。 这是我得到的错误：

我试图为 Three.js 添加一个场景。我期待 chrome 向我展示一个黑色的空场景。

//scene
const scene = new THREE.Scene()

//Red Cube
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({
  color: 'red'
})
const mesh = new THREE.Mesh(geometry, material)

scene.add(mesh)

//Sizes
const sizes = {
  width: 800,
  height: 600
}

//Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
scene.add(camera)

//Renderer
const canvas = document.querySelector('.webgl')
console.log(canvas)
const renderer = new THREE.WebGLRenderer({
  canvas: canvas
})\

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.149.0/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.149.0/three.min.js"></script>

<canvas class="webgl"></canvas>