three引入vue（工程化）

1：安装

• 有淘宝镜像的建议使用cnpm
  npm / cnpm install three

• 然后安装轨道控件
  npm install three-orbit-controls

• 安装.obj和.mtl文件的加载
  npm i --save three-obj-mtl-loader

• 安装渲染器
  npm i --save three-css2drender

2：引入

使用 import引入，这里单独引入three

这里是引入其他的模块

<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from "three";
// 轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { ConvexGeometry } from "three/examples/jsm/geometries/ConvexGeometry.js";
import { BufferGeometryUtils } from "three/examples/jsm/utils/BufferGeometryUtils.js";
// import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";
// import THREE from '@/units/three'
export default {
  name: "HomeView",
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
    };
  },
  created() {},
  mounted() {
    this.ready();
  },
  methods: {
    ready() {
      // 场景
      const scene = new THREE.Scene();
      // PerspectiveCamera（透视摄像机） 参数：视野角度（FOV），长宽比（aspect ratio），近截面（near），远截面（far）
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      // WebGLRenderer 渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // BoxGeometry（几何立方体）
      const geometry = new THREE.BoxGeometry();
      // MeshBasicMaterial 材质
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      // Mesh 网格
      const cube = new THREE.Mesh(geometry, material);
      // 添加至 0.0.0 坐标，
      scene.add(cube);
      // 防止摄像机与几何体重叠，做偏移处理
      camera.position.z = 5;

      // 创建轨道控制器
      const controls = new OrbitControls(camera, renderer.domElement);

      // 渲染
      // renderer.render(scene, camera);
      function render() {
        renderer.render(scene, camera);
        requestAnimationFrame(render);
      }
      render();
    },
  },
};
</script>
<style lang="scss" scoped>
body {
  margin: 0;
}
</style>