three.js

import * as THREE from 'three';
window.THREE = THREE
import {WEBGL} from './WEBGL'
window.WEBGL = WEBGL

if (WEBGL.isWebGLAvailable()) {//检测浏览器是否支持3d(three.js是基于WEBGL的实现https://github.com/mrdoob/three.js/blob/master/examples/js/WebGL.js)
      (() => {
        var scene = new THREE.Scene();//场景
        var camera = new THREE.PerspectiveCamera(
          75,
          window.innerWidth / window.innerHeight,
          0.1,
          1000
        );//相机

        var renderer = new THREE.WebGLRenderer();//渲染器
        renderer.setSize(200, 200);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.BoxGeometry(1, 2, 1);
        var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);//向场景添加内容

        camera.position.z = 2;

        var animate = function () {
          requestAnimationFrame(animate);

          cube.rotation.x += 0.01;
          cube.rotation.y += 0.01;

          renderer.render(scene, camera);
        };
        animate();
      })();
    } else {
      var warning = WEBGL.getWebGLErrorMessage();
      document.body.appendChild(warning);
    }