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

微信小程序实现从外部加载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 地址：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）写代码
① 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('https://threejs.org/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);
  }
})

3.总结

整个实现过程，下载three.js 和 gltf-loader.js ，两个文件放自己项目里，在代码中设置好场景参数，导入模型即可。
获取项目方式：

（1）GitHub：github地址

（2）去公众号【牛哞哞杂记】，回复 threejs

（3）csdn：点击这里下载

评论区小伙伴出现问题的地方整理： 2021.4.14
① 真机调试不显示模型。
微信小程序官方有回复，真机调试不支持3d模型，预览可以正常显示，详情查看

② 换模型后，出现报错 VM244:1 TypeError: Cannot read property ‘URL’ of undefined
评论区有大佬分享，是模型贴图，微信小程序暂不支持，可查看 https://blog.csdn.net/geshu12138/article/details/105862436

③ Unsupported asset. glTF versions >=2.0 are supported. Use LegacyGLTFLoader instead.
评论区有大佬回复：不是模型的问题，换个低版本可以加载。详情查看

④ 直接导入小程序，用手机预览，显示空白。
是因为没配置域名，可以在手机上开启调试模式，点击这里

若有其他问题，可评论区贴出来，报错详情或者截图
也可添加v x：niumoumou111

小白一个，欢迎指出问题 ~~