Three.js几何体无法在场景中渲染？新手技术求助

1. Three.js库文件未正确引入 #

你的代码里用了<script src="three.min.js"></script>，但如果这个文件不存在于当前项目目录，或者文件名/路径写错了，浏览器加载不到Three.js库，后续所有Three相关的代码都会报错，导致渲染逻辑完全不执行，页面就会显示空白。

解决方法：

• 从Three.js官网下载对应版本的库文件，放到项目根目录下，确保文件名和代码里的引用一致
• 打开浏览器开发者工具（F12）的「控制台」面板，看是否有THREE is not defined这类报错，就能确认是库加载问题。

2. 页面高度样式缺失 #

你的CSS里只设置了body的margin和padding为0，但没有给body设置高度，导致canvas的height:100%无法继承到有效高度。虽然renderer已经设置了尺寸为窗口大小，但CSS的高度问题可能导致canvas被压缩或不显示。

解决方法：
修改body的样式，加上高度设置：

body {
    margin: 0;
    padding: 0;
    height: 100vh; /* 让body占满视口高度 */
    overflow: hidden; /* 避免滚动条 */
}

3. 场景可视性验证 #

虽然你的相机位置z=50，立方体在原点，理论上能看到，但可以临时添加辅助工具确认场景是否正常：
比如在代码里添加坐标轴辅助器：

var axesHelper = new THREE.AxesHelper(20);
scene.add(axesHelper);

如果加载了Three.js后能看到坐标轴，说明场景和相机没问题，那可能是立方体的材质或位置问题（不过MeshBasicMaterial本身不受光照影响，应该能正常显示）。

另外，也可以给立方体添加旋转动画，方便观察是否显示：
在render函数里加两行：

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

内容的提问来源于stack exchange，提问作者codenoob1211