Sketchfab模型在ThingJS上的应用
近日,需要在网页上做一个纯H5的、基于三维场景的应用,网上搜了下,发现ThingJS平台(https://www.thingjs.com/)是个不错的选择......
ThingJS 是一个物联网3D可视化PaaS平台,基于WebGL,兼容各种浏览器及移动设备,零门槛、高效率、低成本开发各类3D应用。开发看起来也挺简单,网站还提供了三维场景搭建工具,叫模模搭的,很方便。
不过呢,在3D场景构建过程中,总是需要各种3D模型,虽然ThingJS网站提供了很多模型,但总还有不够用的。又搜了一下,发现Sketchfab网站( https://sketchfab.com/ )是个不错的选择,能免费下载的好像有10多万呢,而且该网站提供gltf模型格式下载,是纯H5的,正好能在ThingJS网站使用,于是尝试了一下,果然可用!而且效果不错!过程也很简单,记录如下:
下载模型
首先,在Sketchfab网站上找一个需要的模型资源。
找到一个汽车模型,如下图位置,点击下载gltf格式。(来源:https://sketchfab.com/3d-models/triumph-tr4-0e249864d1df49818ef2c03c336a934c 作者:freeReef)
注意:下载模型时,需认真阅读使用说明,这里有作品的版权说明。
Creative Commons
Creative Commons,简称CC,中国大陆正式名称为知识共享,台湾正式名称为创用CC。是一个非营利组织,也是一种创作的授权方式。此组织的主要宗旨是增加创意作品的流通可及性,作为其他人据以创作及共享的基础,并寻找适当的法律以确保上述理念。
Creative Commons(知识共享)是一个相对宽松的版权协议。它只保留了几种权利(some rights reserved)。使用者可以明确知道所有者的权利,不容易侵犯对方的版权,作品可以得到有效传播。
作为作者,你可以选择以下1~4种权利组合:
1. 署名(Attribution,简写为BY):必须提到原作者。
2. 非商业用途(Noncommercial,简写为NC):不得用于盈利性目的。
3. 禁止演绎(No Derivative Works,简写为ND):不得修改原作品, 不得再创作。
4. 相同方式共享(Share Alike,简写为SA):允许修改原作品,但必须使用相同的许可证发布。
下载的gltf模型资源是一个zip压缩包,把它解压到文件夹里,如下图,是这个汽车模型的文件目录结构。
上传模型到ThingJS网站
接下来,让我们把模型上传到ThingJS 网站上。在控制台里,找到项目资源,并选择一个我们要进行开发的项目,开始上传刚才的模型资源文件夹。
开发应用
上传成功后,我们就可以进行开发了。进入到在线开发页面,打开项目,我们可以看到,刚才上传的模型资源已经出现在了该项目下。
ThingJS在线开发提供非常便捷的代码块工具,首先我们需要引入模型,可以在这里直接点击生成代码块,在模型地址处,点击左边gltf文件,即可生成模型引用地址,执行后就可以看到效果了。
接下来,我们可以对模型进行开发应用,这里将模型加载到ThingJS官方示例场景中,并让小车移动起来。
示例代码
复制代码到ThingJS平台,即可预览效果。
/*** 说明:使用上传的gltf模型进行应用开发* 注意:下载他人模型时需仔细阅读使用说明,保护作者版权,* 此示例中的模型来源 https://sketchfab.com/3d-models/triumph-tr4-0e249864d1df49818ef2c03c336a934c * 操作:点击按钮* 难度:★★★☆☆*/// 创建App
var app = new THING.App({ url: "models/storehouse" ,skyBox: 'White'
}); app.on('load',function(){// 设置摄像机位置和目标点app.camera.position = [22.936453704722485, 18.04447171101539, 17.25607980689213];app.camera.target = [4.691186527881011, -0.8306817706834637, 4.836893685611984];// 创建Thing var car = app.create({ type: 'Thing', name: 'triumph',// 上传的gltf模型地址 (来源:https://sketchfab.com/3d-models/triumph-tr4-0e249864d1df49818ef2c03c336a934c 作者:freeReef)url: '/uploads/wechat/oLX7p0099om8KZbI6F96lQK_40l0/file/%E6%96%B0%E5%BB%BA%E9%A1%B9%E7%9B%AE1/triumph/scene.gltf', position: [ 0, 0.85, 0], // 模型位置 scale: [0.35, 0.35, 0.35],// 设置模型缩放complete: function () {console.log('thing created: ' + this.id);}});// 创建按钮new THING.widget.Button('方形路径', function () {// 世界坐标系下坐标点构成的数组 关于坐标的获取 可利用「工具」——>「拾取场景坐标」var path = [[0, 0.85, 0],[ 11.556, 0.85, 1.011], [ 11.556, 0.85, 14.111]];car.movePath({orientToPath: true, // 物体移动时沿向路径方向path: path, // 路径坐标点数组time: 5 * 1000, // 路径总时间 毫秒delayTime: 1000, // 延时 1s 执行lerpType: null, // 插值类型(默认为线性插值)此处设置为不插值// 仅当无循环时 有回调函数complete: function (ev) {console.log(ev.object.name + "移动结束")}});})new THING.widget.Button('停止移动', function () {car.stopMoving();});
})
Sketchfab模型在ThingJS上的应用相关推荐
- Three.js加载Sketchfab模型
Sketchfab 的 API 使你能够以编程方式访问网络上最大的 glTF 3D 模型集合. 本文通过一个最小的代码示例向你展示如何: 让你的用户使用 Sketchfab API 进行身份验证 将 ...
- 3d slicer调整窗宽窗位_3D人脸模型月销量上千单,谁在打印,谁在帮打?
原标题:3D人脸模型月销量上千单,谁在打印,谁在帮打? 编辑导读:前段时间,一则"面具可代替人脸解解锁手机"的新闻让人们感觉不寒而栗.如果面具可以代替人脸解锁手机,那么是否也可以完 ...
- 3D模型在网页上显示
3D模型在网页上显示,这绝对是未来的趋势,也是热门.一部"阿凡达"让电影节发生了一次地震,让人们感到3D的时代到来.那么我们IT界呢?如果各位因工作时间繁忙,或者嫌上海世博会人山人 ...
- Django从理论到实战(part50)--使用模型来处理上传的文件
学习笔记,仅供参考,有错必纠 文章目录 使用模型来处理上传的文件 `MEDIA_ROOT`和`MEDIA_URL` 限制文件的扩展名 使用模型来处理上传的文件 在定义模型的时候,我们可以给存储文件的字 ...
- 【炼丹技巧】指数移动平均(EMA)【在一定程度上提高最终模型在测试数据上的表现(例如accuracy、FID、泛化能力...)】
本文中心: 1.指数移动平均(Exponential Moving Average)EMA作用: ema不参与实际的训练过程,是用在测试过程的,相比对变量直接赋值而言,移动平均得到的值在图像上更加平缓 ...
- tensorflow.js在nodejs训练猫狗分类模型在浏览器上使用
目录 本人系统环境 注意事项 前言 数据集准备 处理数据集 数据集初步处理 将每一张图片数据转换成张量数据(tensor) 将图片转换成张量数组的代码和运行效果 将图片的标注转换成张量数据(tenso ...
- 在深度学习模型的优化上,梯度下降并非唯一的选择
如果你是一名机器学习从业者,一定不会对基于梯度下降的优化方法感到陌生.对于很多人来说,有了 SGD,Adam,Admm 等算法的开源实现,似乎自己并不用再过多关注优化求解的细节.然而在模型的优化上,梯 ...
- 模型放到gpu上训练
把模型放到gpu上训练只需要设置三个地方即可: (1) 指定训练设备device: device = torch.device('cuda' if torch.cuda.is_available() ...
- 利用有向图模型检测社交网络上的欺诈账户
,欢迎关注公众号:论文收割机(paper_reader) 原文链接:利用有向图模型检测社交网络上的欺诈账户 在之前的博文中我已经介绍过如何在手机应用市场和电子商务平台上面发现虚假用户和水军.今天我将介 ...
- 【PP-YOLOE+】第18届全国大学生智能汽车竞赛百度完全模型组线上资格
★★★ 本文源自AlStudio社区精品项目,[点击此处]查看更多精品内容 >>> 第十八届全国大学生智能汽车竞赛-百度完全模型组-线上资格赛基线 1.比赛背景介绍 全国大学生智 ...
最新文章
- Win10 Wsl可以装mysql_WSL win10子系统linux-ubuntu 安装mysql root用户远程连接 开机启动mysql服务 用navicat连接登录...
- 【Flutter】Flutter 调试 ( 调试控制相关功能 | 断点管理 | 代码运行控制 )
- 汇编——NT中读取MBR内容
- 根文件系统构建(Buildroot 方式)
- c 加密 java解密错误_java解密出错
- oracle认证都需要考哪几个方面,Oracle OCP认证要通过哪些考试
- 【洛谷习题】售货员的难题
- Arkeia Software宣布支持第100个Linux平台
- 如何在EXCEL表格中加斜线表头
- 利用python编程,制作自己的游戏“外挂”!
- 美国卡内基梅隆大学计算机排名,卡内基梅隆大学,美国卡梅基梅隆大学世界排名?...
- zzzfun、age、omofun常见动漫下载问题汇总
- 前端开发技术——对象
- 护眼灯的标准是什么?护眼台灯国家标准给你答案
- kafka部署时出现的天坑
- 实验吧-后台登录 Writeup
- Windows AD域下批量分发安装软件
- 蓝桥杯 BASIC-21 基础练习 Sine之舞
- oracle 视图创建 视图及字段加注释 字段数据类型更改
- 如何解决tomcat启动闪退问题
热门文章
- ubuntu下Makefile:xxx: recipe for target ‘xxx‘ failed
- [FROM WOJ]#4479 长跑
- 以十年维度思考技术的发展
- 服务器如何连接多屏显示器,电脑设置两个显示器多屏显示
- 如何设置csdn为谷歌浏览器默认搜索引擎
- 摄影构图学83年绝版_摄影师拍照好看的6个秘密:拍照必会构图技巧
- 外链平台怎么找?什么形式的外链最好?
- 【Linux】python实现人脸识别
- 博客之星:我去,你竟然还不会用 synchronized
- Unity打包后播放视频黑屏问题