记录--uniapp微信小程序引入threeJs并导入模型
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
前言
1 2 3 | 我的需求是使用uniapp写微信小程序,在小程序中使用threeJs就行了,目前暂不考虑兼容app什么的。 1.引入小程序版的threejs库实现 2.使用webview实现(推荐) |
重点
我的建议是使用这个库
https://github.com/deepkolos/three-platformize
为什么?我试了uniapp推荐的和threejs-miniprogram这个小程序官方库,都加载不出来我的obj模型。所有我推荐不要用obj模型最好,挺多都支持GLTF模型的,但是我不能改。
使用three-platformize加载obj模型的案例:
核心代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | html: < canvas type="webgl" id="webgl" style="width: 100vw; height: 100vh;" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" /> script: < script > import * as THREE from 'three-platformize'; import { WechatPlatform } from 'three-platformize/src/WechatPlatform'; import { OBJLoader } from 'three-platformize/examples/jsm/loaders/OBJLoader'; import { GLTFLoader } from 'three-platformize/examples/jsm/loaders/GLTFLoader'; import {OrbitControls} from 'three-platformize/examples/jsm/controls/OrbitControls'; export default { data() { return { canvas:null, camera:null, scene:null, renderer:null, model:null, controls:null, loopIndex:null } }, onLoad() { }, methods: { async init() { const { canvas }= await this.getCanvas(); this.canvas = canvas; const platform = new WechatPlatform(canvas); // webgl canvas platform.enableDeviceOrientation('game'); // 开启DeviceOrientation THREE.PLATFORM.set(platform); this.platform = platform; this.renderModel(); }, //获取画布 async getCanvas(delay = 200) { return new Promise((resolve, reject) => { const t = setTimeout(() => { clearTimeout(t); uni.createSelectorQuery().in(this) .select('#webgl') .fields({ node: true }) .exec((res) => { console.log('res',res) if (res && res[0] && res[0].node) { const canvas = res[0].node; resolve({ canvas }); } else { reject("获取canvas失败"); } }); }, delay); }); }, renderModel () { this.camera = new THREE.PerspectiveCamera(45, this.canvas.width / this.canvas.height, 0.25, 100); this.camera.position.set(- 5, 3, 10); this.camera.lookAt(new THREE.Vector3(0, 2, 0)); this.scene = new THREE.Scene(); this.scene.background = new THREE.Color(0xe0e0e0); this.scene.fog = new THREE.Fog(0xe0e0e0, 20, 100); this.clock = new THREE.Clock(); // lights var light = new THREE.HemisphereLight(0xffffff, 0x444444); light.position.set(0, 20, 0); this.scene.add(light); // 改变外壳颜色 var AmbientLight = new THREE.AmbientLight(0x815800); // 环境光 this.scene.add(AmbientLight); // 平行光 light = new THREE.DirectionalLight(0xffffff); light.position.set(0, 20, 10); this.scene.add(light); // // ground // var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2000, 2000), new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false })); // mesh.rotation.x = - Math.PI / 2; // this.scene.add(mesh); // var grid = new THREE.GridHelper(200, 40, 0x000000, 0x000000); // grid.material.opacity = 0.6; // grid.material.transparent = true; // this.scene.add(grid); // model var loader = new OBJLoader(); loader.load('http://localhost:8888/obj3/file.obj', (obj) => { console.log("obj+=") console.log(obj) // console.log(this.model) obj.position.set(0, -2, 0);//模型摆放的位置 obj.scale.set(0.2, 0.2, 0.2); // this.model = obj; this.scene.add(obj); }, undefined, function (e) { console.log("模型加载错误") console.error(e); }); // var loader = new GLTFLoader(); // loader.load('https://dtmall-tel.alicdn.com/edgeComputingConfig/upload_models/1591673169101/RobotExpressive.glb', (gltf) => { // this.model = gltf.scene; // this.scene.add(this.model); // }, undefined, function (e) { // console.error(e); // }); // var geometry = new THREE.BoxGeometry( 5, 5, 5 ); // var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // var mesh = new THREE.Mesh( geometry, material ); // this.scene.add(mesh); this.renderer = new THREE.WebGLRenderer({antialias: true }); this.renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio); this.renderer.setSize(this.canvas.width, this.canvas.height); //this.renderer.outputEncoding = true; this.renderer.gammaFactor = 2.2; this.controls = new OrbitControls(this.camera, this.renderer.domElement ); this.camera.position.set( 5, 5, 10 ); this.animate(); }, animate() { this.loopIndex = this.canvas.requestAnimationFrame(this.animate); this.renderer.render(this.scene, this.camera); this.controls.update(); }, touchStart(e) { this.platform.dispatchTouchEvent(e); }, touchMove(e) { this.platform.dispatchTouchEvent(e); }, touchEnd(e) { this.platform.dispatchTouchEvent(e); } }, mounted() { this.$nextTick(()=> { this.init(); }); } } </ script > |
上面的案例中使用了两个模型,一个obj模型,obj模型的地址是自己写的本地服务器地址,需要自己配置,GLTF模型地址是网络地址,可以把注释解开查看。
注意点
1.加载外部模型与threeJs官网api是一致的
2.使用此方法加载外部模型,可能在真机调试时遇到模型不展示,或者微信闪退的情况(原因未知)
webview实现引入threejs库
效果图
实现:
1.使用vue实现threejs导入obj模型(pc端可完美实现),
2.在webview中引入相应的模型展示地址,
完结,就这两步即可,但是我是动态加载,所以在加载模型的时候,你需要在小程序端传值给pc端,让pc端加载相应的模型,这里就只需要用get在地址栏中传参就行了。
以下两个方法可能会用到:
1.模型大小自适应
1 2 3 4 5 6 7 8 9 10 | setScaleToFitSize (obj) { const boxHelper = new THREE.BoxHelper(obj); boxHelper.geometry.computeBoundingBox(); const box = boxHelper.geometry.boundingBox; const maxDiameter = Math.max((box.max.x - box.min.x), (box.max.y - box.min.y), (box.max.z - box.min.z)); const scaleValue = camera.position.z / maxDiameter; obj.position.set(0, -10, 0);//模型摆放的位置 obj.scale.set(scaleValue, scaleValue, scaleValue); scene.add(obj); }, |
2.禁止小程序展示webview时候向下拉动:
在mounted
中添加:
1 2 3 | document.body.addEventListener('touchmove', function (e) { e.preventDefault(); }, { passive: false }); |
本文转载于:
https://blog.csdn.net/hzqzzz/article/details/126428029
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
分类:
uni-app学习笔记
, Three.js学习笔记
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)