一、原版本例子

import * as THREE from 'three'
import OrbitControls from 'three/examples/js/controls/OrbitControls'
controls = new OrbitControls(camera, renderer.domElement)
配置webpack.base.conf.js文件 
  test: require.resolve("three/examples/js/controls/OrbitControls"),
  use: "imports-loader?THREE=three"
  test: require.resolve("three/examples/js/controls/OrbitControls"),
  use: "exports-loader?THREE.OrbitControls"
二、新版本例子
 
当前使用新three.js版本号： 
"three": {
      "version": "0.112.1",
      "resolved": "https://registry.npmjs.org/three/-/three-0.112.1.tgz",
      "integrity": "sha512-8I0O74hiYtKl3LgDNcPJbBGOlpekbcJ6fJnImmW3mFdeUFJ2H9Y3/UuUSW2sBdjrIlCM0gvOkaTEFlofO900TQ=="
相关包引入和使用的例子： 
import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
controls = new OrbitControls(camera, renderer.domElement)
再也不用担心七七八八的配置了，真棒！！
                    说明之前的笔记，引入three.js相关包那是相当的麻烦，各种引入方式和配置，还有各种报错和提示。新版本的three.js对其变量的引入和暴露进行了优化，可以很方便的从jsm文件夹下引入相关包了。原版本例子import * as THREE from 'three'import OrbitControls from 'three/examples/js/controls/OrbitCon...
虽然通过script标签来引入three.js是一个能够快速起步、快速运行的方式，但这种方式对于一些具有较长生命周期的项目来说是有一些缺点。比如：
你必须手动获得并在你的项目源代码中包含这个库的一个拷贝
更新库的版本是一个手动操作的过程
在检查新版本的库时，你的版本差异对比将会被许...
				最近因为three.js的项目要用Vue.js 来重构，所以不太清楚在Vue里面怎么引入。找了很多方法都是一直报错，最后在Stack Overflow找到了。
首先是下载包，直接用 npm install three --save 就行了。
然后就是在component里面引入。
&lt;template&gt;
    &lt;div&gt;
      &lt;div id="cont...
				Three.js查看版本号（107版本之后）
three.js在107版本以及107版本的版本号默认会打印在控制台的，例如：THREE.WebGLRenderer 106，但是到了108版本官方居然给删掉了，对于这种跨本版api经常乱变的库来说，是要闹事情吗。
此时我们想查看版本号应该怎么办？下面有三种方法可供参考：
1、查看源码
最简单的方式之直接打开编译后的库文件直接查看，build文件夹中t...
				1.在index.html文件中引入
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
2.通过npm下载依赖包引入
注：以下操作是vue-cli3.0的引入的实现步骤
下载依赖包
npm install --s three
配置文件设置
在项目目录下创建vue.config.js文件
const ThreeExamples = require
npm install three --save
然后是贴官方代码，需要修改的地方主要是window.innerWidth改为dom元素的container.clientWidth，添加this
详细代码如下
1.官方代码引入
import * as THREE from '../build/three.module.js';
import { OrbitControls } from './jsm/controls/O
用到的知识点只要有三维几何体BoxGeometry、材质、纹理贴图、PlaneGeometry、CylinderGeometry，以及BSP的二元操作等。在使用Vue引入threejs中，我采用的方法是直接在index.html中引用。
初次尝试，代码写的臃肿杂乱，不过比较适合刚入门的小伙伴，后续我也会将样例发布到云服务器上，可供大家在线预览。有不足之处欢迎指出，下方评论留言。大神请略过。。。
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
5. 创建 Three.js 几何体和材质：
const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
const cube = new THREE.Mesh(geometry, material)
6. 将几何体添加到场景中：
scene.add(cube)
7. 渲染场景：
renderer.render(scene, camera)
以上就是在 Vue3 中使用 Three.js 的基本步骤。