ChengYu08 / react-threejs-app

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

详细博客地址:

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

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.一步一个脚印

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

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

2.2 定义一个组件ThreeMap

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

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

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

2.2 引入库和样式

import './ThreeMap.css';
import React, { Component } from 'react';
import * as THREE from 'three';
import Orbitcontrols from 'three-orbitcontrols';
import Stats from './common/threejslibs/stats.min.js';

2.3 初始化方法入口和要渲染的虚拟DOM

componentDidMount(){
    this.initThree();
}

要渲染的虚拟DOM设定好

render(){
    return(
        <div id='WebGL-output'></div>
    )
}

2.4 initThree方法

• 创建场景

let scene;
scene = new THREE.Scene();

• 创建Group

let group;
group = new THREE.Group();
scene.add( group );

• 创建相机

camera = new THREE.PerspectiveCamera( 60, width / height, 1, 2000 );
camera.position.x = -10;
camera.position.y = 15;
camera.position.z = 500;
camera.lookAt( scene.position );

• 相机作为Orbitcontrols的参数，支持鼠标交互

let orbitControls = new Orbitcontrols(camera);
orbitControls.autoRotate = false;

• 添加光源:环境光和点光源

let ambi = new THREE.AmbientLight(0x686868); //环境光
scene.add(ambi);
let spotLight = new THREE.DirectionalLight(0xffffff);  //点光源
spotLight.position.set(550, 100, 550);  
spotLight.intensity = 0.6;
scene.add(spotLight);

• 创建模型和材质

let loader = new THREE.TextureLoader();
let planetTexture = require("./assets/imgs/planets/Earth.png");

loader.load( planetTexture, function ( texture ) {
    let geometry = new THREE.SphereGeometry( 200, 20, 20 );
    let material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
    let mesh = new THREE.Mesh( geometry, material );
    group.add( mesh );
} );

• 渲染

let renderer;
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xffffff );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( width, height );
container.appendChild( renderer.domElement );

• 增加监控的信息状态

stats = new Stats();
container.appendChild( stats.dom );

将以上封装到init函数中

• 动态渲染，地球自转

function animate() {
    requestAnimationFrame( animate );
    render();
    stats.update();
}
function render() {
    group.rotation.y -= 0.005;  //这行可以控制地球自转
    renderer.render( scene, camera );
}

调用的顺序是：

init();
animate();