我正试图根据我在Youtube上找到的教程设置我的three.js。我使用Visual Studio Code，我准确地复制了脚本，但无论出于何种原因，当我检查实时服务器时，它总是显示一个空白的空白区域，而它应该是黑色的。
我也注意到，当我设置场景、相机和渲染器时，我的THREE.Scene()和THREE.PerspectiveCamera()等从来不是绿色的，而是蓝色的。所有教程都将它们显示为绿色。到目前为止，我已经做了5个教程，到目前为止，所有的问题都是完全相同的。
下面是我使用的一个教程示例:https://www.youtube.com/watch?v=8jP4xpga6yY(跳到2:52，看看我所指的"绿色"是什么)脚本)
我错过了什么吗?我需要下载一个扩展或什么?
任何输入帮助-谢谢!
我的main.js文件
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
这是我的index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Basic 3D World</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
<script src="./mains.js"></script>
</body>
</html>
我逐字复制代码，而不是得到一个黑色的背景，显示我已经准备好渲染我的对象，我得到空白的空白空间时，访问实时服务器。还请注意，当我输入THREE时，脚本不是变为绿色，而是变为蓝色。
这是所有教程显示的
这就是我的代码的样子——注意这三个部分是蓝色的而不是绿色的
我已经测试了你的代码，我结束了一个黑色的背景，所以在这种情况下，我希望你检查以下事情:
- 检查. js文件的名称
- 检查你的路径，确保你使用确切的文件名，当你开始链接你的文件彼此。
- 检查你的地图和文件的结构，确保你把正确的文件放在正确的文件夹。看一下这个问题，了解更多信息。
- 检查控制台日志(F12按钮)是否有错误。
所以在你的情况下，确保main.js是这样写的，而不是像你在代码中写的mains.js。确保main.js和index.html在同一个目录下。