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截图

谢谢阅读!

相关推荐
叶智辽3 小时前
【Three.js与WebGPU】下一代3D技术到底强在哪?
webgl·three.js
叶智辽9 小时前
【Three.js后期处理】如何让你的场景拥有电影级调色
前端·three.js
波哥学开发1 天前
# Three.js 进阶:如何绘制"像素大小固定"的箭头?三种方案全解析
webgl·gpu
叶智辽1 天前
【Three.js多相机渲染】如何在同一场景里实现“画中画”效果
three.js·canvas
答案answer1 天前
一个非常实用的Three.js3D模型爆破💥和切割开源插件
前端·github·three.js
Panzer_Jack2 天前
如何用 WebGL 去实现一个选取色彩背景图片透明化小工具 - Pick Alpha
前端·webgl
叶智辽2 天前
【Three.js内存管理】那些你以为释放了,其实还在占着的资源
性能优化·three.js
烛阴3 天前
Three.js 零基础入门:手把手打造交互式 3D 几何体展示系统
javascript·webgl·three.js
叶智辽4 天前
【ThreeJS调试技巧】那些让 Bug 无所遁形的“脏套路”
webgl·three.js
叶智辽5 天前
【ThreeJS急诊室】一个生产事故:我把客户的工厂渲染“透明”了
webgl·three.js