【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 
			//获取webgl
			uni.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);
				//scene
				scene = 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无积分下载：点击查看