首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

翻译 | 使用A-Frame打造WebVR版《我世界》

A-Frame 几年前,Mozilla 发明并开发了 WebVR —— 一套在浏览器中创造身临其境 VR 体验 JavaScript API —— 并将其发布在一个实验版本 Firefox 浏览器中... 2D web 相比,我们不再拘泥于使用一小撮固定 HTML 元素并将它们嵌套在很深层次结构中。...A-Frame 框架中所有代码都是 HTML 扩展,而且这些扩展可以用于其他对象和其他场景。...幸运是,A-Frame 拥有许多处理交互组件。VR 中用于类似光标点击场景方法是使用 raycaster,它射出一道激光并返回激光命中物体。...A-Frame 也提供了诸如 mouseenter 及 mouseleave 这样事件。事件包含了用户交互详细信息。 这赋予了我们点击能力,但我们还得写一些响应点击事件处理生成砖块逻辑。

2.8K90

元宇宙趋势下前端现状

/webxr-sampl…[2] 最新动态:2021 年 4月13日 Chrome 90 版本增加新 WebXR API: WebXR Depth API:获取用户设备现实环境中物体距离 WebXR...挑战 如何保持低延迟、高精度场景,以及快速处理数据进行渲染和展示动画能力。 传统通信方法速度不够快。查看场景产生大量数据可能超出渲染限制。...: A-Frame:基于 Three.js 开源框架,可以在 HTML 中直接配置场景,适用于简单 3D 场景搭建 方式一:在前端直接处理视频流。...在前端直接进行图像处理,可以用 Tracking.js 和 JSFeat。这两个库类似,都是在前端做计算机视觉,包括提取特征点、人脸识别等。...不管是对于 native AR 还是 WebAR,目前识别算法框架已经非常成熟,难就难在识别之后如何跟踪,如何更好更稳定更高质量跟踪。

1.4K20
您找到你想要的搜索结果了吗?
是的
没有找到

元宇宙趋势下前端现状

/webxr-sampl…[2] 最新动态:2021 年 4月13日 Chrome 90 版本增加新 WebXR API: WebXR Depth API:获取用户设备现实环境中物体距离 WebXR...挑战 如何保持低延迟、高精度场景,以及快速处理数据进行渲染和展示动画能力。 传统通信方法速度不够快。查看场景产生大量数据可能超出渲染限制。...: A-Frame:基于 Three.js 开源框架,可以在 HTML 中直接配置场景,适用于简单 3D 场景搭建 方式一:在前端直接处理视频流。...在前端直接进行图像处理,可以用 Tracking.js 和 JSFeat。这两个库类似,都是在前端做计算机视觉,包括提取特征点、人脸识别等。...不管是对于 native AR 还是 WebAR,目前识别算法框架已经非常成熟,难就难在识别之后如何跟踪,如何更好更稳定更高质量跟踪。

1.2K20

元宇宙趋势下前端现状

/webxr-sampl…[2] 最新动态:2021 年 4月13日 Chrome 90 版本增加新 WebXR API: WebXR Depth API:获取用户设备现实环境中物体距离 WebXR...挑战 如何保持低延迟、高精度场景,以及快速处理数据进行渲染和展示动画能力。 传统通信方法速度不够快。查看场景产生大量数据可能超出渲染限制。...: A-Frame:基于 Three.js 开源框架,可以在 HTML 中直接配置场景,适用于简单 3D 场景搭建 方式一:在前端直接处理视频流。...在前端直接进行图像处理,可以用 Tracking.js 和 JSFeat。这两个库类似,都是在前端做计算机视觉,包括提取特征点、人脸识别等。...不管是对于 native AR 还是 WebAR,目前识别算法框架已经非常成熟,难就难在识别之后如何跟踪,如何更好更稳定更高质量跟踪。

1.6K20

元宇宙下前端现状

简单点讲就是:我们在虚拟世界中一个全新身份一一应,并且不会间断地“生活下去” Roblox 提出一个真正元宇宙产品应该具备八大要素,很容易就能让人联想到《头号玩家》这部电影: 身份:拥有一个虚拟身份...挑战 如何保持低延迟、高精度场景,以及快速处理数据进行渲染和展示动画能力。 传统通信方法速度不够快。查看场景产生大量数据可能超出渲染限制。...: A-Frame:基于 Three.js 开源框架,可以在 HTML 中直接配置场景,适用于简单 3D 场景搭建 方式一:在前端直接处理视频流。...在前端直接进行图像处理,可以用 Tracking.js 和 JSFeat。这两个库类似,都是在前端做计算机视觉,包括提取特征点、人脸识别等。...不管是对于 native AR 还是 WebAR,目前识别算法框架已经非常成熟,难就难在识别之后如何跟踪,如何更好更稳定更高质量跟踪。

