1、解決問題

uniapp 導(dǎo)入3d模型，在微信小程序端運行。只支持在微信小程序端使用，若要支持 h5 和 APP端，可以查看這篇，點擊這里
只導(dǎo)入了3d模型，未設(shè)置讓模型動。

2、導(dǎo)入模型格式

glb 格式

3、實現(xiàn)效果圖

4、步驟

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

（2）導(dǎo)入文件
需要導(dǎo)入 three.js 和 gltf-loader.js 文件
從下載好的壓縮包里復(fù)制目錄 threejs-miniprogram-master\example\miniprogram_npm\threejs-miniprogram 的 [index.js] 文件
以及 threejs-miniprogram-master\example\loaders 里的 [gltf-loader.js] 文件

（3）代碼

① 設(shè)置畫布
② 引入 threejs-miniprogram 和 gltf-loader 文件
③ onReady 里獲取webgl
④ 3d 初始化（設(shè)置相機(jī)、設(shè)置光照、導(dǎo)入3d模型 、render 渲染）
⑤ 設(shè)置動畫

index.vue

<template>
<!-- 設(shè)置畫布 -->
<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相關(guān)
	
	let camera, scene, renderer, model; //定義變量： 攝像機(jī)(camera) 場景(scene) 渲染器(renderer) 模型(model)
	let pagestatus = 0; //函數(shù)返回
	

	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();

				//設(shè)置相機(jī)
				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();

				// 設(shè)置光照
				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);

				// 導(dǎo)入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、總結(jié)

源碼下載
csdn無積分下載：點擊查看文章來源地址http://www.zghlxwxcb.cn/news/detail-404030.html

到了這里，關(guān)于【uni-app】只支持在微信小程序運行的 導(dǎo)入外部3d模型的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！