Three.js JS 开源JavaScript 3D图形库-卡核

Three.js 是一款强大的开源JavaScript 3D图形库，它基于WebGL构建，允许你在网页浏览器中创建并展示令人惊叹的交互式3D内容。下面这个表格汇总了它的核心信息，帮你快速了解。

特性维度	具体描述
核心价值	封装复杂的WebGL底层接口，让开发者无需深厚图形学知识也能便捷创建3D场景。
技术基础	基于WebGL，利用GPU进行硬件加速渲染。
核心功能	提供场景、相机、光照、几何体、材质、动画系统等完整3D组件，支持导入多种3D模型格式（如OBJ、FBX、GLTF）。
关键优势	跨平台（支持所有现代浏览器）、功能全面、拥有活跃的开源社区和丰富的资源。
主要应用领域	网页游戏、数据可视化、产品展示、数字孪生、虚拟现实/增强现实（VR/AR）、教育模拟等。

💡 核心概念与工作流程

要理解Three.js，首先需要了解其三个核心概念和基本工作流程：

场景（Scene）：相当于一个3D舞台或容器，用于放置所有要显示的物体、灯光、相机等。
相机（Camera）：决定了观察3D场景的视角，类似于人的眼睛。最常用的是模拟人眼视角、具备近大远小效果的透视相机（PerspectiveCamera）。
渲染器（Renderer）：核心绘制工具，负责将场景和相机所见的景象渲染到网页的Canvas元素上。通常使用WebGLRenderer以获得硬件加速性能。

一个基本的Three.js程序通常遵循以下工作流程：创建场景 → 设置相机 → 创建渲染器并绑定到DOM → 在场景中添加物体（几何体+材质+网格）和灯光 → 通过渲染循环实现动画和交互。

🚀 快速开始：创建旋转立方体

下面是一个简单的代码示例，帮助你直观感受Three.js的基本用法。这段代码将在页面中创建一个持续旋转的绿色立方体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Three.js Scene</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script type="module">
        // 引入Three.js库（通过ES6模块方式）
        import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js';

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

        // 2. 创建透视相机（视野角度75°，宽高比，近截面0.1，远截面1000）
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5; // 将相机沿z轴后移5个单位

        // 3. 创建WebGL渲染器，并设置大小，然后将其canvas元素添加到页面中
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 4. 创建立方体几何体（长宽高均为1）
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        // 创建基础材质（绿色）
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        // 将几何体和材质组合成一个网格（Mesh）物体
        const cube = new THREE.Mesh(geometry, material);
        // 将立方体添加到场景中
        scene.add(cube);

        // 5. 创建动画循环
        function animate() {
            requestAnimationFrame(animate); // 在下一帧重绘时调用animate函数

            // 更新立方体的旋转角度
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            // 将场景渲染出来
            renderer.render(scene, camera);
        }
        animate(); // 启动动画循环
    </script>
</body>
</html>