Three.js中renderer.render无法渲染内容：新手黑屏无报错问题求助

我帮你排查了代码里的几个关键问题，这应该就是你看不到绿色立方体的原因：

1. 相机位置设置晚于渲染调用 #

你现在的代码里，renderer.render(scene,camera) 是在 camera.position.z=5 之前执行的。这意味着渲染的时候相机还在原点(0,0,0)，而你的立方体也在原点，相机和物体位置重叠，自然看不到任何东西。

2. 不必要使用WebGL1Renderer #

你用了 WebGL1Renderer，这个是针对老旧浏览器（仅支持WebGL 1.0）的，现代浏览器都支持WebGL 2.0，推荐使用默认的 WebGLRenderer，它会自动适配环境。

3. 渲染器DOM元素添加的顺序优化 #

虽然不是导致黑屏的直接原因，但先设置渲染器尺寸再把它添加到页面，代码会更规范。

修改后的main.js代码： #

import * as THREE from "https://unpkg.com/three@0.126.1/build/three.module.js"; 

// 创建场景、相机
const scene = new THREE.Scene(); 
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000); 
// 使用WebGLRenderer替代WebGL1Renderer
const renderer = new THREE.WebGLRenderer(); 

// 先设置渲染器尺寸，再添加到页面
renderer.setSize(innerWidth, innerHeight); 
document.body.appendChild(renderer.domElement); 

// 先调整相机位置，再创建物体
camera.position.z = 5; 

// 创建立方体、材质、网格并添加到场景
const boxGeometry = new THREE.BoxGeometry(1,1,1); 
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 注意你写的0x00f00是少了一位，应该是6位十六进制值
const mesh = new THREE.Mesh(boxGeometry, material); 
scene.add(mesh); 

// 最后执行渲染
renderer.render(scene, camera); 

// 可选：添加窗口大小监听，确保窗口缩放时画面自适应
window.addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

额外注意点： #

你写的材质颜色 0x00f00 是不规范的十六进制颜色值（标准应该是6位），虽然Three.js可能会自动补全，但建议写成 0x00ff00 来确保显示正确的绿色。

按照上面的修改，你应该就能看到绿色立方体了！

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