1.1Three.js 概述与核心概念

文档摘要

1.1Three.js 概述与核心概念 Three.js 基础入门：1.1 Three.js 概述与核心概念 Three.js 是一个基于 WebGL 的 JavaScript 3D 库，它简化了 WebGL 的使用，让开发者能够更容易地在浏览器中创建和显示 3D 图形。无需深入了解 WebGL 的底层细节，即可快速构建复杂的 3D 场景。 1.1.1 Three.js 概述 1. 什么是 Three.js? Three.js 本质上是一个封装了 WebGL API 的 JavaScript 库。WebGL 本身是一个底层的图形 API，直接使用 WebGL 编写 3D 应用需要大量的代码，并且对图形学知识有较高的要求。Three.

1.1Three.js 概述与核心概念

1. Three.js 基础入门：1.1 Three.js 概述与核心概念

Three.js 是一个基于 WebGL 的 JavaScript 3D 库，它简化了 WebGL 的使用，让开发者能够更容易地在浏览器中创建和显示 3D 图形。无需深入了解 WebGL 的底层细节，即可快速构建复杂的 3D 场景。

1.1.1 Three.js 概述

1. 什么是 Three.js?

Three.js 本质上是一个封装了 WebGL API 的 JavaScript 库。WebGL 本身是一个底层的图形 API，直接使用 WebGL 编写 3D 应用需要大量的代码，并且对图形学知识有较高的要求。Three.js 通过提供各种高级对象、函数和工具，降低了 3D 开发的门槛，使开发者能够专注于场景的设计和交互逻辑。

2. Three.js 的优势

易用性: Three.js 提供了简洁的 API 和丰富的文档，降低了 3D 开发的入门难度。
跨平台性: 基于 WebGL，Three.js 可以在任何支持 WebGL 的浏览器上运行，包括桌面浏览器和移动浏览器。
丰富的功能: Three.js 提供了各种 3D 对象、材质、光照、阴影、动画、特效等功能，满足各种 3D 应用的需求。
活跃的社区: Three.js 拥有庞大而活跃的开发者社区，可以方便地获取帮助、分享经验和参与贡献。
性能优化: Three.js 在底层对 WebGL 进行了优化，可以高效地渲染 3D 场景。

3. Three.js 的应用场景

Three.js 广泛应用于各种领域，包括：

游戏开发: 创建 3D 网页游戏。
可视化: 将数据可视化为 3D 图形。
建筑和室内设计: 在线展示 3D 建筑模型和室内设计方案。
产品展示: 在线展示 3D 产品模型，提供交互式体验。
教育: 用于 3D 教学和演示。
虚拟现实 (VR) 和增强现实 (AR): 构建 VR 和 AR 应用。

1.1.2 Three.js 核心概念

理解 Three.js 的核心概念是学习 Three.js 的关键。以下是几个最重要的概念：

场景 (Scene): 场景是所有 3D 对象的容器。你需要创建一个场景，并将所有的物体、灯光等添加到场景中。
相机 (Camera): 相机决定了观察场景的角度和方式。Three.js 提供了多种相机类型，例如透视相机 (PerspectiveCamera) 和正交相机 (OrthographicCamera)。
渲染器 (Renderer): 渲染器负责将场景和相机的内容渲染到屏幕上。Three.js 提供了多种渲染器，例如 WebGLRenderer 和 CSS3DRenderer。
物体 (Object3D): 物体是场景中的基本元素，例如立方体、球体、平面等。Three.js 提供了多种内置的几何体 (Geometry) 和材质 (Material)，可以用来创建各种各样的物体。
几何体 (Geometry): 几何体定义了物体的形状。
材质 (Material): 材质定义了物体的外观，例如颜色、纹理、光泽度等。
网格 (Mesh): 网格是由几何体和材质组成的物体。它是 Three.js 中最常用的物体类型。
光照 (Lights): 光照决定了场景中物体的明暗程度和颜色。Three.js 提供了多种光照类型，例如环境光 (AmbientLight)、方向光 (DirectionalLight)、点光源 (PointLight) 等。

核心概念关系图：

1.1.3 代码实践：创建一个简单的 Three.js 场景

下面是一个简单的 Three.js 场景的示例代码，它创建了一个立方体并将其渲染到屏幕上。


