本文详解 three.js 初学者常见的空白页面问题，重点修复拼写错误、缺失相机与渲染调用等关键遗漏，配合 vite + javascript 环境提供可立即运行的最小可行示例。
本文详解 three.js 初学者常见的空白页面问题，重点修复拼写错误、缺失相机与渲染调用等关键遗漏，配合 vite + javascript 环境提供可立即运行的最小可行示例。
Three.js 场景显示为空白（尤其是纯白色而非预期的黑色）是新手高频踩坑点，根本原因往往不是环境配置失败，而是核心初始化逻辑缺失或存在低级错误。你当前的代码已成功加载 three 模块（node_modules 和 package.json 配置均正确），但存在两个致命问题：
第一，拼写错误：
renderer.setSize(widnow.innerWidth, window.innerHeight); // ❌ "widnow" 是错别字
应修正为：
renderer.setSize(window.innerWidth, window.innerHeight); // ✅
第二，缺少必要组件与主动渲染：
Three.js 渲染器（WebGLRenderer）本身不自动绘制场景——它需要明确的场景（Scene）、相机（Camera） 和一次或多次 render() 调用。你创建了 scene，但未创建相机，也未执行 renderer.render(scene, camera)，导致 WebGL 上下文虽已挂载到页面，却始终未执行任何绘制操作，浏览器默认显示 的白色背景。
以下是修复后的完整 main.js（可直接替换原文件）：
import { Scene, PerspectiveCamera, WebGLRenderer } from 'three';
import './style.css';
// 1. 创建场景
const scene = new Scene();
// 2. 创建相机（必须！此处使用透视相机）
const camera = new PerspectiveCamera(
75, // 视野角度（FOV）
window.innerWidth / window.innerHeight, // 宽高比
0.1, // 近裁剪面
1000 // 远裁剪面
);
camera.position.z = 5; // 将相机沿 Z 轴后移，以便看到场景内容
// 3. 创建渲染器
const renderer = new WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
// 4. 关键：执行首次渲染
renderer.render(scene, camera);✅ 验证要点：
- 浏览器控制台无
ReferenceError或TypeError； - 元素检查器中可见
<canvas></canvas>已插入； - 页面背景变为黑色（Three.js 默认清屏色为黑色），表明 WebGL 渲染器已成功工作。
⚠️ 注意事项：
- 类型提示警告（
Could not find a declaration file...）是 TypeScript 类型定义缺失提示，不影响 JavaScript 运行。你已安装@types/three，若仍报错，可尝试重启 VS Code 或执行npm run build验证是否影响实际执行； - 若后续需动画，需用
requestAnimationFrame循环调用renderer.render()； -
window.innerWidth/innerHeight在响应式场景中建议监听resize事件并同步更新渲染器尺寸。
至此，一个最简但功能完备的 Three.js 初始化流程已完成。空白页面问题根源在于“有画布、无画面”，补全相机与渲染调用，即可迈出 3D 可视化的第一步。
