Three.js中THREE.WEBGLRenderer is not a constructor错误求助

你的代码存在几个关键问题，导致无法正常渲染出红色立方体：

• 选择Canvas元素时，.cube后面多了空格，可能导致无法正确获取DOM元素，应去掉空格
• 相机默认位置与立方体重合（都是(0,0,0)），无法看到物体，需要调整相机位置
• 渲染器未设置画布尺寸，无法正常渲染
• 缺少最终的渲染调用，没有将场景和相机内容绘制到画布上

修复后的完整代码：

// 正确选择canvas元素，去掉类名后的空格
const canvas = document.querySelector('.cube')
// Scene
const scene = new THREE.Scene()

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

const size = {
    width: 800,
    height: 600
}

// Camera - 调整相机位置，远离立方体
const camera = new THREE.PerspectiveCamera(75, size.width / size.height)
camera.position.z = 5 // 把相机往后移5个单位
scene.add(camera)

// Renderer - 设置尺寸并执行渲染
const renderer = new THREE.WebGLRenderer({
    canvas
})
renderer.setSize(size.width, size.height) // 设置渲染器尺寸
renderer.render(scene, camera) // 渲染场景和相机

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