以下代码工作正常，摘自https://threejsfundamentals.org/threejs/lessons/threejs-prerequisites.html。但是，当我将变量canvas的值更改为canvas2之类的东西时，会发生一种奇怪的事情。为什么会这样？
<html>
<script type = "module">
import * as THREE from "../three.js/build/three.module.js"
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;
const scene = new THREE.Scene();
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
const material = new THREE.MeshBasicMaterial({color: 0x44aa88});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
renderer.render(scene, camera);
}
main();
</script>
<body>
<canvas id="c" width="1200" height="600" >
</canvas>
</body>
<script>
</script>
</html>
例如，如果我更改了涉及画布的行，如下所示，则代码不起作用
const somethingElse = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({somethingElse});
因此，显然，{something}是{something：something}的快捷方式，我已经错过了，所以就在那里。