新版本three.js在vue项目中的引入

说明

之前的笔记，引入three.js相关包那是相当的麻烦，各种引入方式和配置，还有各种报错和提示。
新版本的three.js对其变量的引入和暴露进行了优化，可以很方便的从jsm文件夹下引入相关包了。
本人从npm上下载安装的three包（注意不是three-js，毕竟这玩意4年没更新了）：
https://www.npmjs.com/package/three

一、原版本例子

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)

再也不用担心七七八八的配置了，真棒！！