第一章：环境搭建与基础

各位同学，欢迎来到《3D数据可视化从入门到精通》的第一课。

说实话，我见过太多人一上来就急着写代码，结果环境没配好，折腾半天连个立方体都显示不出来。我自己刚学Three.js那会儿，也踩过不少坑。所以这一章，咱们先把地基打牢。

1.1 Node.js与npm安装

Three.js项目依赖Node.js环境。为什么？因为我们需要用npm来管理第三方库。

我个人习惯用LTS版本，稳定，不容易出幺蛾子。去官网下载安装包，一路下一步就行。

小提示：安装完成后，打开终端（CMD或PowerShell），输入以下命令验证： 
node -v
npm -v

如果能看到版本号，比如 v18.16.0 和 9.5.1，那就说明装好了。

注意：我曾经遇到过npm版本过低导致安装Three.js失败的情况。建议用 npm install -g npm@latest 升级到最新版。

1.2 VS Code配置

编辑器我推荐VS Code，免费、轻量、插件生态好。你想想看，一个编辑器能搞定前端、后端、甚至3D开发，多省事。

装好之后，我建议你安装这几个插件：

  • Live Server —— 启动本地服务器，实时刷新页面
  • ESLint —— 检查代码规范，避免低级错误
  • Prettier —— 自动格式化代码，保持风格统一
  • JavaScript (ES6) code snippets —— 快速补全代码

嗯，这里要注意：Live Server 是必须的。因为Three.js加载本地文件时，直接双击HTML文件会报跨域错误。用Live Server启动就没事。

1.3 创建第一个Three.js项目

好，环境准备好了。咱们来写第一个项目。

打开终端，创建一个新文件夹：

mkdir my-first-threejs
cd my-first-threejs
npm init -y

然后安装Three.js：

npm install three

安装完成后，你会看到 node_modules 文件夹和 package.json 文件。这说明依赖已经拉下来了。

接下来，在项目根目录创建一个 index.html 文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个Three.js项目</title>
    <style>
        body { margin: 0; overflow: hidden; }
    </style>
</head>
<body>
    <script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
        }
    }
    </script>
    <script type="module">
        import * as THREE from 'three';

        // 场景
        const scene = new THREE.Scene();

        // 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

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

        // 立方体
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

用VS Code打开这个文件，右键选择「Open with Live Server」。浏览器里应该出现一个旋转的绿色立方体。

核心要点：这个例子虽然简单，但它包含了Three.js的三大核心：场景、相机、渲染器。后面所有复杂的可视化，都是在这个基础上扩展的。

1.4 理解三大核心

咱们来拆解一下刚才的代码。说白了，Three.js就是一台虚拟的3D摄像机。

场景（Scene）

场景就是一个容器。你把所有东西——模型、灯光、粒子——都放进去。它本身不渲染任何东西，只是负责管理。

我刚开始学的时候，总把场景和渲染器搞混。记住：场景是「内容」，渲染器是「输出设备」。

相机（Camera）

相机决定了你从哪个角度看场景。Three.js提供了好几种相机，最常用的是 PerspectiveCamera（透视相机）。

它的构造函数有四个参数：

参数 说明 我的建议
fov 视野角度（度） 一般用45-75，太宽会变形
aspect 宽高比 通常用 window.innerWidth / window.innerHeight
near 近裁剪面 0.1 就够用，太小会有深度冲突
far 远裁剪面 1000 够用，太大影响性能
避坑指南：我曾经把near设成0.001，结果场景里出现了奇怪的闪烁。后来才知道，near和far的比值太大，会导致深度缓冲区精度不够。建议near不要小于0.1。

渲染器（Renderer）

渲染器负责把场景和相机的内容「画」到屏幕上。最常用的是 WebGLRenderer。

它有几个重要设置：

  • setSize() —— 设置渲染尺寸，通常和窗口一样大
  • setPixelRatio() —— 适配高清屏，建议设为 window.devicePixelRatio
  • domElement —— 渲染输出的canvas元素，要添加到页面中

你想想看，如果没有渲染器，场景和相机就只是内存里的数据，我们根本看不到。渲染器就是那个「把数据变成图像」的桥梁。

1.5 动画循环

最后说说动画循环。为什么用 requestAnimationFrame？

因为它能保证动画在浏览器刷新时执行，不会浪费CPU。而且当页面切换到后台时，它会自动暂停，省电又省资源。

我见过有人用 setInterval 做动画，结果页面切出去再切回来，动画卡成PPT。所以，记住：Three.js的动画，永远用 requestAnimationFrame。

小技巧：如果你需要控制帧率，可以用一个时间戳变量做限制。比如每16ms执行一次，就是60fps。

好了，第一章的内容就到这里。环境搭好了，第一个项目跑起来了，三大核心也理解了。下一章，咱们开始玩点真正的3D数据可视化。

公众号:蓝海资料掘金营，微信deep3321

← 上一章 📖 返回目录 下一章 →