1.5K21

元宇宙相关前端技术

/webxr-sampl…[2] 最新动态:2021 年 4月13日 Chrome 90 版本增加新 WebXR API: WebXR Depth API:获取用户设备现实环境中物体距离 WebXR...挑战 如何保持低延迟、高精度场景,以及快速处理数据进行渲染和展示动画能力。 传统通信方法速度不够快。查看场景产生大量数据可能超出渲染限制。...: A-Frame:基于 Three.js 开源框架,可以在 HTML 中直接配置场景,适用于简单 3D 场景搭建 方式一:在前端直接处理视频流。...在前端直接进行图像处理,可以用 Tracking.js 和 JSFeat。这两个库类似,都是在前端做计算机视觉,包括提取特征点、人脸识别等。...不管是对于 native AR 还是 WebAR,目前识别算法框架已经非常成熟,难就难在识别之后如何跟踪,如何更好更稳定更高质量跟踪。

1.5K30

Apache Kafka 版本演进及特性介绍

如果不是Kafka非常熟悉,很容易忽略各个版本之间差异,也不会清楚某个版本特点及使用方式。...截止目前,最新版本是Kafka 2.4.0,也是最新稳定版本。 0.7.x版本 这是很老Kafka版本,它只有基本消息队列功能,连消息副本机制都没有,不建议使用。... 版本相比,新版本Producer API有点不同,一是连接Kafka方式上,旧版本生产者及消费者API连接是Zookeeper,而新版本则连接是Broker;二是新版Producer...Bug,生产使用可能会比较痛苦;而0.9.0版本Producer API已经比较稳定了,生产使用问题不大。...,因此Kafka可用性可靠性得到了提升; 二是Kafka 1.1.0开始支持副本跨路径迁移,分区副本可以在同一Broker不同磁盘目录间进行移动,这对于磁盘负载均衡非常有意义。

4.9K30

硬核看房利器——Web 全景实现

按照我们对空间方位认知,分为前后左右上下六个方位,可以想象为一个巨大立方体,而你就站在立方体中心位置。 ? 我们继续这六个面进行切片处理,并加入适当角度,尽量形成一个平滑平面。...当我们切片足够多时,这个立方体最终会变成一个球形,这是一个理想情况。 ? 如果只针对前后左右四面进行切片处理,直接拿掉上下方位贴图,也可以模拟出一个半覆盖视野全景场景。...file=/src/Pano.js ThreeJS 版 在开发原理部分,我们说到,立方体每个面进行无限切片处理,最终会形成理想球形。...因此考虑针对交互终止位置增加一个缓出动画,就好像转圈时候有个惯性似的,这也意味着我们需要对结尾动作进行方向速度上判断。...,利用其动画计算可以基于当前状态值特性,整体动效进行平滑过渡处理,因为对于交互动作监听时间间隔够短,在结束之前数值缓动效果可以忽略不计,但起始终止缓动却可以保留,堪称完美。

2.1K30

一款开源替代 ls 工具你值得拥有!

EXA 是 Unix 和 Linux 操作系统附带命令行程序 ls 现代替代品。 EXA LS 有什么不同之处?...; 长远:在表中显示文件及其元数据; 树视图:在树中显示文件及其子代; Git 集成:在存储库中时,查看文件 Git 状态; 筛选:隐藏列表中文件,显示不可见文件,并输出进行排序; Xattrs...采用 Cargo 安装 如果安装了最新版本Cargo(至少是Cargo v0.5.0),则可以使用它来安装exa $ cargo install exa Cargo构建exa二进制文件将放置在$HOME...如使用 Linux 发行版不支持通过以上方式安装,可通过官方 GitHub 仓库Releases页面下载编译好二进制版本进行使用。...https://github.com/ogham/exa/releases 下载对应二进制版本进行解压安装到指定目录下 # wget https://github.com/ogham/exa/releases

1.6K10

元宇宙趋势下前端,有哪些机会与挑战

简单点讲就是:我们在虚拟世界中一个全新身份一一应,并且不会间断地“生活下去” Roblox 提出一个真正元宇宙产品应该具备八大要素,很容易就能让人联想到《头号玩家》这部电影: 身份:拥有一个虚拟身份...挑战 如何保持低延迟、高精度场景,以及快速处理数据进行渲染和展示动画能力。 传统通信方法速度不够快。查看场景产生大量数据可能超出渲染限制。...: A-Frame:基于 Three.js 开源框架,可以在 HTML 中直接配置场景,适用于简单 3D 场景搭建 方式一:在前端直接处理视频流。...在前端直接进行图像处理,可以用 Tracking.js 和 JSFeat。这两个库类似,都是在前端做计算机视觉,包括提取特征点、人脸识别等。...不管是对于 native AR 还是 WebAR,目前识别算法框架已经非常成熟,难就难在识别之后如何跟踪,如何更好更稳定更高质量跟踪。

