vue中引入three中其他重要的依赖包和使用

在vue中使用three  首先先引入 cnpm install three --save

在使用的文件中这样引入

mport * as THREE from 'three'

这不是本次写这个中重点。

在vue中如果想使用 OrbitControls，控制运动，CSS2DRenderer 添加2D字体等等这些

都可以这样引入

 import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
  import {CSS2DRenderer,CSS2DObject} from 'three/examples/jsm/renderers/CSS2DRenderer'
  import api from '../api/https.js'

  export default {}

这个的重点在于  引入 路径 中这个jsm文件夹，大家可以点开node_modules 这个文件夹找打 three /examples/jsm 下面的 任何一个js 你可以看见  这个js是

export { OrbitControls, MapControls };

这写js都是有对外暴露的 功能。

 

你在打开 three/examples/js  下的文件  你又会发现  是同样的 js文件  但里面的 内容是不同的，它里面是没有exoort这个 

 

最后  可以得出一个结论 就是  

如果你是使用正常 html+js方法

<script></script>来引入的 话，你可以直接引入 js下的 文件，

                        在原文中直接使用  new THREE.OrbitControls()

<script src="./examples/js/controls/OrbitControls.js"></script>
controls = new THREE.OrbitControls(camera);

如果你使用vue这样的框架

你就使用jsm下面的 文件

                  在原文中使用时 可以 直接 new OrbitControls（） 这样的 方式

import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
 this.controls = new OrbitControls(this.camera)