【verge3d】如何在项目里调用接口

一、什么是verge3d

首先,这个是要钱的

不过可以免费试用一个月,使用期间可以充分的学习官方提供模板项目,但是上传服务是亚马逊那边的,就是得自己那啥一下。

为什么选它

公司接到几个小型的web3d的项目,所以我直接在找合适的平台。团队里有专门负责用blender建模的美术成员,然后verge3d又和blender接入的非常流畅,因此没有选playcanvas这种比较重的方案(几乎就是网页版的unity、ue了,不过我调研的时候对这个更有兴趣,后面有机会研究研究再写一篇文章)

里面有什么

我现在的使用呢,是下了一个verge3d for blender,可以在blender里起服务,也可以开始菜单里直接找这个名字的应用启动,它会运行在locahost:8668这个端口。它里面呢,照我的了解是优化出了一套verge3d自己的gltf方案,web特供,具体的优化细节本文不过多阐述(也超我纲了!)。它自己有一套"拼图"系统,并不太像ue里的蓝图,它拼图长得很像少儿编程的哪个scratch,事后我得知它们外观像仅仅因为都使用了Google 的Blockly 开源框架

Factory Tour项目模板为例我所知道的

blender的【空物体>纯轴】,用处的比较广泛(官方b站的瑞士军刀项目有讲过09.标注 - Verge3D for Blender入门教程_哔哩哔哩_bilibili)。infographics这个blender集合里的纯轴,带"_sign"后缀的是给拼图生成标注用的,带"__maker"后缀的是给标注的生成线条的终点用的。

(这部分后面我调研完会再来补充,就是用ue过来人的角度,看它这边怎么整漫游的)

二开

官方有verge3d的npm包,提供了react和vue的模板项目,不过代价是用不了拼图咯(据我了解)。我还没想好这条产品线要不要用verge3d去做深,所以还未进一步调研。(官方搭的react架子是react18+webpack的,没有上vite)。

手写一点小功能的话,倒是不用react模板项目。下图为例:在项目同名的.js里,有个runcode的入口,是暴露给开发自己写点东西的,可以用advanced的拼图call external function 去调用自定义方法。而visual_logic.js这个文件,是拼图编译后生成的可读js------别想着改这个去回写拼图了,首先是不行,然后是拼图每次save更新都会重新生成新的visual_logic.js。

我用腾讯的云函数简单写了个get接口用来测一下

截图里,我展示了两个调get接口的法子(自定义拼图方法在Procedures里面)

其一:

自定义拼图方法handleMyJSFunction,里面调用了我自定义js方法myJSFunction,然后需要在拼图里异步promise包一下。

其二:

自定义拼图方法handleTestApi。接口那边如果http状态码200的话,只靠拼图的on error do拿不到啥有用的返回

部署

nginx就能搞,整个项目放上去,然后index参数改成factory_tour.html, 然后类型支持加上个webp

复制代码
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|webp)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }
相关推荐
天人合一peng2 天前
Blender把模型转化为Obj 或 fbx
blender
CG_MAGIC3 天前
Blender角色设计ChouChou
3d·blender·贴图·效果图·建模教程
小年糕是糕手4 天前
【Blender】超全 Blender 新手教程:从软件下载到做出第一个作品(上)
blender
小年糕是糕手5 天前
【Blender】超全 Blender 新手教程:从软件下载到做出第一个作品(下)
blender
CG_MAGIC6 天前
Blender幕后花絮:幕后大门
3d·blender·贴图·效果图·渲云渲染
陶甜也6 天前
3D智慧城市:blender建模、骨骼、动画、VUE、threeJs引入渲染,飞行视角,涟漪、人物行走
前端·3d·vue·blender·threejs·模型
2401_8638014610 天前
如何在Blender中压缩/缩小3D模型的尺寸GLB、GLTF、DAE、FBX、OBJ......
3d·blender
CG_MAGIC12 天前
Blender场景教程:秘密实验室
3d·blender·建模教程·渲云渲染·3d软件
CG_MAGIC16 天前
Blender场景搭建:寻找德尔蒙
3d·blender·贴图·建模教程·渲云渲染
CG_MAGIC16 天前
SketchUp 大图渲染优化:清理废线 + 压缩模型,彻底解决卡顿
3d·blender·贴图·效果图·渲云渲染