元宇宙展厅| 大帅老猿threejs特训

285 阅读12分钟

欢迎关注 大帅老猿,本文写的是如何用blender制作一个展厅,一个展厅的出现,美术与人物的结合.然后人物的交互,行走,下面傻瓜式教程开始.

Day01笔记:
一个是 动画为什么不动 需要在动画中设置帧的播放顺序
一个是为什么是黑的 因为相机在内部
一个是为什么底部是黑的 因为需要一个环境光照亮
PBR材质的参数:金属度 粗糙度 在modeling中
各种快捷键:. / aa
x y z : 右手原则
三大件 :场景 相机 渲染
blender :可导入导出 开源
blnder 新建 => shift+A=>网格=>经纬球 创建了球体 =>Shading=> 点击球体下方 新建 选择材质 在去其他文件 把下载好的贴图 例子是sky2.dir 把图片下载好的拖住 拉到blender下 选择颜色到基础色 可以shift+a 新建一个相机,默认在原点,按0键进入相机事件, n键菜单里旋转相机就能转着看了, 可以看全景 shift+a 相机 再到选项下面第三个 摄像机 可以看内部全景
Screencast Key 屏幕按键插件 www.blender.org/download/de… 进入里面最下面就有 把下载的直接拉进去=>保存 点击default=>常规=>animation 动画可以动起来

图片拆分 导入图片 gltf2.0 (.glb/.gltf) D:\xampp\htdocs\kaikeba\全部\threeDolar\YCY-TrainingCamp-S2-main\resources\models donuts_原始未处理.glb
h=会全选或者按A键 点击右边缩放 缩放图片 调整图片 shift+a 点击全部变换 然后tab 编辑下面选择一项=>编辑项=>点击空白项=>框选 选择一个物品 右键 拆分 拆掉一个个可以自己做东西(或者右键分离=>选中项)

导入图片 gltf2.0 (.glb/.gltf) D:\xampp\htdocs\kaikeba\全部\threeDolar\YCY-TrainingCamp-S2-main\resources\models donuts.glb =>然后点击每一个个体dounuts01-6=》选项最后下面第五项刚体=>然后选择果盘刚体被动项=>按播放加刚体成功

第二天 blender 做一个机器人 正方形 向上挤 shift+e 向上附近绿线拖点击鼠标右键 有蓝线上拖 挤出长方形 按3,4键 在不出来 缩小 在选择面 shift+e\
拉伸后作腿, ctrl+r 加面下面 然后点击一个面 Tab 选择3或者点击最右面白色 在ctrl选择另一个面=>shift+e拉升或者右键=>选择挤出各各面向下拉变长=>按G一个向左拖动一个右,形成腿.
然后中间ctrl+r小边,然后按上面方法选择左右两个面《右键挤出各各面,向左右拉动生成手,脖子就是左键形成小框选选择头部最上面一个面(有两个面一个上边一个下面的边,头部最上面,右键把两边选择,右键融合边就去掉中间的边)
然后点击右上角一个球星曲线,左键形成框选大的覆盖整个头部,然后s缩小一个中间的形成脖子.最后头部上部面,选中,向上拉升shift+e,形成机器人了.

