纯Web前端打造的元宇宙展厅——开箱即用的Lingo3D游戏引擎 支持原生、React、Vue
Lingo3D
一款新出的开源框架，主要目的是用来做游戏引擎的，对标端游PUBG
因公司业务需求不同，跟着教程做了一款纯展示的展厅性质的Demo(React)
近几年元宇宙的概念有点热门，这里亦可沾点边
官方Demo截图
地址
NPM地址
GitHub地址
官方文档地址
展厅Dem地址，PC端，简单做了做，功能很少，除基本的人物移动逻辑外，只做了图片轮播预览和视频展示的功能
官方B站教学视频
相关3D模型问题B站视频
优缺点
1、纯Web前端
2、上手超简单。支持原JS，React，Vue
3、可通过websocket实现多人联机互动
4、支持PC、移动端摇杆
1、框架不断内测完善中，业务场景功能待完善
2、框架支持的3D模型具有局限性，需要blender进行处理。这也是市面上3D模型不统一导致的。
3、官方文档暂时不完善，文档阅读不便（快一点呀快一点）
所需相关技术
1、Vite
一款前端构建工具，跟着官方文档走一下，create一个项目即可，不需要了解很多
当然如果业务需求很多了，可能需要了解这个工具的配置项什么的，可能会有冲突
2、TS
支持TS，也支持JS，如果觉TS很搞，可以使用JS，但是还是建议使用TS，如果你要构建一个长久维护的项目的话。
3、状态机xstate
用来管理你的键盘事件与动画状态的关系
4、模型材质相关
建议使用blender进行模型处理，blender2.93LTS版本
- 人物模型：1、mixamo下载角色及动作动画；2、blender自己建模，导出fbx格式后上传至mixamo进行骨骼绑定后下载角色及动作动画；3、readyplayer.me用照片生成的人物模型，导入blender后导出fbx格式，上传至mixamo进行骨骼绑定后下载角色及动作动画。
- 场景模型：sketchfab、blendswap、模之屋
- 环境光模型：熟悉建模的朋友应该知道光是建模当中很重要的一个概念。Lingo3D支持hdr的图片，可以用hdr进行光照模拟
- 天空图：Google搜索关键字： equirectangular sky / skybox background ，也可直接用hdr图片当作天空图
Demo相关代码——React
源码下载地址
import { useState, useRef } from "react"
// lingo3D库
import { World, Editor, Cube, Model, ThirdPersonCamera, Keyboard, OrbitCamera, useLoop, useKeyboard, types, Find, HTML, Reticle, useSpring } from "lingo3d-react"
// 状态机，用来管理动作动画
import { useMachine } from "@xstate/react"
// 状态机文件
import poseMachine from "./stateMachines/poseMachine"
// 一款文字动画库，也是lingo3D作者的
import AnimText from "@lincode/react-anim-text"
import './App.css'
// 图片轮播的组件
import Gallery from './components/gallery'function App() {const [mouseOver, setMouseOver] = useState(false) //鼠标移入的开关const [fixedWindow, setfixedWindow] = useState(false)// fixedWindow的开关// 角色model的refconst characterRef = useRef<types.Model>(null)// 状态机const [pose, sendPose] = useMachine(poseMachine, {actions: {enterJumping: ()=>{const character = characterRef.current;if(character === null) returncharacter.velocity.y = 5character.onLoop = () => {if(character.velocity.y === 0){character.onLoad = undefinedsendPose('LADNED')}}},enterWaving: () => {const character = characterRef.current;if(character === null) returnconst animationTimeout = setTimeout(() => {sendPose('ENDTHISANIMATION')clearTimeout(animationTimeout)}, 4000);}}})// ThirdPersonCameraInnerPosition，第三人称相机的Inner偏移量const CamInnerX = mouseOver?20:0const CamInnerZ = mouseOver?40:200const xSpring = useSpring({to:CamInnerX, bounce: 0})const zSpring = useSpring({to: CamInnerZ, bounce: 0})// characterAnimations，主角所有的动画const characterAnimations = {idle: 'person/Idle.fbx',walking: 'person/Walking.fbx',running:'person/Running.fbx',jumping: 'person/Falling.fbx',waklingback:'person/WalkingBackwards.fbx',waving:'person/Waving.fbx'}return (<>{/* Word世界，参数分别为：高质量画面，天空盒图片，Find(下文标签的边框，被遮挡是黑色)，环境光遮蔽 */}<World performance="quality" skybox='skylight.hdr' outlineHiddenColor="black" ambientOcclusion>{/* 场景模型，参数分别为：模型地址（public下的），缩放，物理碰撞检测（我是地图）*/}<Modelsrc="scene/Pavilion.glb"scale={18}physics='map'boxVisible={false}>{/* Find，可以把他理解成，场景模型中的某一个名字是name的元素，这个name哪里来，blender建模的时候命名的，参数分别为：name,边框，鼠标移入事件、鼠标移出事件、点击事件 */}<Findname="a5_CRN.a5_0"outlineonMouseOver={()=>{setMouseOver(true)}}onMouseOut={()=>{setMouseOver(false)}}onClick={()=>{setfixedWindow(true)}}>{mouseOver &&// Html标签，就是普通的Ht，里面可以放html的标签<HTML><AnimText className='HTML_TITLE'>SDTA-Gallery</AnimText></HTML>}</Find>{/* 另一个Find，名字不同，让他播放一个视频 */}<Find name="b11_CRN.b11_0" texture={"https://media.sdta.cn/themes/sdta/assets/video/sdta-slider3.mp4"}></Find></Model>{/* 第三人称相机，参数分别问：鼠标控制、激活、inner角度(x,y,z) */}<ThirdPersonCameramouseControlactive={!fixedWindow}innerX={xSpring}innerY={30}innerZ={zSpring}>{/* 人物模型，参数分别为：模型地址，ref(通过ref可以获取并操作这个model),物理碰撞检测（我是主角），初始位置（x,y,z），这个model都有什么动画，这个model当前执行的动画，模型的盒子线关闭，当设置环境光时需要打开pbr */}<Modelsrc="person/T-Pose.fbx"ref={characterRef}physics='character'x={-424.99} y={-825.31} z={-661.13}animations={characterAnimations}animation={pose.value as any}boxVisible={false}pbr/></ThirdPersonCamera>{/* 键盘事件，这里就需要配合状态机来进行操作（如果只是简单的上下左右，通过useState即可，当功能复杂时，需要状态机进行管理） */}<KeyboardonKeyPress={(key: string) => {if(key === 'w'){sendPose('KEY_W_DOWN')characterRef.current?.moveForward(-3)}else if(key === 's'){sendPose('KEY_S_DOWN')characterRef.current?.moveForward(1)}else if(key === 'd'){// sendPose('KEY_S_DOWN')characterRef.current?.moveRight(-3)}else if(key === 'a'){// sendPose('KEY_S_DOWN')characterRef.current?.moveRight(3)}else if(key === 'Space'){sendPose('KEY_SPACE_DOWN')}else if(key === 'Shift'){sendPose('KEY_SHIFT_DOWN')characterRef.current?.moveForward(-3)}else if(key === 'h'){sendPose('KEY_H_DOWN')}}}onKeyUp={(key: string) => {if(key === 'w'){sendPose('KEY_W_UP')}else if(key === 's'){sendPose('KEY_S_UP')}else if(key === 'Shift'){sendPose('KEY_SHIFT_UP')}}}/></World>{/* Model编辑器，可以查看模型的各种参数进行调试 */}{/* <Editor /> */}{fixedWindow &&<FixedWindow handleClose={()=>setfixedWindow(false)}></FixedWindow>}</>)
}function FixedWindow(props: any){return(<div className="fixedWindow"><span onClick={()=>props.handleClose()} className="fixedWindow_close">{"close"}</span><span className="fixedWindow_websocket">{"OPEN CHAT"}</span>{/* 图片轮播组件 */}<Gallery></Gallery></div>)
}
export default App
PS遇到的一些坑
1、blender建议使用2.9.3稳定版
2、用vite创建的react是18，后面用到了Swiper不知道什么错，降到了17
3、期待更多的发现
纯Web前端打造的元宇宙展厅——开箱即用的Lingo3D游戏引擎 支持原生、React、Vue相关推荐
- 身临其境数字世界：探索VR全景元宇宙展厅
随着科技的不断发展,虚拟现实技术已经成为我们生活中的一部分.VR全景元宇宙展厅作为其中的一种形式,正越来越受欢迎.在这里,您可以探索未知的世界,体验全新的视觉和感官体验. 一.VR全景元宇宙展厅的概述 ...
- HTML5纯Web前端也能开发直播，不用开发服务器（使用face2face）
前段时间转载了某位大神的一篇文章,开发Web版一对一远程直播教室只需30分钟 - 使用face2face网络教室.非常有意思.看起来非常简单,但作为一名前端开发人员来说,还是有难度.因为要开发服务器端 ...
- 终于有人把Web 3.0和元宇宙讲明白了
导读:元宇宙的终极形态势必是去中心化的,而现在的网络生态并不能完全满足元宇宙去中心化的需求.一些人认为,即将到来的Web 3.0时代和元宇宙需要的网络生态高度重合.Web 3.0或许能够成为人类迈向元 ...
- 扬州首套旅游数字藏品“扬州园林”，打造数字化元宇宙城市名片
8月28日,"旅邮中国"首站--"旅邮中国·扬州站"正式启动上线,同时推出扬州首套旅游数字藏品"扬州园林",限量发行6000份.元宇宙热潮下 ...
- 高泽龙：河北省石家庄市打造中国元宇宙示范城区的规划和建议
十九届五中全会通过的<中共中央关于制定国民经济和社会发展第十四个五年规划和二〇三五年远景目标的建议>明确提出的"实施文化产业数字化战略",文化和旅游部发布<关于推 ...
- “数字太空”——立足天地一体化 打造企业级元宇宙
"数字太空"--立足天地一体化 打造企业级元宇宙 以"东方红一号"为起点,从"神舟一号"到"神舟十三号",在人造卫星 ...
- 青瓷游戏上市首日破发，“元宇宙光环”能否拯救年内首支游戏股？
文|螳螂观察 作者| 青月 距离2021年结束还有两周的时间,港股市场也终于迎来了年内首支游戏股--青瓷游戏. 作为中国知名的移动游戏开发商及发行商,同时还是休闲游戏及Rogue-like RPG的领 ...
- 打造品牌元宇宙 子虔科技Zetaverse产业元宇宙平台现已上线
近年来,Gen-Z逐渐成为消费主力军,对产品的差异化表现的需求越发强烈,对数字体验的需求一直在加速增长并不断升级,数字营销生态升级的趋势不可忽视. 许多品牌开始重新思考如何才能紧跟趋势,寻求图文视频之 ...
- Soul App打造社交元宇宙，打破次元壁
人际交往占据了人们日常生活的绝大部分,而这绝大部分都仅局限于熟人社交,就连社交应用也几乎以熟人社交为主.为了打破这一传统,Soul所提倡的兴趣社交为Z世代带来了新的社交可能. 在Soul创始人特别助理 ...
最新文章
- 电子书下载 | 超实用！阿里售后专家的 K8s 问题排查案例合集
- 大话设计模式—单例模式
- 设备管理器中的计算机有什么用,为什么计算机设备管理器中有两个图形卡？
- 医疗保健数据接口_应用的大数据：医疗保健的经济学
- libev源码分析(一)libev数据结构整理
- 循环往数组中添加对象
- python列表的特点_python基础（一）列表、集合和元组的基本特性
- AMD将于年内推出高端Polaris图形处理器
- c语言矩阵连乘递归算法,动态规划求解矩阵连乘问题
- opencv--normalize函数详解
- 自动化测试 -- 通过Cookie跳过登录验证码
- 安装 Win10+GTX1050ti+cuda8.0+cuDNN5.1+Tensorflow-gpu1.2
- MIT线性代数1806(8) 矩阵 秩 特解 通解
- 产品经理数据分析入门指南
- 51nod1679 连通率
- 保研夏令营、考研复试、出国时个人陈述模板与撰写注意事项
- dlsym RTLD_DEFAULT
- 作为一名成熟的云原生布道师，我是这么写作的
- 通灵学院|游戏设计研习6：制作谜题的原则★（1800字）
- 半导体物理实验 04 - | 椭圆仪测量薄膜厚度