1. Three.js 简介

• 什么是Three.js：

  • Three.js 是一个用于创建3D图形的JavaScript库，它简化了WebGL编程。
  • WebGL是浏览器内置的低级API，而Three.js提供了更高级别的抽象和易于使用的接口。

• 应用场景：

  • 3D游戏开发：构建交互式3D游戏体验。
  • 数据可视化：将复杂的数据集以直观的3D形式展示。
  • 虚拟现实（VR）和增强现实（AR）：通过Web实现沉浸式体验。
  • 产品展示：在线展示产品的3D模型。

2. 环境搭建

• 引入Three.js库：

  • 使用CDN直接在HTML文件中引入：

    <!-- 引入Three.js库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>使用npm安装并配置模块化项目：
    

  • 使用npm安装并配置模块化项目：

    # 安装Three.js库
    npm install three
    

  • 创建简单的Three.js项目结构：

  • 创建index.html、main.js等基础文件。

  • 设置基本的HTML5页面结构，并确保Canvas元素正确渲染。

3. 核心概念

• 场景(Scene)：

  • 场景是所有对象的容器，包含几何体、光源、相机等。

  • 示例代码：

    // 创建一个新的场景对象
    const scene = new THREE.Scene();
    

• 相机(Camera)：

  • 透视相机(PerspectiveCamera)：模拟人眼视角，近大远小。

  • 正交相机(OrthographicCamera)：保持物体大小不变，适用于建筑图纸等。

  • 示例代码：

    // 创建一个透视相机，参数分别为视野角度、宽高比、近裁剪面、远裁剪面
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    
    // 将相机位置设置到适当的位置以便观察场景
    camera.position.z = 5;
    

• 渲染器(Renderer)：

  • 渲染器负责将场景中的内容绘制到屏幕上。

  • 示例代码：

    // 创建一个WebGL渲染器
    const renderer = new THREE.WebGLRenderer();
    
    // 设置渲染器的尺寸为窗口大小
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    // 将渲染器的DOM元素添加到HTML文档中
    document.body.appendChild(renderer.domElement);
    

4. 基础几何体

• 创建基本几何形状：

  • 立方体(BoxGeometry)、球体(SphereGeometry)、平面(PlaneGeometry)等。

  • 示例代码：

    // 创建一个立方体几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    
    // 创建一个基础材质，颜色为绿色 (RGB: 0x00ff00)
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    
    // 创建一个网格对象，将几何体和材质组合在一起
    const cube = new THREE.Mesh(geometry, material);
    
    // 将立方体添加到场景中
    scene.add(cube);
    

• 几何体属性修改：

  • 修改几何体的位置、旋转、缩放等属性。

  • 示例代码：

    // 修改立方体的位置，使其向后移动5个单位
    cube.position.set(0, 0, -5);
    
    // 修改立方体的旋转角度，沿Y轴旋转45度 (π/4弧度)
    cube.rotation.y = Math.PI / 4;
    
    // 修改立方体的缩放比例，使它变大两倍
    cube.scale.set(2, 2, 2);
    

5. 材质与纹理

• 不同类型的材质：

  • MeshBasicMaterial：不考虑光照的基本材质。

  • MeshLambertMaterial：考虑漫反射的简单材质。

  • MeshPhongMaterial：考虑镜面反射的高级材质。

  • 示例代码：

    // 创建一个带有镜面反射效果的材质，颜色为红色 (RGB: 0xff0000)
    const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
    

• 加载并应用纹理图片：

  • 使用THREE.TextureLoader加载纹理。

  • 示例代码：

    // 创建一个纹理加载器
    const textureLoader = new THREE.TextureLoader();
    
    // 加载纹理图片
    const texture = textureLoader.load('path/to/texture.jpg');
    
    // 创建一个带有纹理贴图的基础材质
    const material = new THREE.MeshBasicMaterial({ map: texture });
    

6. 灯光系统

