良久没有写过博客了,最近忙的焦头烂额,忽略了博客,罪过罪过。今天补充一篇,前一段时间研究过的技术,使用React+Three.js 封装一个三维地球,支持鼠标的交互行为。其实也实现了对有坐标的json数据展示在地球上的功能,以后会有补充。
整体做完之后的效果图:
废话少说,直接上环境
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 <