最近因为three.js的项目要用Vue.js 来重构，所以不太清楚在Vue里面怎么引入。找了很多方法都是一直报错，最后在Stack Overflow找到了。
首先是下载包，直接用 npm install three --save 就行了。
然后就是在component里面引入。
<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>
)
