从基础开始学习three.js

简介 本篇介绍一下如何用Three.js实现一个简单的3D地球。前面已经把基础讲解了，现在开始实现一些小示例。 开始绘制 基础环境搭建 先把Three.js的基础模块，渲染器、相机、场景、灯光、纹理加

「这是我参与2022首次更文挑战的第30天，活动详情查看：2022首次更文挑战」 简介 着色器材质可以自定义几何体面的颜色。进一步学习后就会知道，three.js就是对GLSL语言进行了多方面的封装，

「这是我参与2022首次更文挑战的第29天，活动详情查看：2022首次更文挑战」 简介 本节主要使用多个粒子在地图边界，根据时间在不同的位置发光，实现一条发光的线在边界上移动。

「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」 简介 上一节我们了解了着色器材质，这节我们了解如何使用着色器。 着色器变量 着色器中有三种变量： Uniforms 全

「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」 简介 我们知道three.js是对webGL的封装，不需要我们操作复杂的着色器。有时候需求要我们实现一些十分丰富的图像

1. 使用`.Raycaste()`在物体的各个顶点发出射线，计算是否和其他物体相交。 2. 使用`.Box3`在物体上创建包围盒，计算两个物体包围盒是否相交。

「这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战」 简介 上节加载了模型和模型动画，本节使用键盘控制模型移动和连贯动画实现攻击动作。

「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」 简介 在three.js中动画也是很重要的一环。在使用软件创建模型时，一般都会创建模型的骨骼动画用于在开发中使用。下面

「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」 简介 本节主要使用几何体和贴图来绘制一个房子，通过模型导入来加载一个冰墩墩在门口。

「这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战」 简介 地图下钻听起来是很厉害的技术，当你明白后会发现，实现它非常的简单。

「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」 简介 在可视化开发中飞线图应该是很常见的一种。为了灵活的使用three.js，本节我们在3D地图上绘制一个简单的飞线图

获取GeoJSON数据 GeoJSON是一种对各种地理数据结构进行编码的格式。本质就是一个JSON对象；

「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」 射线追踪法 射线追踪法是最常见的方法，因为three.js提供了Raycaster对象来实现它。 原理：从鼠标处发射一

「这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战」 Shape 形状 通过路径来绘制二维形状平面。简单理解就是在一个平面上用不规则的线连接成一个图形。 想在three.j

「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」 天空盒 在3D场景中，为了增强场景表现力，我们通常会为场景添加天空盒。就是在整个场景的上方绘制天空这一类图片。 最简单

「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」 简介 在上一课中我们了解了.OBJ文件，.OBJ文件格式是很久以前使用的。它只有几何体顶点相关数据，所以它加载的内容都

「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」 .obj obj文件是3D模型文件格式。 它包含的信息都是几何体顶点相关数据，不包含动画、材质特性、粒子等信息。 使用

「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」 WebGLRenderTarget WebGLRenderTarget 是一个渲染器。用于在缓存中为场景绘制像素。 简

「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」 雾 雾通常是基于离摄像机的距离褪色至某种特定颜色的方式。 在three.js中有两种设置雾的对象： .Fog() 定义

「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」 阴影 three.js中使用的是阴影贴图，阴影贴图的工作方式就是具有投射阴影的光能对所有能被投射阴影的物体从光源渲染阴