一、什么是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;
}