1.4K30

npm 中如何下载特定组件版本

开篇 为了更好进行说明,我们选择了 lodash 来演示,因为它是被其他模块依赖最多模块之一。...本文是在 windows 7 64位系统中进行测试,npm 版本为 v3.8.1,其他平台和 npm 版本在某些提示上可能会稍有不同。...4.11.1 是版本号很容易理解(这里只是当前最新版本,后续 loadash 版本更新之后可能会有变化),前面的 ^ 符号是什么鬼?...在版本成型之前,开发者可以任意更改其代码,甚至做不兼容变更而不受约束,然后通过修改次要版本,来控制版本;如果你软件被用于正式环境,或已经有了稳定 API 被使用者依赖,则将其升级到 1.0.0 版本或以上...使用大于号(>)或小于号(<)场景会比较少见,但 npm 也是支持, 用法举例 含义 范围 >4.11.1 大于 4.11.1 最新版本 version > 4.11.1 <4.11.1 小于

4.1K30

npm 中如何下载特定组件版本

开篇 为了更好进行说明,我们选择了 lodash 来演示,因为它是被其他模块依赖最多模块之一。...本文是在 windows 7 64位系统中进行测试,npm 版本为 v3.8.1,其他平台和 npm 版本在某些提示上可能会稍有不同。...4.11.1 是版本号很容易理解(这里只是当前最新版本,后续 loadash 版本更新之后可能会有变化),前面的 ^ 符号是什么鬼?...在版本成型之前,开发者可以任意更改其代码,甚至做不兼容变更而不受约束,然后通过修改次要版本,来控制版本;如果你软件被用于正式环境,或已经有了稳定 API 被使用者依赖,则将其升级到 1.0.0 版本或以上...使用大于号(>)或小于号(<)场景会比较少见,但 npm 也是支持, 用法举例 含义 范围 >4.11.1 大于 4.11.1 最新版本 version > 4.11.1 <4.11.1 小于

4.2K60

【元宇宙】iOS16将支持WebXR!一起来撸个WebVR华容道吧

除了ECS,A-Frame使用 HTML 标记语言来构建3D场景,相比于其他游戏引擎,不仅上手简单,还巧妙地利用了浏览器web环境得天独厚优势,如丰富dom操作api、强大css选择器、完善...关于 https 介绍原理,网上详尽介绍有很多,最后都要落地为两个文件:cert-file 和 key-file,而常用 Let's Encrypt 却无法为 localhost 申请证书,这里推荐使用...图片5.4 动画gltf 模型支持关键帧动画,可以C4D中制作并导出,宝箱开箱动画如下所示。而 A-Frame 动画播放则需要借助 animation-mixer 组件实现,详情可以参考组件文档。...,也就是激光发射器,通过监听激光棋盘格相交事件,以及用户触发扳机 triggerdown / triggerup 事件,计算 Vector3 移动距离三维向量,触发棋子移动动画。...这是一种适用于棋类游戏棋局编码方式,通过建立一个特殊转换表,棋盘上每一个位置所有可能状态赋予一个绝不重复随机编码,通过不同位置上随机编码进行异或计算,将复杂棋局编码为一个整数类型哈希值,

2.5K30

这几个库颠覆你对数据交互想象

前言 作为一个UI和动画敏感切图仔,在日常开发之余,也会关注一些贼好看图表库和插件。 接下来,我将给大家介绍几款web/python/vue/react里漂亮得不行开源库/实现。 ? 1....最新版本采用了Hooks写法,不像以往强行兼容Threejs,写起来更加友好。 不止抖音字体爆炸特效,它能实现什么,源于你技术和想象力。 以下一部分特效: ? 如果有人学会了...大佬带带?...抖音爆炸特效实现: ? 其中用到一个库:react-spring,这是react最优秀动画库,没有之一。...微软出品,必属精品 SandDance是使用Vega进行图表布局,使用Deck.gl进行WebGL渲染。 能在如此密集数据量上保持动画流畅和美观,也就微软爸爸能做到了。 我先跪了,你们随意。...创建index.html并把这些代码都贴上 <script

2K40

从封装 Nginx NJS 工具镜像聊起