场景 ctrl+A 选择柱体 点击右边缩放 缩放主题 变小成场景 向下拉, 然后点击上面一个面右键内插面给一个厚度,然后右击挤出面 shift+e 蓝色向下拖地板下 变成了地板 点击下面 右键 删除面 就删除了 然后shift+鼠标左键选中几个面 Delete 面,删除面. 缝合厚度 的里面空白 tab+1选中边的一点,ctrl选中另一个点,右键选中吸附至像素点=>选择项=>活动项缝合空白一次类推,做成一个展厅
最右下侧 编辑器类型 选择物体属性 变换增量 缩放 2倍
制作六边形 shift+a 曲面=>主题=>左下角有添加柱体项点击=>顶点设置6 就是六边形 然后操作它,缩放移动变换,左上角图标有点击 缩放合理尺寸=>移动移动到展厅中央,然后Tab和左键点击覆盖六个角,按shift+z变换视图,然后向下拖沉下一些面积,然后Tab键右键鼠标=>设置原点=>原点到=>几何中心 解决不是围绕原点转 shift+z向下拖会出现这个bug.
制作一个环形六边型 Tab 选择第二组 选择线 2 键,然后改变视图shift+z 左键形成框选覆盖六边形,各各线ctrl+r 点击中边线 然后可以拖上一点,然后按s往外面拖形成环形六边形.
建柱子 shift+A =>正方体 缩放移动插入六边环形下=>Tab+1或者选择第一组点,然后框选住正方体头部=>s建往外面拉形成梯形,按上方箭头拉上形成柱子=>接着Tab+2选择第二组,框选正方形最上面头部,shift+z转换视图=>ctrl+r切面形成半边行线点击拉到最上面=>Tab+3 选择各各面=>右键挤出各各面向右,然后上箭头点击上拉。=>各各边缩放Tab+1 选择各各点,框选左右两边 点击缩放或s 点击红色箭头=>拉小红色是x轴,缩小了头部形成柱子展厅.上下头也是一样,
然后两边缩放2倍。
建立文本 shift+A =》文本Tab编辑文字,点击其他去掉文字编辑功能=》缩放成一定比例=>旋转然后左右调整调到正=>旋转最右侧字体=>常规=>bold=> 然后新建一个正方体,调整大小放在文本下面成为logo展示.
建屏幕=>shift+A=》立方体 缩放一定尺寸移动贴到墙上 建曲面屏 ctrl+左键框选八个面,可以用框选中套索工具套中区域,去除多余框选选中=》shift+D 复制墙面=>右键 分离=<选中项 脱离父级怀抱=>Tab 右键设置原点=>原点到=>几何中心 然后缩放移动贴到墙面.
制作球体厅盖 =》 shift+A =》曲面=>经纬球=>缩放移动一定尺寸=>Tab + 1 =>shift+z 框选下面一半部分,Delete=>面删除了面,形成屋顶在移动=》对墙增高 Tab+1框选整个墙体,shift+左键去掉多余的选中=>缩放一定尺寸然后移动,设计厅子完成.
地面和墙体一致,加大理石,分离物体 选中地面 右键分离=>选中项=>Tab 物体模式=>然后向上下移动=>blend 选中Shading着色面板=>新建=>然后Marible_SlabWhite2_abbedo.jpg拖到blend颜色签到基础色,添加纹理=》Marible_SlabWhite2_roughnesss.jpg拖进来 颜色牵到糙度,加粗糙面.
加法向 Marble_SlabWhite2_512_normal 图拉进第二个 牵线到法向,点击左上方 鼠标拖去编辑显示上下文=>视图=>鼠标在它下方图片划/拖拽一下,放大纹理。然后点击右上角 拖上去找箭头图标的 Gizmo去掉网格. 加日光,选择右边最上面 鼠标显示视图着色方式,选择地面,ctrl+a 选择灯光=>日光 创建日光,按G键吧灯光调上面去,按r旋转吧影子向左显示90度.
自动建日光.003,选择,在右侧日光下选择强度/力度 2.77 加大光照显示影子会有白花花的样子.
做地板边 打开PS ctrl+o 打开文件 Marble_SlabWhite2_512_albedo.jpg 填充 透明度90 点击图层,点击最上方选择=>全部, 点击矩形选择 框柱图片95% 右键描边=>宽度5,颜色黑水,位置居中然后点击确定完成,ctrl+s保存Marble_SlabWhite2_512_albedo3.jpg.然后选择shading=>着色器编辑器下方,点击Marble_SlabWhite2_512_albedo.jpg换3图片.
对地调整 => 点击UV Editing模式,然后把显示叠加层,查看物体类型,视图着色方式实体在最右上角第二排去掉,选上视图着色方式材质预览. 在编辑器类型看到遮造,Tab+3选择地板,再去遮造那边按A全选,S缩放uv就可以看到地板了.

加墙体UV 首先 选择墙体,着色方式实体,材质去掉,Tab+1选择墙体然后,点击显示Gizmo,显示叠加层在试图着色左边.然后shading=>选择墙体材质 然后把wall.jpg拉进来颜色对基础色.
然后编辑器类型=>浏览要关联的图像=》选择wall.jpg,接着选择墙体A全选,然后选择最上面的孤岛模式选择下面UV,ctrl+shfit+点击 选择什么uv,左边缩放按钮,往x轴右边拉伸. 下边远向往xy拉伸.

添加点光 点击试图着色方式,右键或者上方视图=>选择=>添加=>灯光=》点光 添加了 设置100w放角落照亮,选择点光按G键移动.选择点光按shift+d 复制多盏点光照亮.
对2023实体映射 blender打开=>点击旁边shading的animation=>点击2023, Tab+3 选择物体模式,右键转换到=>网格 变网格.然后视频映射点击uv Editing=>点击2023,Tab+3然后后全选A,编辑模式=>UV=>展开=>块状投影再把2023拉开。
显示不了,首先 Tab+3+A全选 然后在空白视图只有三显示 就框选左两边,框选右两边,然后uv=>展开=>块状投影就显示2023 ,原来的UV调了一下,也新创建了一个2023,日光和点光调一下.
合并视频数字 首先截视频背景的图 然后截文字图 接着Ps打开两个 视频接到和文字大小,文字在最上映射背后的图片. 然后抠图,选择魔棒工具,选择文字后的背景,按delete删除先把他转为栅格对象.
然后背景图,点击背景 选择最上方选项 从交叉区里面选背景按delete就可以把他删除.

用在导出图中GLTF2。0(glb)格式,修改图片用在网页上显得合理,删除Blender图片里的法向,日光,点光,球体厅盖和对图片做一下亮度处理,然后js处理图片渲染到网页,2023001改名2023.
获得模型 www.sketchfab.com 密码是 后四位1005 其他依旧 点击downloadable 可以下载 进到模型下面有 Download 3D Model 就可以下载
最后做骨骼绑定网站地址:www.mixamo.com 注册账号 模型导入 导入格式要fbx用blender转,然后导入=>next 把各各圈圈放入模型根据右边模型.然后就导入成功了随便点动作.
绑定网站 可以获得网站的动物行为 www.xiaomi.com 未导入过的模型,否则导不进去,就说明导入过,直接导出模型就可以了.

blender应用
A 全选
AA 取消全选(按两次A)
Shift +D 复制物体(右键或者ESC取消移动)

Shift+鼠标中键盘 移动视角

鼠标滚轮 推拉视角

鼠标中键按住 旋转视角

G grab 移动

S scale 缩放

R rotate 旋转

小键盘 . 聚焦选中物体

波浪键 ~ 饼状菜单--查看所选

X 删除

Shift+A 添加模型

F3 搜索 (快速烟雾)

TAB 编辑模式/物体模式切换

TAB 上面的 1 2 3 分别代表编辑模式下 点 线 面的切换

环选边 Alt+ 点击边(编辑模式--边模式下)

Ctrl+B 切角 (编辑模式-选边 切角 配合鼠标中键滚轮往前可以增加更多分段)

切割工具 配合键盘按住A C 透视和角度捕捉

F 填充面

M 合并(焊接)顶点

G + X/Y/Z +ALT 移动配合 ctrl 可以临时开启捕捉功能(选中点/线/面 按G移动 配合XYZ 锁定轴向 按住ctrl可以临时开启捕捉)

O 软选择

小键盘 1 前视图

小键盘 3 右视图

小键盘 7 顶视图

ALT +鼠标中键盘按住拖动 切换视图(ZB模式)

ALT +Z 透视显示模式

P 分离

Ctrl +L 选择所有相连元素0

N 属性栏

T 左侧工具栏

Shift +空格 也可以呼出悬浮的左侧工具栏

Alt+A 环选

Ctrl +I 反选

H 隐藏

ALT + H 取消隐藏

E 直接挤出

Alt+E 弹出挤出菜单

雕刻模式下 ctrl --按下

雕刻模式下 F--缩放半径

Z 着色模式切换

SHIFT + C 查看全部

CTRL +P 父子链接

小键盘0 进入相机视图

在相机视图 选中相机 按G 移动视角

右侧视图菜单--锁定相机到视图方位 在相机视图中使用导航模式

F11 弹出上次的渲染窗口

M 创建集合

SHIFT+S 设置游标

Shift+鼠标右键 通过点击放置游标

ctrl+tab 物体交互模式设置

ctrl + 空格 最大化当前窗口(鼠标所在窗口)

Ctrl + PageUp/PageDown 切换顶部快速布局(Layout/Modeing/UV/paint)

L 选择相连元素

Ctrl + 小键盘+号 扩展选择(编辑模式下)

物体上F2 快速命名物体

/ 单独显示当前选择物体

平滑着色
-----------------------------------------------------------------------------------------------------------------------------------------来自评论各位补充,感谢各位小伙伴的补充------------------------------------------------

ctrl+alt+q 进入/退出三视图视角

ctrl 配合小键盘的+或- 编辑模式下加选/减选点线面

F9 挤出 操作完成 左下角的详细面板消失,重新呼出面板(适用于其他插入 倒角等操作)

shift+c 游标回到原点,视图恢复到标准大小

robot2.gif shift+tab 开启关闭吸附功能

ctrl+句号 打开关闭 物体模式下仅影响原点选项(移动坐标轴)

alt+s +g+ r 旋转 缩放 位移重置默认归零

ctrl+A 呼出应用变换按钮(将修改过后的移动旋转缩放塌陷为默认数值)

第三天下面代码,把包下载然后yarn ,然后yarn start就可以开始开发了,代码如下图.

1.png 人物可以动起来了,运行结果如下图.

robot2.gif