最重要的一点,发现居然有智能提示,强烈推荐这种编程方法。。。。(吐血推荐)

1.用npm加载three.js

npm install --save three或者淘宝镜像:cnpm install --save three(推荐第二种,需要装淘宝npm镜像)

2.网上有提到不能用example的js文件,下面链接有提到解决方法(未测试)

https://github.com/mrdoob/three.js/issues/9562

3.实际应用(把这个做成一个react模块,测试一下,看看是否成功)

import React, { Component } from 'react';
import * as THREE from 'three';

class ThreeBim extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }

    initThree(){
        threeStart();

        var renderer,width,height;

        function init() {
            width = window.innerWidth;
            height = window.innerHeight;
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(width, height);
            document.getElementById('canvas-frame').appendChild(renderer.domElement);
            renderer.setClearColor(0x000000, 1.0);
        }
 
        var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
            camera.position.set(400,400,400)
            camera.up.set(0,1,0);
            camera.lookAt(0,0,0);
        }
 
        var scene;
        function initScene() {
            scene = new THREE.Scene();
        }
 
        var light;
        function initLight() {
            light = new THREE.AmbientLight(0xFFFFFF);
            light.position.set(300, 300, 0);
            scene.add(light);
        }
 
        function initObject() {
 
            var geometry = new THREE.CubeGeometry(200, 200, 200);
            var material = new THREE.MeshLambertMaterial({ color: 0xFF0000 });
            var mesh = new THREE.Mesh(geometry, material);
            mesh.position.set(0, 0, 0);
            scene.add(mesh);
        }        
 
        function threeStart() {
            init();
            initCamera();
            initScene();
            initLight();
            initObject();
            animation();
 
        }
        function animation() {         
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
        }
    }

    /**
     * 开始Three
     *
     * @memberof ThreeBim
     */
    componentDidMount(){
        this.initThree();
    }
    render() {
        return (
            <div id='canvas-frame'>
            </div>
        );
    }
}

export default ThreeBim;

 

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