Blender+Three的龙年风格小场景

本来计划年前要完成的个人项目,没想到 拖延症 拖到了元宵节。请问有没有有效根治拖延症的妙方

Live:hello-2024.vercel.app/ (合理上网)

Code:github.com/luosijie/lo...

一、设计与建模

首先我们需要在 Blender 里面设计好场景。会熟练使用 鼠标 和 键盘 的话基本问题不大

1.场景设计与搭建

模型图

渲染图

2.角色设计与建模

角色的设计包括简单的动画制作,需要在 Blender 里面完成

角色的造型和配色参考

3. 龙的模型制作

因为要给龙制作轨迹动画,所以最终导出的模型分为四部分:头部;身体;脚;尾巴

龙的建模与参考

二、资源的导出

由于希望在尽量满足视觉效果的前提下,尽量轻量化资源,同一场景下导出了不同类型的资源

  • 烘焙贴图:一些较大面积的物体,需要还原光照和阴影效果
  • matcap:一些小物体,或 需要重复的物体,比如:树木;元宝;瓦片;灯笼等
  • 模型:根据模型的使用情况,静态模型一般合并导出; 动态和重复模型一般单独导出

场景烘焙贴图

角色烘焙贴图

材质球

三、代码和功能的实现

最初构思的是一个 地图探索类型的RPG小游戏,可以收集红包,打年兽之类的。后面想想还是算了,不要为难自己

1.场景展示

  • 静态物体:一般直接使用导入的模型 和 贴图
  • 重复物体:树木,灯笼,元宝 这些需要在 Blender 里手动收集 坐标参数
  • 地面:地面使用的是单独的阴影贴图,和背景色融为一体

World.build 主要提供静态模型的展示

2.龙的轨迹运动

由于龙是在天空做轨迹运动,所以需要提前在 Blender 里画好轨迹并导出

使用轨迹模型的坐标数据来生成曲线

3. 角色的运动和碰撞

角色的运动 使用 translate 和 rotate 本地坐标变换 角色的碰撞 使用 navmesh (需要提前在Blender里导出)

比较粗糙的角色运动控制

一些碰撞检测

4.相机的运动

场景的相机是根据角色进行运动的,而且可以转动角度和进行缩放。 确定相机与角色的 半径,水平夹角 和 垂直夹角 就可以进行旋转

相机控制

web截图

谢谢阅读!

相关推荐
supermapsupport6 天前
SuperMap iClient3D for WebGL 交互式栅格信息查询
webgl·supermap
八荒启·交互动画8 天前
# Web特效020—让 Web 特效真正动起来:时间循环应该怎么接
前端·webgl·网页特效·八荒启-交互动画·八荒启
八荒启·交互动画8 天前
Web特效019-Web特效的定义与边界核心算法手写一遍:先跑起来,再谈高级效果
前端·webgl·网页特效·八荒启-交互动画·八荒启
八荒启·交互动画9 天前
Web特效011—Web特效的定义与边界为什么忽快忽慢:时间、频率与采样的秘密
webgl·网页特效·八荒启-交互动画·八荒启·web特效
八荒启·交互动画9 天前
Web特效008—一个 `getContext(‘webgl‘)`,浏览器到底交出了什么?
webgl·八荒启-交互动画
前端小崔9 天前
Three.js 与 Cesium 融合实战问题汇总
前端·three.js·cesium
xhload3d10 天前
图扑智慧工厂 | 继电器产线仿真态势管控平台
物联网·低代码·webgl·数字孪生·可视化·智慧工厂·工业互联网·hightopo
彼此不想说话10624713 天前
Vue + Three.js 实战:从零搭一座可交互 3D 世界(一)——世界由哪些零件构成
three.js
新的瑞拉公主14 天前
Unity游戏发布微信小游戏:从构建到提审
unity·webgl·微信小游戏·开放数据域
慧都小妮子15 天前
实时大屏掉帧排查:WebGL 图表库选型的 5 项可实测检查
webgl·scichart.js·实时大屏掉帧·前端图表选型