提供Verge3D教程和Web3D开发技术服务

【更新】verge3d 2.3 for blender

原文地址:https://www.soft8soft.com/verge3d-2-3-for-blender-released/

热水壶项目

为开发热水壶项目增加的无代码工具原来只有3Dmax版,现在blender也有了。

blender版热水壶,点击运行(20MB)

幕后

完成这个DEMO,共分10步:

1.在建模阶段,创建了10万三角面的中模。

2.网格全部三角面化,烘焙法线贴图和AO贴图。在这里,verge3d的sneakPeek按钮用于在浏览器中预览效果。

热水壶模型:网格,带法线贴图和AO贴图

3.模型和烘焙的贴图通过OBJ格式导出到SubstancePainter,用于绘制贴图。最终,生成了3张贴图:颜色/透明,ao/roughness/metallic,法线。导出贴图使用了Verge3D for Substance Painter预设(下载地址

4.所有模型的材质都使用了PBR materials,除了火花用的是verge3d的基于cycle的PBR node 。过程中使用Sneak Peek检查效果。

从SubstancePainter导出的PBR贴图(中间的贴图包含ao/粗糙度/金属性3种贴图)

5.为相应模型创建动画

6.使用App Manager创建一个Verge3D project,一切采用默认设置。使用TeapotHeater.blend文件代替默认的Cube.blend文件,并导出.glTF格式文件。

7.使用拼图创建交互,包括:点击播放动画,鼠标经过描边,茶壶和仪表的移动,逻辑检查,等等。

设计web app采用了外部软件,当然,也可以直接写代码

8.交互元素(菜单、按钮、信息盒子)在网页流程中作为单独的页面创建。使用<iframe>加载3D场景,它的属性指向verge3d的工程(第6步)。任何可视化前端编辑软件都能实现此功能,如Pinegrow, Adobe Muze等。

项目架构图

9.HTML/CSS/JS文件正确保存到app文件夹下。index.html文件用于运行编译后的程序。

最终,2D和3D部分通过HTML拼图连接到一起。

热水壶工程文件下载链接

工具

热水壶项目要感谢这个版本提供的新工具,HTML拼图通过线条和事件连接来自网页的按钮和3D场景中的物体,隐藏自定义的加载器,建立自定义的全屏按钮,转换消息盒子和用距离渐隐它们,等等。

新的HTML拼图

对比之前的版本,HTML工具盒子增加了几个新成员。用于绘制和移除连线的拼图,配置全屏模式,绑定一个HTML元素到3D物体上。注意“in parent doc”复选框,它可用于处理内部<iframe>元素。

父子,约束,距离,声音拼图

除了HTML拼图,另外还有4个非常强大的拼图:parentconstraint mute/unmute,  distance 和set sound volume。距离拼图的特殊用法,是用于使界面浮在模型的上方。

动画循环设置

play animation 拼图增加了循环控制方式。

报红,确保首先在app.js中添加过函数

阴影

增加了阴影的控制属性:map type,map side

全局和每盏灯光的阴影设置

另外,现在即使物体没有指定材质,默认也会接收和产生阴影。支持自动LZMA压缩,只需在导出设置中勾选Enable LZMA Compression,导出glTF后会自动生成.gltf.xz和.bin.xz。压缩文件的使用见另一篇文章

 

 

zjbcool

zjbcool
关闭菜单
×
×

产品入口: 产品添加到购物车