react应用中导入three.js

本文主要讲述如何在react应用中导入three.js，和构建demo示例。

效果图：

首先，先通过npm下载three包：
npm i three --save
然后在上文的基础上进行home组件的修改如下：

import React from 'react';
import * as THREE from 'three';
class Home extends React.Component {
    
    
    // constructor(props) {
    
    
    //     super(props)
    // }
    render() {
    
    
        return (
            <div id='container'></div>
        )
    }
    componentDidMount() {
    
    
        console.log('home componentDidMount')
        const container = document.getElementById('container') //容器
        if(container.childNodes.length > 0){
    
     //清空容器
            let node = document.getElementsByTagName('canvas')[0]
            container.removeChild(node)
        }
        var scene = new THREE.Scene();
        
        /** camera 摄像机视锥体
         *  fov 摄像机视锥体垂直视野角度。
         *  aspect 摄像机视锥体长宽比。
         *  near 摄像机视锥体近端面。
         *  far 摄像机视锥体远端面。
         */
        var camera = new THREE.PerspectiveCamera( 75, 600/300, 0.1, 1000 );
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( 600, 300 );
        
        //生成的渲染的实例, 这个要放到对应的dom容器里面
        container.appendChild(renderer.domElement);
        /** BoxGeometry 四边形的原始几何类
         * width — X轴上面的宽度，默认值为1。
         * height — Y轴上面的高度，默认值为1。
         * depth — Z轴上面的深度，默认值为1
         */
        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        
        // 材质
        var material = new THREE.MeshBasicMaterial( {
    
     color: 0x00ff00 } );
        
        // 生成立方体
        var cube = new THREE.Mesh( geometry, material );
        
        // 添加立方体
        scene.add( cube );
        
        // 相机高度
        camera.position.z = 5;
        
        // 添加动画效果
        var animate = function () {
    
    
            requestAnimationFrame( animate );
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render( scene, camera );
        };
        animate();
    }
}
export default Home;