持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天， 点击查看活动详情

上一篇笔记《VUE中使用three.js>通过OrbitControls控制模型>通过GLTFLoader导入外部模型》( juejin.cn/post/711223… )

引入three.js相关包那是相当的麻烦，各种引入方式和配置，还有各种报错和提示。

新版本的three.js对其变量的引入和暴露进行了优化，可以很方便的从jsm文件夹下引入相关包了。无需进行一些七七八八的配置，详见本文。

需要注意的是，从npm上下载安装的three包，不是three-js，毕竟这玩意4年没更新了，是如下包：

www.npmjs.com/package/thr…

一、新老版本引入使用对比

1、原版本例子

引入three.js、导入OrbitControls的使用：

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"
2、新版本例子
当前使用新three.js版本号：
"three": {
      "version": "0.112.1",
      "resolved": "https://registry.npmjs.org/three/-/three-0.112.1.tgz",
      "integrity": "sha512-8I0O74hiYtKl3LgDNcPJbBGOlpekbcJ6fJnImmW3mFdeUFJ2H9Y3/UuUSW2sBdjrIlCM0gvOkaTEFlofO900TQ=="
引入three.js、导入OrbitControls的使用：
import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
controls = new OrbitControls(camera, renderer.domElement)
再也不用担心七七八八的配置了，真棒！！
二、简单使用步骤
通过OrbitControls控制模型>通过GLTFLoader导入外部模型
1、安装three包
npm install three --save // 安装最新版本
2、导入THREE对象
import * as THREE from 'three' // 必须用 * as 否则找不到对象
3、引用OrbitControls.js进行旋转缩放拖动控制
从jsm中引入包
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
创建OrbitControls对象予以控制
controls = new OrbitControls(camera, renderer.domElement)
4、通过GLTFLoader导入外部模型
从jsm中引入包
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
使用GLTFLoader加载新模型
let loader = new GLTFLoader()
loader.load('/static/3d/' + name + '.glb', function (obj) {
  obj.scene.name = name
  if (scene !== null) {
    scene.add(obj.scene)
}, function (xhr) {
  // console.log(xhr.loaded, 'loading')
  console.log((xhr.loaded / xhr.total * 100) + '% loaded')
}, function (error) {
  console.error(error, 'load error!')