很久之前在这篇《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("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 返回的请求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路径引入错误，我特意检查了，代码提示路径都是正确的）
谁能解释？？？？
