[英]Why does my figure not render when I change the name of variable in three.js?
The following code works fine and is taken from https://threejsfundamentals.org/threejs/lessons/threejs-prerequisites.html .以下代码工作正常,取自https://threejsfundamentals.org/threejs/lessons/threejs-prerequisites.html 。 But a peculiar thing happens when I change the value of the variable canvas to something else like canvas2.但是当我将变量 canvas 的值更改为类似 canvas2 的其他值时,会发生一件奇怪的事情。 Why is that?这是为什么?
<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>
For instance, if I change, the lines involving canvas as the following, the code doesn't work例如,如果我更改,涉及 canvas 的行如下,代码不起作用
const somethingElse = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({somethingElse});
So apparently, {something} is a shortcut for {something:something}, which I had missed, so there you have it.显然,{something} 是 {something:something} 的快捷方式,我错过了,所以你有它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.