【微信小程序】Three.js 加载3d模型

2024-03-11 16:55| 来源: 网络整理| 查看: 265

微信小程序实现从外部加载3d模型

1.3d模型的几种格式？ 2.怎样加载3d模型？ 3.总结（贴了自己写的整个项目github地址）

1.模型的格式

小程序支持从外部加载3d模型的几种格式有： a.obj格式 b.gltf格式 c.fbx格式就列举这几种

2.加载3d模型

用 gltf 格式的模型 gltf 3d模式格式有两种： gltf是一个基于json的文本文件，如纹理贴图和二进制网格数据； glb是二进制版本，通常较小且独立，但不易编辑。

（1）首先文件下载适配微信小程序的 three.js 地址：https://github.com/wechat-miniprogram/threejs-miniprogram

（2）导入文件需要导入three.js 和 gltf-loader.js （加载模型）从下载好的压缩包里复制目录 threejs-miniprogram-master\example\miniprogram_npm\threejs-miniprogram 的 [index.js] 文件以及 threejs-miniprogram-master\example\loaders 里的 [gltf-loader.js] 文件

（3）写代码 ① index.wxml

② inde.js 重点：导入两个文件夹，里面分别有文件 three.js 和 gltf-loader.js（导入外部模型）需要设置场景里的相机、光线以及渲染器

import { createScopedThreejs } from 'threejs-miniprogram'; import { registerGLTFLoader } from '../loaders/gltf-loader'; const app = getApp(); var camera, scene, renderer, model; var requestAnimationFrame; // 动画回调函数 Page({ data: {}, onLoad: function () { let that = this; var query = wx.createSelectorQuery(); query.select('#webgl').node().exec((res) => { var canvas = res[0].node; // 设置背景透明 var gl = canvas.getContext('webgl', { alpha: true }); if (canvas != undefined) { // canvas.width 和canvas.style都需要设置，否则无法显示渲染 canvas.width = canvas._width; canvas.height = canvas._height; requestAnimationFrame = canvas.requestAnimationFrame; that.init(canvas); } }); }, init: function(canvas){ let that = this; const THREE = createScopedThreejs(canvas) registerGLTFLoader(THREE) //设置相机 camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 0.25, 100); camera.position.set(- 5, 3, 10); camera.lookAt(new THREE.Vector3(0, 2, 0)); scene = new THREE.Scene(); //设置光线 var light = new THREE.HemisphereLight(0xffffff, 0x444444); light.position.set(0, 20, 0); scene.add(light); light = new THREE.DirectionalLight(0xffffff); light.position.set(0, 20, 10); scene.add(light); //加载外部模型 var loader = new THREE.GLTFLoader(); loader.load('https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb', function (gltf) { model = gltf.scene; scene.add(model); }, undefined, function (e) { console.error(e); }); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(canvas.width, canvas.height); //调用动画 that.animate(); }, animate:function(){ let that = this; requestAnimationFrame(that.animate); renderer.render(scene, camera); } }) 3.总结

整个实现过程，下载three.js 和 gltf-loader.js ，两个文件放自己项目里，在代码中设置好场景参数，导入模型即可。获取项目方式：

（1）GitHub：github地址

（2）去公众号【牛哞哞杂记】，回复 threejs

（3）csdn：点击这里下载

评论区小伙伴出现问题的地方整理： 2021.4.14 ① 真机调试不显示模型。微信小程序官方有回复，真机调试不支持3d模型，预览可以正常显示，详情查看

② 换模型后，出现报错 VM244:1 TypeError: Cannot read property ‘URL’ of undefined 评论区有大佬分享，是模型贴图，微信小程序暂不支持，可查看 https://blog.csdn.net/geshu12138/article/details/105862436

③ Unsupported asset. glTF versions >=2.0 are supported. Use LegacyGLTFLoader instead. 评论区有大佬回复：不是模型的问题，换个低版本可以加载。详情查看

④ 直接导入小程序，用手机预览，显示空白。是因为没配置域名，可以在手机上开启调试模式，点击这里

若有其他问题，可评论区贴出来，报错详情或者截图也可添加v x：niumoumou111

小白一个，欢迎指出问题 ~~

【本文地址】

公司简介

联系我们