照搬教程的Three JS代码运行仅显示白屏无法正常工作如何排查

云上老周

2026-8-27

Three.js 初始化后白屏、未出现预期黑屏的修复方案

核心问题点

你当前的代码存在两个直接导致白屏的问题：

缺失渲染调用：WebGLRenderer初始化、挂载DOM后，必须主动调用render()方法才会执行画布绘制，未调用时canvas为透明状态，透出页面默认白色背景，自然看不到教程提到的黑屏效果。
容器高度未定义：CSS中给canvas设置height: 100%时，需要父级html、body元素有明确的高度基准，否则canvas实际高度计算为0，无法正常显示。
额外隐患：相机默认位置在场景原点(0,0,0)，后续添加物体到原点时会和相机位置重合，导致物体不可见。

修复方案

调整CSS样式，补全根元素高度规则，消除滚动条影响：

* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
canvas {
    display: block;
    width: 100%;
    height: 100%;
}

修改JS代码，补全相机位置设置和渲染调用：

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 将相机沿Z轴后移，避开场景原点
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 执行渲染，渲染器默认用黑色清空画布，即可得到预期黑屏
renderer.render(scene, camera);