├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
├── index.html
└── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── ThreeMap.css
├── ThreeMap.js
├── assets
└── imgs
│ └── planets
│ ├── Earth.png
│ ├── EarthNormal.png
│ ├── EarthSpec.png
│ ├── Mars-normalmap_2k.png
│ ├── Mars_2k-050104.png
│ ├── earth-specular.gif
│ ├── earth.jpg
│ ├── land_ocean.jpg
│ ├── mars_1k_color.jpg
│ └── mars_1k_normal.jpg
├── common
└── threejslibs
│ ├── Projector.js
│ └── stats.min.js
├── index.css
├── index.js
├── logo.svg
└── registerServiceWorker.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 详细博客地址:
2 | > [使用React+Three.js 封装一个三维地球](https://zrysmt.github.io/2017/09/23/%E4%BD%BF%E7%94%A8React+Three.js%E5%B0%81%E8%A3%85%E4%B8%80%E4%B8%AA%E4%B8%89%E7%BB%B4%E5%9C%B0%E7%90%83/)
3 |
4 | ## 1.环境
5 | 使用facebook给出的脚手架工具[create-react-app](https://github.com/facebookincubator/create-react-app).
6 |
7 | ```bash
8 | npm install -g create-react-app
9 |
10 | create-react-app react-threejs-app
11 | cd react-threejs-app/
12 | ```
13 | 执行
14 | ```bash
15 | npm start
16 | ```
17 | 浏览器会自动打开`localhost:3000`。
18 |
19 | ## 2.一步一个脚印
20 | ### 2.1 准备一张高清的世界地图
21 | 这里在github仓库中已经给出。
22 | ### 2.2 定义一个组件`ThreeMap`
23 | 在`ThreeMap.js`定义组件`ThreeMap`，并且创建改组件的样式`ThreeMap.css`。css定义三维地球的容器的宽度和高度。
24 | ```css
25 | #WebGL-output{
26 | width: 100%;
27 | height: 700px;
28 | }
29 | ```
30 | 并且该组件在`App.js`引用。
31 | ### 2.2 引入库和样式
32 | ```js
33 | import './ThreeMap.css';
34 | import React, { Component } from 'react';
35 | import * as THREE from 'three';
36 | import Orbitcontrols from 'three-orbitcontrols';
37 | import Stats from './common/threejslibs/stats.min.js';
38 | ```
39 | ### 2.3 初始化方法入口和要渲染的虚拟DOM
40 | ```js
41 | componentDidMount(){
42 | this.initThree();
43 | }
44 | ```
45 | 要渲染的虚拟DOM设定好
46 | ```js
47 | render(){
48 | return(
49 |
50 | )
51 | }
52 | ```
53 | ### 2.4 initThree方法
54 | - 创建场景
55 |
56 | ```js
57 | let scene;
58 | scene = new THREE.Scene();
59 | ```
60 | - 创建Group
61 |
62 | ```js
63 | let group;
64 | group = new THREE.Group();
65 | scene.add( group );
66 | ```
67 | - 创建相机
68 |
69 | ```js
70 | camera = new THREE.PerspectiveCamera( 60, width / height, 1, 2000 );
71 | camera.position.x = -10;
72 | camera.position.y = 15;
73 | camera.position.z = 500;
74 | camera.lookAt( scene.position );
75 | ```
76 | - 相机作为`Orbitcontrols`的参数，支持鼠标交互
77 |
78 | ```js
79 | let orbitControls = new Orbitcontrols(camera);
80 | orbitControls.autoRotate = false;
81 | ```
82 | - 添加光源:环境光和点光源
83 |
84 | ```js
85 | let ambi = new THREE.AmbientLight(0x686868); //环境光
86 | scene.add(ambi);
87 | let spotLight = new THREE.DirectionalLight(0xffffff); //点光源
88 | spotLight.position.set(550, 100, 550);
89 | spotLight.intensity = 0.6;
90 | scene.add(spotLight);
91 | ```
92 | - 创建模型和材质
93 |
94 | ```js
95 | let loader = new THREE.TextureLoader();
96 | let planetTexture = require("./assets/imgs/planets/Earth.png");
97 |
98 | loader.load( planetTexture, function ( texture ) {
99 | let geometry = new THREE.SphereGeometry( 200, 20, 20 );
100 | let material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
101 | let mesh = new THREE.Mesh( geometry, material );
102 | group.add( mesh );
103 | } );
104 | ```
105 | - 渲染
106 |
107 | ```js
108 | let renderer;
109 | renderer = new THREE.WebGLRenderer();
110 | renderer.setClearColor( 0xffffff );
111 | renderer.setPixelRatio( window.devicePixelRatio );
112 | renderer.setSize( width, height );
113 | container.appendChild( renderer.domElement );
114 | ```
115 | - 增加监控的信息状态
116 |
117 | ```js
118 | stats = new Stats();
119 | container.appendChild( stats.dom );
120 | ```
121 | **将以上封装到`init`函数中**
122 | - 动态渲染，地球自转
123 |
124 | ```js
125 | function animate() {
126 | requestAnimationFrame( animate );
127 | render();
128 | stats.update();
129 | }
130 | function render() {
131 | group.rotation.y -= 0.005; //这行可以控制地球自转
132 | renderer.render( scene, camera );
133 | }
134 | ```
135 | 调用的顺序是：
136 | ```js
137 | init();
138 | animate();
139 |
140 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-threejs-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "^15.6.1",
7 | "react-dom": "^15.6.1",
8 | "react-scripts": "1.0.13",
9 | "three": "^0.87.1",
10 | "three-orbitcontrols": "^1.2.1"
11 | },
12 | "scripts": {
13 | "start": "react-scripts start",
14 | "build": "react-scripts build",
15 | "test": "react-scripts test --env=jsdom",
16 | "eject": "react-scripts eject"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zrysmt/react-threejs-app/6bcafa341a0b3ffbfc223b2f124397f558a236f0/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
22 | React App
23 |
24 |
25 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 30px;
8 | }
9 |
10 | .App-header {
11 | background-color: #222;
12 | height: 30px;
13 | padding: 20px;
14 | color: white;
15 | }
16 |
17 | .App-intro {
18 | font-size: large;
19 | }
20 |
21 | @keyframes App-logo-spin {
22 | from { transform: rotate(0deg); }
23 | to { transform: rotate(360deg); }
24 | }
25 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import logo from './logo.svg';
3 | import './App.css';
4 | import ThreeMap from './ThreeMap';
5 |
6 | class App extends Component {
7 | render() {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |