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