Следующий код работает нормально и взят из 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});