微信小程序 加载 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>
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 模型相关推荐
- 微信小程序 加载3D模型
技术栈:Three.js 插件:ThreeX 要求:模型格式GLB 需要挂载在服务器或者是个链接都可以 文件目录: jsm是本地依赖包 代码: wxml <canvas id=" ...
- php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
- HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法
微信小程序加载更多和点击查看更多的实现方法 发布时间:2020-12-31 11:01:19 来源:亿速云 阅读:126 作者:小新 这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方 ...
- 微信小程序加载 FengMap地图
实现微信小程序加载FengMap地图,主要通过小程序<web-view>组件的src属性的外链方式加载,如<web-view src="https://fengmap.co ...
- 【Threejs 微信小程序】小程序加载外部模型后对模型进行平移旋转操作
一.效果展示 需要实现的功能,对已经加载进小程序里的模型进行沿着xyz轴方向去旋转和平移. 如下图的效果: 点击底部的按钮,对模型进行平移和旋转操作. 二.方法描述 关于平移和旋转的方法 比如沿着 Y ...
- 微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容 一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
- 微信小程序加载百度地图
1:申请百度地图服务的ak,(个人感觉浏览器和小程序类型没区别,甚至浏览器比小程序更好) 2:配置地图服务,微信小程序开发平台,设置开发设置 3:小程序里添加地图服务的js文件bmap-wx.min. ...
- 有效解决微信小程序加载视频[渲染层网络层错误] Failed to load media
问题1,小程序的视频一般都是放在网络上的,没谁能把视频放本地把,所以在小程序视频插件在加载视频的时候,就会出现如下错误:[渲染层网络层错误] Failed to load media wxml加载视频 ...
- 微信小程序 加载中 动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 效果图: 代码: <view class="line"><image s ...
- 微信小程序 加载 HTML 标签
肯定有小伙伴遇到过这个问题:加载的数据是一堆HTML 标签这就尴尬了,因为小程序没有提供 webview 来加载这些 HTML.但是不用慌,小程序不提供我们可以自己造个新轮子,自己造不出新轮子咱们找到 ...
最新文章
- uniapp原生子窗体(弹出层为例子)
- 不只是让利百亿,天猫618揭示了哪些新零售趋势?
- 【黑金原创教程】【FPGA那些事儿-驱动篇I 】【实验一】流水灯模块
- 每秒处理请求数和并发的关系
- oracle两表同步java代码,利用DBLink+JOB实现两个Oracle数据库之间的数据同步
- 计算机组成原理_在线作业_2,计算机组成原理_在线作业_2讲述.docx
- jQuery中的text()、html()和val()以及innerText、innerHTML和value
- BZOJ 1012: [JSOI2008]最大数maxnumber(线段树)
- symantec 操作 重叠vo_无关收购 谈谈赛门铁克的产品策略思路
- asp服务器组件安装包,ASP服务器组件
- matlab画半球面,Matlab 绘制3D半球
- python期末项目书怎么写_自己写了一部书怎么出版
- 一不小心,老司机又翻车了
- 电力企业信息化系统之调度信息报送系统整体解决方案
- 心语收集12:我以为要是唱的用心良苦,你就会对我多点在乎
- 十七、String类型常用方法(二)
- Hdu 1303 Doubles
- c# owc11 双Y轴
- 华为hcia题库有哪些内容?华为HCIA认证考试多少分及格?
- 六大场景,看懂声纹识别技术怎样“抗疫防疫” 小快
热门文章
- ORacle查询时显示同义词转换不再有效
- Photoshop的安装教程
- 刘涛入职阿里,年薪超过欧阳娜娜!揭秘阿里巴巴的明星员工和职级薪资!
- matlab怎么表示分块矩阵,急求一个测量矩阵采用分块多项式矩阵时怎样引用的代码!!!...
- Linux中巧用zip命令压缩和解压缩文件
- 北通手柄连接电脑没反应_北通手柄连接电脑教程
- CSS3(三)Animation 入门详解
- excel删除无尽空白行_批量删除空白行其实很简单,这3中方法都能快速搞定,简单易学...
- Kubernetes 健康检查之 livenessProbe/readinessProbe
- 推荐英语学习几本好书