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 --> <canvas class='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的id mSence: 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(" 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 返回的请求ID this.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路径引入错误，我特意检查了，代码提示路径都是正确的）

谁能解释？？？？