uniapp邪门事件

很久之前在这篇《THREEJS 在 uni-app 中使用（微信小程序）》：THREEJS 在 uni-app 中使用（微信小程序）_uni-app_帶刺的小葡萄-华为开发者空间 中学到了如何在uniapp的微信小程序里接入three.js的3d模型

由于小程序自身很多不兼容原因，博主建议去用GitHub一个大佬改写的js库来引入适合小程序的three.js，于是我去照搬模仿，然后手动检查了一下，确实可以正常运行

很简单，就是去GitHub - yannliao/threejs-example-for-miniprogram: 这是一个 three.js 在微信小程序里的使用示例
这个地方，把这两个工具目录拿到自己的目录

然后在代码里引入就好，源代码（已测试过正常运行的）

<template><view><!-- 要在微信小程序使用three.js必须要用canvas画布来实现 --><!-- 一定要写上canvas-id='canvas的id'，这是微信小程序的必须条件 --><!-- 还有一定要设置宽高，这里可以用动态的js获取屏幕大小 --><!-- type="webgl"是微信小程序特有的属性，它指定了<canvas>元素应该使用WebGL染上下文,WebGL是一种在网页浏览器中渲染高性能3D图形的API --><canvasclass='scene' id='scene' canvas-id="scene"  type="webgl":style="'width:'+mSceneWidth+'px; height:'+mSceneHeight+'px;'" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas></view>
</template><script>// 导入 threejs 的相关依赖// 适配微信小程序的 three.js 包import * as THREE from '../../libs/three.weapp.js'// 控制器：这个控制器允许用户通过鼠标或触摸操作来围绕一个对象进行旋转、缩放和平移。import { OrbitControls } from '../../jsm/controls/OrbitControls.js'// GLTF加载器：这个加载器用于加载GLTF格式的3D模型import GLTF from '../../jsm/loaders/GLTFLoader.js'export default {data() {return {mSceneWidth: 0, // 手机屏幕宽度mSceneHeight: 0, // 手机屏幕高度worldFocus: null, // 世界焦点（模型放置，相机围绕的中心）mCanvasId: null, //canvas的idmSence: null, //three.js的场景对象mCamera: null, //three.js的摄像机对象renderAnimFrameId: null, // 渲染帧动画id};},// 页面加载时onLoad(option){// 获取手机屏幕宽高（作为相机、渲染器大小的依据单位）this.mSceneWidth = uni.getWindowInfo().windowWidth;this.mSceneHeight = uni.getWindowInfo().windowHeight;// 设置世界中心（作为相机的初始位置的坐标单位）this.worldFocus = new THREE.Vector3(0, 0, 0);},// 页面加载完毕后onReady(){// 获取 canvas 元素, 初始化 Three// uni.createSelectorQuery()是微信小程序提供的一个API，用于创建一个选择器查询对象，这个对象可以查询页面上所有的元素信息// .select('#scene'): 选择页面上ID为scene的元素// .node(): 获取选择的节点信息。这个方法用于获取页面元素的详细信息，如位置、尺寸等。// .exec((res) => { ... }): 执行查询，并在查询完成后执行回调函数。res参数可以访问查询到的元素信息。// 由于.select('#scene') 只选择了一个元素，所以res数组中只有一个元素，可以通过 res[0] 来访问这个元素的信息。uni.createSelectorQuery().select('#scene').node().exec((res) => {// 获取 canvasId// 在微信小程序中，每个<canvas>元素都有一个唯一的 canvas-id，用于标识这个canvas，Three.js需要知道它将要渲染到哪一个canvas上this.mCanvasId = res[0].node._canvasId;// 注册画布// THREE.global.registerCanvas 是Three.js提供的一个方法，用于将小程序的canvas元素与Three.js的渲染环境对接// 这是必须的步骤，因为小程序的 canvas 与浏览器中的 canvas 在渲染机制上有所不同const mCanvas = THREE.global.registerCanvas(this.mCanvasId, res[0].node);// 开始初始化this.init(mCanvas);});},// 页面卸载时onUnload() {// 清理渲染帧动画THREE.global.canvas && THREE.global.canvas.cancelAnimationFrame(this.renderAnimFrameId);// 清理canvas对象THREE.global.unregisterCanvas(this.mCanvasId);console.log("Unload");},methods: {// 初始化init(canvas) {//--------------------------------------3大基础要素--------------------------------------------// 创建场景this.mScene = new THREE.Scene();this.mScene.background = new THREE.Color("#e6e6e6"); // 场景背景颜色// 创建摄像机this.mCamera = new THREE.PerspectiveCamera(75, //相机视角this.mSceneWidth / this.mSceneHeight, //宽高比 0.1, //近平面距离100  //远平面距离);this.mCamera.position.set(0, 0, 20);  // 相机所处的位置this.mCamera.lookAt(this.worldFocus); // 可设置可不设置，一般默认就是看向原点// 创建渲染器const renderer = new THREE.WebGLRenderer({ antialias: true, //是否启用抗锯齿，减少图像中边缘的锯齿状外观，使图像看起来更平滑alpha: true ,    //允许你渲染出具有透明背景或其他透明效果的场景});renderer.setSize(this.mSceneWidth, this.mSceneHeight); //  设置渲染器也是手机屏幕的大小//---------------------------------------------------------------------------------------------// 创建光线const light1 = new THREE.HemisphereLight(0xffffff, 0x444444); // 半球光（天空颜色，地面颜色，光照强度）light1.position.set(0, 20, 0);this.mScene.add(light1);const light2 = new THREE.DirectionalLight(0xffffff); // 平行光（颜色， 光照强度）light2.position.set(0, 0, 20);this.mScene.add(light2);// 创建控制器，传2参数（摄像机对象，渲染器创建的canvas的DOM元素）const controls = new OrbitControls(this.mCamera, renderer.domElement);controls.target.set(this.worldFocus.x, this.worldFocus.y, this.worldFocus.z);// 摄像机围绕旋转的中心controls.enablePan = false; // 禁止摄像机平移controls.enableDamping = true; // 设置阻尼惯性，需要在 update 调用controls.dampingFactor = 0.03; // 设置阻尼系数（越小滑得越久）controls.autoRotate = true // 让它自动转// 创建 glb 加载器let GLTFloader = GLTF(THREE)const loader = new GLTFloader();// 异步加载模型// 微信小程序不允许加载本地模型，必须通过 https 获取loader.load("https://threejs.org/examples/models/gltf/Stork.glb", (gltf) => {const model = gltf.scene;model.position.set( 0, 0, 0 );// 设置模型位置model.scale.set( 0.1, 0.1, 0.1 );// 设置模型大小this.mScene.add( model );// 模型加载到场景后，开启渲染render();});// 渲染（闭包）var render = () => {// 帧动画//canvas.requestAnimationFrame是一个浏览器提供的API，告诉浏览器希望执行一个动画，并且请求在下次重绘之前调用指定的回调函数来更新动画//this.renderAnimFrameId 保存了上一次 requestAnimationFrame 返回的请求IDthis.renderAnimFrameId = canvas.requestAnimationFrame(render);//光源跟随相机var vector = this.mCamera.position.clone(); //获取当前相机的位置，这样可以对vector进行修改而不会影响到原始的相机位置light2.position.set(vector.x,vector.y,vector.z);//这样做是为了让物体随着相机的视角变化、阴影也变化// 控制器更新//controls.enabled是判断控制器是否开启状态if (controls.enabled) {// 这个方法是当有动画、重新渲染这些操作，控制器可以重新更新controls.update();}// 渲染场景// renderer.render（场景对象，摄像机对象）renderer.render(this.mScene, this.mCamera);};},// 触摸开始touchStart(e){//这是是微信小程序中使用 Three.js 时的一个特定函数//touchStart(e)使用THREE.global.touchEventHandlerFactory来生成一个处理触摸开始事件的函数，并传入事件对象 e。//也就是传入2参数给THREE.global.touchEventHandlerFactory：（'使用canvas操作'，'是什么事件触发的？'）THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e)},// 触摸移动中touchMove(e){THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e)},// 触摸结束touchEnd(e){THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e)},}}
</script><style lang="scss">
</style>

结果，很久没用，我现在想在另一个项目引入的时候，一样的流程，给老子疯狂报错！！！！

21:07:15.960 "Vector3" is not exported by "../../../../../C:/Users/岑梓铭/Documents/HBuilderProjects/自学/utils/libs/three.weapp.js", imported by "../../../../../C:/Users/岑梓铭/Documents/HBuilderProjects/自学/utils/jsm/controls/OrbitControls.js".
21:07:15.971 at utils/jsm/controls/OrbitControls.js:17:1
21:07:15.983   15:   TOUCH,
21:07:15.995   16:   Vector2,
21:07:16.006   17:   Vector3,
21:07:16.019         ^
21:07:16.029   18:   global as window
21:07:16.040   19: } from "../../libs/three.weapp.js";

就nm离谱，人家大佬写得好好的js库，我动都没动一点，一个项目可以用，另一个不能（不是path路径引入错误，我特意检查了，代码提示路径都是正确的）

谁能解释？？？？