• 各类灯光类型：

  • 点光源(PointLight)：从一个点向四周发射光线。

  • 方向光(DirectionalLight)：模拟太阳光，平行照射。

  • 环境光(AmbientLight)：提供全局照明，无方向性。

  • 示例代码：

    // 创建一个方向光，颜色为白色 (RGB: 0xffffff)，强度为1
    const light = new THREE.DirectionalLight(0xffffff, 1);
    
    // 设置光源的位置
    light.position.set(5, 5, 5);
    
    // 将光源添加到场景中
    scene.add(light);
    

• 灯光对场景效果的影响：

  • 不同类型的灯光组合可以营造出不同的氛围和视觉效果。

7. 动画制作

• 使用requestAnimationFrame实现动画循环：

  • 通过递归调用requestAnimationFrame来实现平滑动画。

  • 示例代码：

    // 定义一个动画函数
    function animate() {
      // 请求下一帧时再次调用此函数
      requestAnimationFrame(animate);
    
      // 每帧更新立方体的旋转角度
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
    
      // 渲染当前场景和相机视图
      renderer.render(scene, camera);
    }
    
    // 开始动画循环
    animate();
    

• 对象变换动画：

  • 对象的位置、旋转、缩放等属性可以通过周期函数进行动态变化。

8. 模型加载

• 支持的模型格式：

  • GLTF：现代标准，支持多种特性。
  • OBJ：简单但功能有限。
  • FBX：常用于游戏开发。

• 使用Loader加载外部模型文件：

  • 示例代码：

    // 创建一个GLTF加载器
    const loader = new THREE.GLTFLoader();
    
    // 加载GLTF模型文件
    loader.load('path/to/model.gltf', function (gltf) {
      // 将加载的模型添加到场景中
      scene.add(gltf.scene);
    });
    

9. 高级特性

• 阴影计算：

  • 启用阴影投射和接收功能。

  • 示例代码：

    // 启用光源的阴影投射
    light.castShadow = true;
    
    // 启用立方体的阴影投射
    cube.castShadow = true;
    
    // 启用平面的阴影接收
    plane.receiveShadow = true;
    
    // 启用渲染器的阴影映射
    renderer.shadowMap.enabled = true;
    

• 后处理特效：

  • 使用THREE.EffectComposer添加景深、抗锯齿等特效。

  • 示例代码：

    // 创建一个EffectComposer实例
    const composer = new THREE.EffectComposer(renderer);
    
    // 创建一个RenderPass并将场景和相机传递给它
    const renderPass = new THREE.RenderPass(scene, camera);
    
    // 将RenderPass添加到composer中
    composer.addPass(renderPass);
    

10. 性能优化

• 减少绘制调用次数：

  • 尽量合并几何体，减少不必要的渲染操作。
  • 不是使用的模型要及时从内存中清除

• 使用WebGLRenderer的特殊设置提高性能：

  • 调整抗锯齿、深度测试等参数。

  • 示例代码：

    // 设置像素比率以适应高分辨率屏幕
    renderer.setPixelRatio(window.devicePixelRatio);
    
    // 设置渲染器的尺寸为窗口大小，禁用自动调整大小
    renderer.setSize(window.innerWidth, window.innerHeight, false);
    

11. 与地图的结合

• 公网常用地图：

  • 高德地图支持threeJS所有常用API

  • 百度地图只开放open版 （open 版目前只开放了部分功能，想要实现更丰富的渲染效果、可视域测量等功能，请联系官方使用商业版）

  • Cesium地图支持threeJS所有常用API （它最初由美国空间技术公司开发，最初用于其航天和国防领域的应用程序。随着Web地图和地理空间数据可视化需求的增加，AGI决定将Cesium开源，并于2012年发布了第一个开源版本，它遵循Apache 2.0开源协议）

• 内网地图：

  • 思极地图只能展示三维模型其余不支持（粗略理解，它也可以绘制几何模型及修改材质等等）

  • 一张图不支持三维