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后其重力效果仍然生效，需要設置空氣墻防止出界 。（建模解決，添加標簽過于耗費內存）
<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
總結
以上是生活随笔為你收集整理的lingo3d_基于官方教程的分析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 单片机C语言字符串转数字
- 下一篇： 高频面试题解析：jmeter 面试题剖析