使用React+Three.js 封装一个三维地球

良久没有写过博客了，最近忙的焦头烂额，忽略了博客，罪过罪过。今天补充一篇，前一段时间研究过的技术，使用React+Three.js 封装一个三维地球，支持鼠标的交互行为。其实也实现了对有坐标的json数据展示在地球上的功能，以后会有补充。

github仓库地址:

https://github.com/zrysmt/react-threejs-app

整体做完之后的效果图：

废话少说，直接上环境

1.环境

使用facebook给出的脚手架工具create-react-app.

npm install -g create-react-app

create-react-app react-threejs-app
cd react-threejs-app/

执行

npm start

浏览器会自动打开localhost:3000。

2.背景知识

Three.js简单来说就是封装了WebGL一些易用的API接口，我们知道只使用WebGL比较低效。具体的关于WebGL的技术给出两篇博客的入口,关于Three.js可以参考文章最后给出的参考阅读部分。
- WebGL基础简明教程1-简介
- WebGL基础简明教程2-基础知识

如果不是很了解WebGL技术也没有关系，不妨现在先看看Three.js创建模型的整体过程。

安装需要的库,three是Three.js的库，three-orbitcontrols用来支持鼠标的交互行为的库。

npm i three three-orbitcontrols --save

3.一步一个脚印

3.1 准备一张高清的世界地图

这里在github仓库中已经给出。

3.2 定义一个组件ThreeMap

在ThreeMap.js定义组件ThreeMap，并且创建改组件的样式ThreeMap.css。css定义三维地球的容器的宽度和高度。

#WebGL-output{
    width: 100%;
    height: 700px;
}

并且该组件在App.js引用。

3.3 引入库和样式

import './Th