const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const controls = new OrbitControls(camera);
camera.position.set(200, 0, 0);
controls.update();
const geometry = new THREE.SphereGeometry(50, 32, 32);
const material = new THREE.MeshBasicMaterial({
color: 0xffff00
});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}<script src="https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.min.js"></script>当我运行我的 javascript 代码时。我收到以下错误“Uncaught ReferenceError：OrbitControls 未定义”。我看过这篇文章，但似乎没有帮助。有任何想法吗？
我的 OrbitControls.js 位于 Three.js 文件下的同一文件中
我正在学习 Flexbox，我的目标是创建一个包含 3 个项目的简单 Flexbox，这些项目将响应不同的设备（智能手机、平板电脑、台式机\xe2\x80\xa6）。\n这些项目应该一个在另一个之上，并且\n（总结一下，一项位于最顶部，一项位于页面底部，其余项占据中间的左侧空间）。
\n桌面和智能手机上的宽度部分似乎有效。但如何填充浏览器的高度以及字体和框如何适应不同设备的不同高度对我来说仍然是一个谜。
\n我的临时解决方案是增加smartphone\xe2\x80\xa6的margin
\n你怎么看？
\n这是我所做的：
\n.container {\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n height: 100%;\n font-size: 3em;\n}\n\n.item {\n border: 5px solid red;\n margin-bottom: 40px;\n}\n@media screen and (max-width: 500px) {\n .element {\n margin-bottom: 70px;\n }\n}\n\n.one {\n flex-basis: 100%;\n display: flex;\n}\n\n.two {\n flex-basis: 80%;\n display: flex;\n}\n\n@media screen and (max-width: 64em) {\n body {\n font-size: 80%;\n }\n}\n\n@media screen and (max-width: 50em) {\n body {\n font-size: 70%;\n }\n}\n\n@media screen and (max-width: 30em) {\n …