Three.js画布不渲染？函数调用必看
在使用Three.js进行3D开发时，遇到画布空白却无报错的情况，通常是由于初始化场景的函数（如`main()`）定义后未被调用所致。本文将深入剖析这一常见问题，通过一个完整的示例代码，演示如何正确调用初始化函数，并详细解释Three.js的渲染流程，助力开发者避开这一陷阱。文章内容涵盖Canvas元素、渲染器、相机、场景、几何体、材质和网格等关键Three.js组件的讲解，以及窗口尺寸变化处理、动画循环等实用技巧，助您轻松构建稳定且富有表现力的3D应用，确保Three.js场景能够正确显示，提升用户体验和网站SEO表现。
本文旨在解决Three.js项目中画布空白不渲染的常见问题，即使控制台没有报错。核心原因是初始化Three.js场景的函数（如`main`）被定义后却未被显式调用。教程将通过一个完整的示例代码，演示如何正确地调用初始化函数，并解释Three.js渲染流程，帮助开发者避免此常见陷阱，确保场景能够正确显示。
Three.js画布空白：一个常见的初始化陷阱
在使用Three.js进行3D开发时，开发者经常会遇到一个令人困惑的问题：页面上出现一个空白的画布，控制台没有任何错误信息，但3D场景却未能渲染。这种现象往往让初学者感到沮丧，因为代码看起来逻辑清晰，却无法达到预期效果。本文将深入探讨这一常见问题，并提供一个简洁有效的解决方案。
问题的核心在于JavaScript函数的执行机制。在JavaScript中，定义一个函数仅仅是创建了一个可执行的代码块，但这个代码块并不会自动运行。它必须通过显式的函数调用才能被执行。在Three.js的初始化场景中，开发者通常会将所有设置（如创建渲染器、相机、场景、几何体、材质和网格）封装在一个函数中，例如main()。如果忘记在函数定义之后调用这个main()函数，那么所有的初始化代码都不会被执行，从而导致画布保持空白。
核心问题：函数定义与函数调用
让我们通过一个具体的Three.js示例来演示这个问题及其解决方案。假设您编写了以下HTML和JavaScript代码，旨在显示一个简单的立方体：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js 渲染示例</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<script type="module">
// 导入Three.js库
import * as THREE from "https://cdn.skypack.dev/three@0.137.0";
// 如果需要，也可以导入OrbitControls
// import { OrbitControls } from "https://cdn.skypack.dev/three@0.137.0/examples/jsm/controls/OrbitControls.js";
function main() {
const canvas = document.getElementById('c');
// 创建渲染器，并将其绑定到canvas元素
const renderer = new THREE.WebGLRenderer({ canvas });
// 设置相机参数
const fov = 75; // 视角
const aspect = window.innerWidth / window.innerHeight; // 宽高比
const near = 0.1; // 近裁剪面
const far = 5; // 远裁剪面
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2; // 将相机沿Z轴向外移动
// 创建场景
const scene = new THREE.Scene();
// 创建立方体几何体
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
// 创建基础材质，颜色为绿色
const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 });
// 创建网格（几何体 + 材质）
const cube = new THREE.Mesh(geometry, material);
scene.add(cube); // 将立方体添加到场景
// 设置渲染器尺寸以填充整个窗口
renderer.setSize(window.innerWidth, window.innerHeight);
// 执行一次渲染
renderer.render(scene, camera);
}
// ---------------------------------------------
// 关键一步：调用 main() 函数来执行 Three.js 初始化代码
// ---------------------------------------------
// main(); // 如果这行代码被注释掉，画布将保持空白
</script>
</body>
</html>在上面的代码中，main()函数包含了所有初始化Three.js场景的逻辑。如果您直接运行这段代码，并且main()函数调用行被注释掉，您将看到一个空白页面。这是因为main()函数从未被执行。
解决方案：显式调用初始化函数
解决这个问题非常简单，只需要在定义main()函数之后，显式地调用它即可：
// ... (main函数定义) ...
// ---------------------------------------------
// 关键一步：调用 main() 函数来执行 Three.js 初始化代码
// ---------------------------------------------
main(); // 解除注释，确保函数被调用将main();这一行添加到