【uni-app】只支持在微信小程序运行的导入外部3d模型

1、解决问题

uniapp 导入3d模型，在微信小程序端运行。只支持在微信小程序端使用，若要支持 h5 和 APP端，可以查看这篇，点击这里
只导入了3d模型，未设置让模型动。

2、导入模型格式

glb 格式

3、实现效果图

4、步骤

（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）代码

① 设置画布
② 引入 threejs-miniprogram 和 gltf-loader 文件
③ onReady 里获取webgl
④ 3d 初始化（设置相机、设置光照、导入3d模型、render 渲染）
⑤ 设置动画

index.vue

<template>
<!-- 设置画布 -->
<canvas type="webgl" id="webgl" style='width:100%;height:250px;background-color:rgb(255, 255, 255,1); margin: aotu 0;'>
</canvas></template><!-- 只能在微信小程序端运行 -->
<script>// 引入文件夹import {createScopedThreejs} from '../../wxcomponents/miniprogram_npm/threejs-miniprogram'// 引入文件import {registerGLTFLoader} from '../../wxcomponents/loaders/gltf-loader'let app = getApp();let canvaWidth = 0; //画布宽let canvaHeight = 0; //画布高let canvas, THREE; //3d相关let camera, scene, renderer, model; //定义变量： 摄像机(camera) 场景(scene) 渲染器(renderer) 模型(model)let pagestatus = 0; //函数返回export default {data() {return {}},onLoad() {},onReady() {//在小程序使用// #ifndef   APP||H5 //获取webgluni.createSelectorQuery().select('#webgl').node().exec((res) => {canvas = res[0].node;THREE = createScopedThreejs(canvas);canvaWidth = 600;canvaHeight = 400;this.initCanva(canvas);})// #endif },methods: {/*** 3d 初始化* @param {*} canvas */initCanva: function(canvas) {let that = this;registerGLTFLoader(THREE);//scenescene = new THREE.Scene();//设置相机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);// 导入3d模型  let loader = new THREE.GLTFLoader(); //badminton.zip loader.load('https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb', function(gltf) {model = gltf.scene;scene.add(model);},function() {return pagestatus;},undefined,function(e) {console.error("加载模型出错：", e);});//render 渲染renderer = new THREE.WebGLRenderer({antialias: true});renderer.setPixelRatio(2);renderer.setSize(canvas.width, canvas.height);that.animate();//画布渲染},// 画布渲染animate: function() {let that = this;if (renderer !== null && scene !== null && camera !== null) {canvas.requestAnimationFrame(that.animate);renderer.render(scene, camera);}},}}
</script>

5、总结

源码下载
csdn无积分下载：点击查看