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 (
    <>
      
        
        
          
        
      
   
	【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"

  
          setMouseOver(true)}
          onMouseOut={()=>setMouseOver(false)}
          >
           {mouseOver &&(
             
             

               Artwork Title
               little bird
             
           
           )}
QQ录屏20220702184710.mp4


          
        

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