lingo3d_基于官方教程的分析

lingo3d可以允许web内使用3d元素，其定位是web端游戏引擎。跟随官方教程我完成了一个简单的demo，即控制小人在三维空间穿行，并且可以显示相应物品信息

官方使用vite+react，故我们跟随其搭建

1.搭建主场景

这里与一般react项目出入不大，其中public文件夹存放了大量3d模型与图片等，而我们的代码都在App.tsx中书写：


import { Cube,Editor, Model, ThirdPersonCamera, World } from "lingo3d-react"
import "./App.css"
const App = () => {return (<><World defaultLight="env.hdr" 【这是一种自带光源的图片文件，可以照亮环境】skybox="env.hdr"【默认光源和天空贴图都用的这种文件】><Model src="gallery.glb" scale={20} /><ThirdPersonCamera active mouseControl><Modelpbr 【将人物的模型类型强制转为pbr 这样就可以使光源点亮他】src="bot.fbx"animations={{idle:'idle.fbx',running:"running.fbx",falling:"falling.fbx"}}animation="idle"width={50} 【以下五行分别为平面宽，模型高，初始x,y,z】depth={50}    【初始xyz要使用editor调整查看坐标】x={243.19}y={-910.47}z={-577.26}/></ThirdPersonCamera></World>【Editor标签可以放在这】</>【react只能有一个根标签】)
}
export default App

这里要注意的是 Editor标签我已经注释掉了，它要放在world之外，由于官方已经做了修改，所以我们看到的editor视图与官方不一样，使用wasd可以直接控制编辑框事件，而官方较早的版本需要alt+鼠标拖动，这个卡了我一手哈哈哈，当时没意识到.等人物放好后就可以添加动画了

2添加动画

1状态管理工具下载 xstate 和 @xstate/reac

yarn add xstate @xstate/react

2.src新建状态机文件

这里看我的截图比较清楚，状态机相当于一个数据管理工具，类似reducer和vuex的东西，只是多了接收修改和状态检测的API

3主文件中引入：

定义pose和sendPose，其中usemachine还有第二个参数，是一个回调函数，稍后再说

在对应的model内，绑定pose.val到animation上即可，本文件使用的是ts 所以pose.val无法被视为字符串，需要加 as any

tips：关于jump中的entry

进入jumping后他会去找useMachine中第二个参数中的相应值，此时回调执行，我们之前用ref标记了机器人的Model，在model上加上向y跳起10，同时由于之前的physical属性让环境有重力了，故起跳后会下落，当下落到地面后发送landed指令

这里的onLoop也不是检测落地，而是定时器，当检测到y为0时，发送指令

3.添加交互事件

添加react动画包

1.使用blend3d解析3d模型 找到交互事件的模型名字并在对应标签内找到它 这次的目标是建筑内的一幅画name="a6_CRN.a6_0"<Model src="gallery.glb" scale={20} physics="map" ><Find name="a6_CRN.a6_0" outline = {mouseOver===true}onMouseOver={()=>setMouseOver(true)}onMouseOut={()=>setMouseOver(false)}>{mouseOver &&(<HTML><divstyle={{color:"white"}}><AnimText  duration={1000}>Artwork Title</AnimText><AnimText  duration={1000}>little bird</AnimText></div></HTML>)}
QQ录屏20220702184710.mp4</Find></Model>

2.为其添加鼠标事件控制外部线框和文字展示的显示，其中AnimText为第三方库提供的显示动画

3.准星

准星指明鼠标位置，永远指向相机中心，故放在舞台外面，准信位置由镜头位置决定，所以要调整镜头位置到适当位置，防止”准心对着屁股“的问题出现

4.看到目标后的镜头偏转可用hook参数决定，并绑定在相机上

相机位置绑定稳定spring参数，完成。

4 其他

环境美化

World标签可以添加一系列环境属性

ambientIcclusion 可以让环境光变得柔和

bloom都为暴光属性

详细可查api 稍后附上

outline相关属性是为world内模型添加边框属性后的边框样式

其中的图片为覆盖在边框内的蒙版

相机相关

本质是人物模型镶嵌在相机内，人物pbr属性可使人物与体积光产生效果，随环境变化亮度

physics属性使物理属性，当其下方无模型时自动下坠，下落速度暂未设置，与之配合的是在环境标签内添加的physics="map"，而character也就是物件。当 model跳出map后其重力效果仍然生效，需要设置空气墙防止出界。（建模解决，添加标签过于耗费内存）

width与depth无效设置，模型大小不会随之改变

xyz为舞台内的一个坐标，可用editor查看，这里是选好的初始位置

关于指令与动作

keyboard与camera位于同一级，而非嵌套

其中按下w时检测ref是否绑定了值，有的话让其绑定的元素向前一定距离

与之不同跳跃动作则由action控制，前文提到，它出现在useMachine的第二个参数内（是一个对象）

actions: {

enterJumping: () => {

console.log(">>>jumping")

const bot = botRef.current

if (bot === null) return

bot.velocity.y = 10

bot.onLoop = () => {

if (bot.velocity.y === 0) {

bot.onLoop = undefined

sendPose("LANDED")

}

关于浏览器设置，3d场景过于消耗GPU，故应当使用独立显卡加载，将浏览器默认加载项改为独立显卡，设置方式：

1.系统设置：同行设置（最下方）

2.点击浏览添加应用

3.将浏览器启动文件地址放入弹框地址栏，可通过浏览器快捷方式直接复制

5.点击添加完成设置

视频稍后上传 220706

视频展示

lingo3d实例1