lingo3d_基于官方教程的分析

鸢_

已于 2022-07-06 08:53:36 修改

阅读量3.2k

点赞数 15

文章标签：大数据

于 2022-07-06 00:38:50 首次发布

本文链接：https://blog.csdn.net/qq_61834461/article/details/125630823

版权

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>
          <Model
          pbr 【将人物的模型类型强制转为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>
             <div
              style={{color:"white"}}
              >
               <AnimText  duration={1000}>Artwork Title</AnimText>
               <AnimText  duration={1000}>little bird</AnimText>
             </div>
           </HTML>
           )}
QQ录屏20220702184710.mp4


          </Find>
        </Model>