<!DOCTYPE html>
<html>
<head>
    <title>Three.js 示例</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/build/three.min.js"></script>
    <script>
        // 1. 创建场景
        const scene = new THREE.Scene();
        // 2. 创建相机
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        camera.position.z = 5;
        // 3. 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        // 4. 创建几何体 (立方体)
        const geometry = new THREE.BoxGeometry( 1, 1, 1 );
        // 5. 创建材质 (红色)
        const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
        // 6. 创建网格 (将几何体和材质组合起来)
        const cube = new THREE.Mesh( geometry, material );
        // 7. 将网格添加到场景中
        scene.add( cube );
        // 8. 动画循环
        function animate() {
            requestAnimationFrame( animate );
            // 旋转立方体
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            // 渲染场景
            renderer.render( scene, camera );
        }
        animate();
    </script>
</body>
</html>

代码详解：

创建场景: const scene = new THREE.Scene(); 创建一个 Three.js 场景，用于容纳所有的 3D 对象。
创建相机: const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 创建一个透视相机。
- 75: 视野角度 (FOV)，单位是度。
- window.innerWidth / window.innerHeight: 宽高比。
- 0.1: 近裁剪面。
- 1000: 远裁剪面。
camera.position.z = 5; 将相机沿 Z 轴向后移动 5 个单位，以便能够看到立方体。
创建渲染器: const renderer = new THREE.WebGLRenderer(); 创建一个 WebGL 渲染器。

renderer.setSize( window.innerWidth, window.innerHeight ); 设置渲染器的大小为窗口的大小。

document.body.appendChild( renderer.domElement ); 将渲染器的 DOM 元素添加到 HTML 文档中。
创建几何体: const geometry = new THREE.BoxGeometry( 1, 1, 1 ); 创建一个立方体几何体，尺寸为 1x1x1。
创建材质: const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); 创建一个基础材质，颜色为红色。 MeshBasicMaterial 不受光照影响，直接显示指定的颜色。
创建网格: const cube = new THREE.Mesh( geometry, material ); 创建一个网格，将立方体几何体和红色材质组合起来。
添加到场景: scene.add( cube ); 将立方体添加到场景中。
动画循环: function animate() { ... } 定义一个动画循环函数，用于更新场景并重新渲染。

requestAnimationFrame( animate ); 使用 requestAnimationFrame 函数来调用 animate 函数，从而实现动画效果。

cube.rotation.x += 0.01; cube.rotation.y += 0.01; 旋转立方体。

renderer.render( scene, camera ); 使用渲染器将场景和相机的内容渲染到屏幕上。

将上述代码保存为 HTML 文件并在浏览器中打开，你将看到一个旋转的红色立方体。

1.1.4 深入理解核心概念

场景 (Scene): 想象一个舞台，所有的演员、道具、灯光都放在这个舞台上。场景就是 Three.js 中的舞台，用于组织和管理所有的 3D 对象。
相机 (Camera): 相机就像观众的眼睛，决定了你从哪个角度观察舞台上的表演。不同的相机类型会产生不同的视觉效果。
渲染器 (Renderer): 渲染器就像舞台的灯光师，负责将舞台上的场景渲染到屏幕上，让观众看到。
物体 (Object3D): 物体是场景中的基本元素，可以是任何 3D 对象，例如立方体、球体、人物模型等。
几何体 (Geometry): 几何体定义了物体的形状，例如立方体的六个面、球体的曲面等。
材质 (Material): 材质定义了物体的外观，例如颜色、纹理、光泽度等。不同的材质会产生不同的视觉效果。
网格 (Mesh): 网格是由几何体和材质组成的物体。它是 Three.js 中最常用的物体类型，因为它可以灵活地控制物体的形状和外观。
光照 (Lights): 光照决定了场景中物体的明暗程度和颜色。不同的光照类型会产生不同的光影效果。

1.1.5 总结

Three.js 是一个功能强大且易于使用的 JavaScript 3D 库，它可以帮助你快速构建各种 3D 应用。理解 Three.js 的核心概念是学习 Three.js 的关键。通过本文的学习，你应该对 Three.js 的基本概念有了初步的了解。在后续的学习中，你可以继续深入研究 Three.js 的各种功能和特性，从而创建更复杂的 3D 场景。