微信小程序加载 fbx 模型-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序加载 fbx 模型。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

three.js在微信小程序端加载3D动画fbx模型的代码。得到了fbx模型的http链接，使其加载在小程序端，都是适配小程序版本的代码其中three_new.js是小程序版的3D加载库文件 FBXLoader_new是小程序版本的fbx模型的加载器 inflate.min.js是小程序版的压缩解压库 model.js里面的export函数可以直接调用，把fbx模型的http链接还有相关的dom节点传进去就可以加载啦~

微信小程序实现从外部加载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] 文件

<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>

文章来源地址https://www.toymoban.com/news/detail-484463.html

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

到了这里，关于微信小程序加载 fbx 模型的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！