vue 使用npm下载three

1、安装three.js

　　npm install three

2、安装轨道控件插件

　　npm install three-orbit-controls

3、安装加载.obj和.mtl文件的插件

　　npm i --save three-obj-mtl-loader

4、安装渲染器插件

　　npm i --save three-css2drender

复制以下代码支行查看是否按装成功

　　

<template>
  <div class="home"></div>
</template>

<script>
// @ is an alias to /src
import * as THREE from "three";
export default {
  name: "Home",
  components: {},
  mounted() {
    //场景
    var scene = new THREE.Scene();
    //摄像机
    var camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      100
    );
    // 渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 物体
    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();
  },
};
</script>