【WEB前端2024】开源智体世界：乔布斯3D纪念馆-第28课-avatar玩家3D形象

【WEB前端2024】开源智体世界：乔布斯3D纪念馆-第28课-avatar玩家3D形象

使用dtns.network德塔世界（开源的智体世界引擎），策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎（内嵌了three.js编辑器的定制版-支持以第一视角游览3D场馆），可以在浏览器和node.js、deno、electron上运行，它是一个跨平台的软件，支持多个操作系统使用！

下面分为几步介绍，如何基于dtns.network智体世界引擎如何实现乔布斯3D纪念馆的碟状总部的展览馆的增加1个3D玩家角色。在使用滚动球控制玩家视角移动时，会出现一个第一视角的3D玩家玩家角色，呈现出3D角色被控制着移动的效果。

这个3D玩家角色的移动效果，接近于第一视角射击游戏。也是参考了3D场景下的各种人机互动交互效果的体现。可以通过3D玩家角色的移动，大大提升了3D场馆的沉浸式浏览体验（第一人称视角）。

第一步：打开头榜页面，找到3D纪念馆xverse轻应用

### 第二步：点击右上角…进入头榜编辑器

第三步：点击正面的“编辑xverse轻应用源码”，进入3D场馆编辑器

注：点击顶部菜单添加-正方体（以便使用该正方体来体验玩家视角——第一人称）

第四步：关闭玩家视角，以方便旋转3D场馆至合适位置

注：我们可以通过鼠标中间的滚轮控制3D场馆的缩放，将旋转它至合适位置

第五步：编辑刚才添加的3D正方体，使它的位置Y轴为1.2，名称修改为avatar

注：系统内置的滚轮控制系统，默认会在3D场馆模型找到唯一的名称为avatar的3D组件，作为avatar玩家3D形象（可以是任意形状，不限于是一个正方体——例如是真人模型、动物模型、怪物形象、或者简单的就是几个长方体拼接而成等），我们这里为了简单演示，故仅使用一个正方体（名称务必修改为avatar）来代表玩家3D形象（沉浸效果依然拉满）。

第六步：将avatar玩家3D形象的纹理修改为MESHNORMALMATERAIL

注：为纹理的第三方（注意匹配），可以看到正方体的avatar形象被修改为一个彩色的立方体（视觉效果满分）

第七步：点击出生点立柱，点击顶部菜单视图-玩家视角（决胜），以便进行玩家浏览3D场馆

注：务必启用玩家视角（否则无法使用滚动球系统控制玩家avatar人物在3D纪念馆中移动）

第八步：点击顶部菜单“文件”推送头榜（作品），以分享xverse-3D轻应用给其他用户体验

第九步：将头榜标题修改为“3D场馆-avatar玩家”

注：修改标题的属性值为xmsg

第十步：返回头榜找到刚发布的xverse轻应用

第十一步：点击进入3D纪念馆，可以看到已经有一个3D玩家形象（彩色的正立方体）出现，并且浏览的过程中是以第一人称视角进行3D玩家的移动（非常具有沉浸感）

我们使用滚动球控制系统移动玩家位置（向前、向左、向右、后退等）

注：随着滚动玩的移动，第1人称视角下的正立方体3D玩家形象，也出现着不一样的动态效果。故而大大提升了3D场馆的浏览体验（体现出鲜活的玩家形象特点）

通过上述11步，我们成功完成了《乔布斯3D纪念馆》的飞碟形态的3D纪念馆的添加3D玩家形象的功能。通过模仿第一人称视角的类射击3D场景游戏，我们大大提升了3D纪念馆的游玩的形象和效果。

注：dtns.network德塔世界（开源的智体世界引擎）是在github和gitee上开源的项目！