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后其重力效果仍然生效，需要设置空气墙防止出界 。（建模解决，添加标签过于耗费内存）
<Model src="gallery.glb" scale={20} physics="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
