查看原文
其他

元宇宙体育俱乐部 #kodeclubs 基于threejs的网页版虚拟空间

杜韦柯er 无界社区mixlab 2023-02-02

Mixlab

社区长期实战元宇宙,前文有总结 “元宇宙空间” 所具备的特质:开放多元的探索方式与创作工具多维沉浸式的社交身份系统综合的平台互通生态与机制

元宇宙空间可以是与现实世界无参照对应的完全虚拟世界,也可以是某一现实空间的虚拟映射(数字孪生)。有现实空间参考的元宇宙不同于数字孪生的“完全复制”,除了拥有现实空间的功能外(学校、医院、体育场等),用户在空间中活动时可拥有不同于线下的全新功能与社交体验。

知识库


kodeclubs 就是是一个巧妙运用 three.js 进行开发的 “元宇宙体育俱乐部”。kodeclubs 将线下真实存在的俱乐部线上迁移再创造了一个虚拟空间,不仅增加了俱乐部成员的新奇体验,也拓宽了俱乐部的宣传流量渠道,是一个非常有意思、好玩的元宇宙项目。



kodeclubs



kodeclubs 线下原型是 kode sports club 。开发团队仅用一周的时间便运用 three.js 完成了线上网站的制作。网站访问者可以在俱乐部不同的功能空间中游玩。


小杜


虚拟形象制作模块几乎是目前元宇宙的必备模块。kodeclubs的虚拟形象制作还挺可爱~



小杜


kodeclubs 的空间支持访问者鸟瞰模式与场景模式快速切换,俱乐部体验者可以短时间内熟悉俱乐部的各个部分的空间功能组成。



kodeclubs 全景俯瞰图

kodeclubs 篮球场

mixlab


kodeclubs 空间是如何与现实空间结合的?用户在虚拟空间的趣味性体验如何体现的呢?


小杜


kodeclubs  每个不同的场地都会有提示任务来引导用户了解现实俱乐部额情况完成任务后会有相关荣誉勋章的获得,用户也可以在空间游玩的过程中 “偶然” 获得勋章,在增强用户了解俱乐部的同时也增强了空间体验的趣味性。


与任务npc对话交流的过程中熟悉俱乐部。

偶遇勋章与荣誉系统


这让我想到了无界社区前几天刚发布的第三款徽章,你们都领了吗?#生命胶囊NFT徽章

shadow

小杜


社区的技术黑客们如果对运用 three.js 开发虚拟空间的技术实现感兴趣,推荐一篇官方团队的讲解文章。该团队详解了地图导航、3d模型内存占有的压缩优化、颜色与阴影变化交互控件开发的方法


官方技术实现讲解:
www.awwwards.com/kode-sports-club-by-merci-michel-wins-site-of-the-month-november-2020.html
官方网站:
www.kodeclubs.com

opus

如果有人感兴趣翻译技术讲解文章,我们将发放专栏作者准备的纪念NFT徽章~~~ 欢迎联系我

备注:翻译

元宇宙记者的 kodeclubs 游玩体验~

# 社区 three.js 项目推荐

作品集也可以很有创意:一款用键盘操控汽车的可交互游戏式个人主页 


生成艺术or游戏?无限可能的体验#Wayfinder-探索这片土地的诗意


捏脸是如何实现的?程序化生成3D头像


opus

最后,欢迎大家加入社群,参与 元宇宙 项目实战~

备注:元宇宙

[ 元宇宙创作者指南 ] 
[ 元宇宙资源清单 ]
github.com/shadowcz007/awesome-metaverse

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存