第一步准备项目前提确保你的小程序项目已安装threejs-miniprogram# 在项目根目录执行 npm install threejs-miniprogram # 然后在微信开发者工具 → 工具 → 构建 npm新建 / 替换pages/index下的 3 个文件第二步index.wxml仅需一个 Canvas!-- 必须加 typewebgl小程序 3D 渲染核心 -- canvas typewebgl idcube-canvas stylewidth: 100%; height: 100vh; /第三步index.wxss极简样式/* 去掉默认边距让 Canvas 占满屏幕 */ page { margin: 0; padding: 0; width: 100%; height: 100vh; }第四步index.js核心代码逐行注释// 引入小程序版 Three.js 核心方法 import { createScopedThreejs } from threejs-miniprogram; Page({ data: {}, // 页面渲染完成后初始化小程序生命周期 onReady() { this.initThreeJS(); }, // 初始化 Three.js 核心逻辑 initThreeJS() { // 1. 获取小程序 Canvas 节点关键小程序特有 const query wx.createSelectorQuery().in(this); query.select(#cube-canvas).node((res) { // 容错防止 Canvas 获取失败 if (!res || !res.node) { wx.showToast({ title: Canvas初始化失败, icon: none }); return; } const canvas res.node; // 2. 创建小程序专属 Three.js 实例核心区别网页版不用这步 const THREE createScopedThreejs(canvas); // 3. 适配高清屏小程序/手机必备 const dpr wx.getWindowInfo().pixelRatio; canvas.width canvas.width * dpr; canvas.height canvas.height * dpr; // 核心 5 件套和网页版完全一致 // ① 场景3D 容器 const scene new THREE.Scene(); scene.background new THREE.Color(0xf0f0f0); // 浅灰色背景 // ② 相机透视相机 const camera new THREE.PerspectiveCamera( 75, canvas.width / canvas.height, // 宽高比 0.1, 1000 ); camera.position.z 5; // 相机后移能看到立方体 // ③ 渲染器绑定 Canvas 节点 const renderer new THREE.WebGLRenderer({ canvas: canvas, antialias: true // 抗锯齿 }); renderer.setSize(canvas.width / dpr, canvas.height / dpr); // 适配 dpr // ④ 创建立方体几何 材质 const geometry new THREE.BoxGeometry(1, 1, 1); // 立方体几何 const material new THREE.MeshStandardMaterial({ color: 0x3498db, // 蓝色 metalness: 0.2, // 轻微金属质感 roughness: 0.4 // 哑光 }); const cube new THREE.Mesh(geometry, material); // 组合成物体 scene.add(cube); // 加到场景 // ⑤ 灯光必加否则立方体黑的 const ambientLight new THREE.AmbientLight(0xffffff, 1); // 环境光 scene.add(ambientLight); const directionalLight new THREE.DirectionalLight(0xffffff, 0.8); // 方向光 directionalLight.position.set(3, 3, 3); // 灯光位置 scene.add(directionalLight); // 动画循环小程序版适配 const animate () { // 旋转立方体 cube.rotation.y 0.01; cube.rotation.x 0.01; // 渲染场景相机 renderer.render(scene, camera); // 小程序版 requestAnimationFrame绑定 Canvas canvas.requestAnimationFrame(animate); }; // 启动动画 animate(); // 页面卸载时销毁资源小程序性能优化 this.onUnload(() { renderer.dispose(); // 销毁渲染器释放内存 }); }).exec(); } });第五步运行效果微信开发者工具中编译项目你会看到小程序页面全屏显示浅灰色背景一个蓝色立方体自动旋转立方体有光影立体感边缘光滑完全适配手机屏幕。