在vue中使用three.js

在vue中使用three.js 引用 import { STLLoader } from 'three-obj-mtl-loader'时报错 ，var loader = new THREE.STLLoader()这样写也会报错

建议参考文档来引入three.js
https://blog.csdn.net/qq_42683219/article/details/105892059

在项目目录下使用下面命令

npm install three

示例

<template>
    <div>
      <div id="container"></div>
    </div>
</template>
 
<script>
import * as Three from 'three'
 
export default {
  name: 'ThreeTest',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    }
  },
  methods: {
    init: function() {
        let container = document.getElementById('container');
 
        this.camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
        this.camera.position.z = 1;
 
        this.scene = new Three.Scene();
 
        let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2);
        let material = new Three.MeshNormalMaterial();
 
        this.mesh = new Three.Mesh(geometry, material);
        this.scene.add(this.mesh);
 
        this.renderer = new Three.WebGLRenderer({antialias: true});
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        container.appendChild(this.renderer.domElement);
 
    },
    animate: function() {
        requestAnimationFrame(this.animate);
        this.mesh.rotation.x += 0.01;
        this.mesh.rotation.y += 0.02;
        this.renderer.render(this.scene, this.camera);
    }
  },
  mounted() {
      this.init();
      this.animate()
  }
}
</script>
<style scoped>
  #container {
    height: 400px;
  }
</style>