1500字范文 > 【微信小程序】Three.js 加载3d模型

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

时间：2021-04-13 00:00:58

微信小程序实现从外部加载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 地址：/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

<view style="height: 50px"></view><canvas type="webgl" id="webgl" style="width: 100%; height: 450px;"></canvas><canvas type="webgl" id="webgl" style="width: 100%; height: 300px;"></canvas>

② 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('/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);}})