写在前面 NJS 目前还处于相对早期版本,截止本篇文章发布,官方最新版本0.5.0,官网并没有二进制文件可以下载,软件随 Nginx 应用版本软件包提供,目前并未独立提供。...相比较官方镜像动辄 20MB 来说,最小版本不到 1MB,更小尺寸带来是更轻量和快速体验。如果你想获取最新镜像,可以访问 DockerHub 官方仓库。...针对不同版本进行构建 常常使用容器小伙伴都知道 Nginx 官方提供了 Alpine / Debian 两个版本镜像,而 NJS 目前也有三个小版本:0.3.x / 0.4.x 以及最新 0.5....为了减少代码重复,以及提高代码可维护性,可以将不同版本依赖单独声明为 .env 配置文件,然后搭配一个抽象度比较高容器配置文件,多个版本进行构建。...下载Docker Slim 后,使用命令原有镜像进行二次构建,即可构建出新小巧镜像: docker-slim build --target soulteary/njs:0.5.0 --tag soulteary

70910

自动机器学习工具全景图:精选22种框架,解放炼丹师

该函数库常用来处理实际问题中分类变量,如可能带高变量基数问题。它还能直接pandas数据帧共用、计算缺失值和处理可能在训练集之外变换值。 4....Tsfresh库优势在于其可扩展数据处理实现,这部分已经在具有大量时间序列数据生产系统中进行了测试。 5....Tree Parzen Estimators、SMAC和高斯过程方法相比,它始终具有更高一致性和更低错误率,而且这个方法特别适用于极高维数据分析。 10....MLBox https://github.com/AxeldeRomblay/MLBox 504星,115 Forks,854 Commits 最新版本0.5.0,2017.8.25更新 MLBox是一个新出框架...Auto-sklearn主要特点是一致性和稳定性。 5.

1.1K40

(数据科学学习手札111)geopandas 0.9.0重要新特性一览

本文示例文件已上传至我Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介   就在几天前,geopandas释放了其最新正式版本...图1 2 geopandas 0.9.0重要新特性一览   出于稳定考虑,我选择新建虚拟环境来探索新版本geopandas,完整命令如下(顺便一提,0.9.0版本最低支持Python版本为3.5...图2 2.2 新增wktwkb格式直接支持   在以前版本geopandas中,是没有直接API来wkt/wkb格式进行交互,往往需要配合shapely中相关功能。   ...图3 2.3 新增高度z属性   在以前版本中,我们可以对点要素构成GeoSeries或GeoDataFrame提取xy坐标属性,而在这次更新中,额外新增了高度z属性支持: ?...图4 2.4 dissolve()方法新增无字段依赖模式   我在geopandas系列教程空间计算篇(上)带大家学习过用于不同记录行矢量要素,按照某列或多列进行矢量融合方法dissolve(),而新版本

78320

从封装 Nginx NJS 工具镜像聊起

写在前面 NJS 目前还处于相对早期版本,截止本篇文章发布,官方最新版本0.5.0,官网并没有二进制文件可以下载,软件随 Nginx 应用版本软件包提供,目前并未独立提供。...相比较官方镜像动辄 20MB 来说,最小版本不到 1MB,更小尺寸带来是更轻量和快速体验。如果你想获取最新镜像,可以访问 DockerHub 官方仓库。...针对不同版本进行构建 常常使用容器小伙伴都知道 Nginx 官方提供了 Alpine / Debian 两个版本镜像,而 NJS 目前也有三个小版本:0.3.x / 0.4.x 以及最新 0.5....为了减少代码重复,以及提高代码可维护性,可以将不同版本依赖单独声明为 .env 配置文件,然后搭配一个抽象度比较高容器配置文件,多个版本进行构建。...下载Docker Slim 后,使用命令原有镜像进行二次构建,即可构建出新小巧镜像: docker-slim build --target soulteary/njs:0.5.0 --tag soulteary

80100

2024年YOLO还可以继续卷 | MedYOLO是怎么从YOLO家族中一步一步走过来

YOLOv5相比,MedYOLO主要区别在于用其3D版本替换了2D神经网络层。MedYOLO层数和宽度配置可以通过YAML文件进行,其中包含小型、中型和大型版本。...早期YOLO版本一样,MedYOLO使用训练集标签进行k-means聚类来计算其 Anchor 框先验。...目标性组件,该组件训练模型通过将其预测IoU模型置信度进行比较来评估其预测。最后,分类损失使用二进制交叉熵预测类别进行计算。...为了处理矩形输入,YOLOv5输入数据进行重采样和填充以获得方形形状,这降低了重采样过程中畸变。...3D方法相比,2.5D方法主要缺点是需要额外标注工作来保持大型结构上边界框精度,但 Voxel 级分割相比,这仍然简化了标注工作。

69110
领券