社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
css3的3d起步
perspective
perspective-origin
transform-style
手把手带你玩转css3-3d
第一步：html结构
第二步： 加上必要的3D属性，进入3D世界
第三步：加入必要的样式
第四步：3D变换来袭
第五步：animation让3D动起来
首页 web前端 css教程 教你玩转CSS3的3D效果

教你玩转CSS3的3D效果

巴扎黑
巴扎黑
Mar 18, 2017 pm 01:24 PM
3d

css3的3d起步

要玩转css3的3d，就必须了解几个词汇，便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物，从而展现3D的效果。旋转则不再是2D平面上的旋转，而是三维坐标系的旋转，就包括X轴，Y轴，Z轴旋转。平移同理。

当然用理论来说明，估计你还不明白。下面是3个gif：

  • 沿着X轴旋转

  • 沿着Y轴旋转

  • 沿着Z轴旋转

旋转应该没问题了，那理解平移起来就比较容易了，就是在在X轴、Y轴、z轴移动。

你可能会说透视比较不好理解，下面我介绍一下透视的几个属性。

perspective

perspective英文名便是透视，没有这东西就没办法形成3D效果，但是这个东西是怎么让我们浏览器形成3D 效果的呢，可以看下面这张图，其实学过绘画的应该知道透视关系，而这里就是这个道理。

但是在css里它是有数值的，例如perspective: 1000px这个代表什么呢？我们可以这样理解，如果我们直接眼睛靠着物体看，物体就超大占满我们的视线，我们离它距离越来越大，它在变小，立体感也就出来了是不是，其实这个数值构造了一个我们眼睛离屏幕的距离，也就构造了一个虚拟3D假象。

perspective-origin

由上面我们了解了perspective，而加上了这个origin是什么，我们前面说的这个是眼睛离物体的距离，而这个就是眼睛的视线，我们的视点的不同位置就决定了我们看到的不同景象，默认是中心，为perspectice-origin: 50% 50%,第一个数值是 3D 元素所基于的 X 轴，第二个定义在 y 轴上的位置

当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。必须与 perspective 属性一同使用，而且只影响 3D 转换元素。(W3school)

transform-style

perspective又来了，没错，它是css中3D的关键，transform-style默认是flat，如果你要在元素上视线3D效果的话，就必须用上transform-style: preserve-3d,否则就只是平面的变换，而不是3D的变换

手把手带你玩转css3-3d

以上我们稍微了解概念，下面就开始实战吧！

我们看一个效果，是不是很酷炫~

如果图片加载不出来，就直接访问https://bupt-hjm.github.io/css3-3d/，觉得可以的话记得给star咯hh

第一步：html结构

很简单的一个容器包裹着一个装了6个piece的piece-box

<p class="container">
    <p class="piece-box">
        <p class="piece piece-1"></p>
        <p class="piece piece-2"></p>
        <p class="piece piece-3"></p>
        <p class="piece piece-4"></p>
        <p class="piece piece-5"></p>
        <p class="piece piece-6"></p>
    </p>
</p>
登录后复制

第二步： 加上必要的3D属性，进入3D世界

通过上面的讲解，应该对perspective比较熟悉了吧,

/*容器*/
.container {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}
/*piece盒子*/
 .piece-box {
        perspective-origin: 50% 50%;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
}
登录后复制

第三步：加入必要的样式

/*容器*/
.container {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}
/*piece盒子*/
.piece-box {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 300px auto;
    perspective-origin: 50% 50%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
/*piece通用样式*/
.piece {
    position: absolute;
    width: 200px;
    height: 200px;
    background: red;
    opacity: 0.5;

}
.piece-1 {
    background: #FF6666;

}
.piece-2 {
    background: #FFFF00;
}
.piece-3 {
    background: #006699;
}
.piece-4 {
    background: #009999;
}
.piece-5 {
    background: #FF0033;
}
.piece-6 {
    background: #FF6600;
}
登录后复制

当然，在你完成这步之后你还是只看到一个正方形，也就是我们的piece-6,因为我们的3Dtransform还没开始

第四步：3D变换来袭

首先是实现走马灯，我们先不要让它走，先实现灯部分。

如何实现呢？因为要构成一个圆，圆是360度，而我们有6个piece，那么，很容易想到，我们需要把每一个piece以递增60度的方式rotateY，就变成如下


如何把他们从中心拉开呢？

这里我们还要注意一点，在我们使元素绕Y轴旋转以后，其实X轴和Z轴也会跟着旋转，所所以正方体的每个面的垂直线还是Z轴，我们就只需要改变下translateZ的值,而当translateZ为正的时候，就朝着我们的方向走来，这样就可以拉开了

但是拉开的距离如何衡量？

是不是一目了然了~

下面我们再修改下css

.piece-1 {
    background: #FF6666;
    -webkit-transform: rotateY(0deg) translateZ(173.2px);
    -ms-transform: rotateY(0deg) translateZ(173.2px);
    -o-transform: rotateY(0deg) translateZ(173.2px);
    transform: rotateY(0deg) translateZ(173.2px);

}
.piece-2 {
    background: #FFFF00;
    -webkit-transform: rotateY(60deg) translateZ(173.2px);
    -ms-transform: rotateY(60deg) translateZ(173.2px);
    -o-transform: rotateY(60deg) translateZ(173.2px);
    transform: rotateY(60deg) translateZ(173.2px);
}
.piece-3 {
    background: #006699;
    -webkit-transform: rotateY(120deg) translateZ(173.2px);
    -ms-transform: rotateY(120deg) translateZ(173.2px);
    -o-transform: rotateY(120deg) translateZ(173.2px);
    transform: rotateY(120deg) translateZ(173.2px);
}
.piece-4 {
    background: #009999;
    -webkit-transform: rotateY(180deg) translateZ(173.2px);
    -ms-transform: rotateY(180deg) translateZ(173.2px);
    -o-transform: rotateY(180deg) translateZ(173.2px);
    transform: rotateY(180deg) translateZ(173.2px);
}
.piece-5 {
    background: #FF0033;
    -webkit-transform: rotateY(240deg) translateZ(173.2px);
    -ms-transform: rotateY(240deg) translateZ(173.2px);
    -o-transform: rotateY(240deg) translateZ(173.2px);
    transform: rotateY(240deg) translateZ(173.2px);
}
.piece-6 {
    background: #FF6600;
    -webkit-transform: rotateY(300deg) translateZ(173.2px);
    -ms-transform: rotateY(300deg) translateZ(173.2px);
    -o-transform: rotateY(300deg) translateZ(173.2px);
    transform: rotateY(300deg) translateZ(173.2px);
}
登录后复制

是不是已经实现了走马灯了？

第五步：animation让3D动起来

要实现走马灯动，其实很简单，我们只要在piece-box上加上旋转动画就行了,5s完成动画，从0度旋转到360度

/*piece盒子*/
.piece-box {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 300px auto;
    perspective-origin: 50% 50%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    animation: pieceRotate 5s;
    -moz-animation: pieceRotate 5s; /* Firefox */
    -webkit-animation: pieceRotate 5s; /* Safari and Chrome */
    -o-animation: pieceRotate 5s ; /* Opera */
}
/*走马灯动画*/
@keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        transform: rotateY(360deg);}
}
/* Firefox */
@-moz-keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        transform: rotateY(360deg);}
}
/* Safari and Chrome */
@-webkit-keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        transform: rotateY(360deg);}
}
/* Opera */
@-o-keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        transform: rotateY(360deg);}
}
登录后复制

这里就不放gif了~hhh是不是实现了酷炫的效果，还没结束哦~更酷炫的正方体组装

正方体，其实也不难实现，我这里就不很详细说了，你首先可以想象一个面，然后去拓展其他面如何去实现，比如我们把正方体的前面translateZ(100px）让它靠近我们100px,然后后面translateZ(-100px）让它远离我们100px,左边是先translateX(-100px再rotateY(90deg),右边就是translateX(100px)再rotateY(90deg),上面是先translateY(-100px)，rotateX(90deg)，下面是先translateY(100px)，rotateX(90deg)，只要我们写进动画，一切就大功告成。

css就为如下，以下就只放piece1，其他读者可以自己类比实现，或者看我github的源码

.piece-1 {
     background: #FF6666;
     -webkit-transform: rotateY(0deg) translateZ(173.2px);
     -ms-transform: rotateY(0deg) translateZ(173.2px);
     -o-transform: rotateY(0deg) translateZ(173.2px);
     transform: rotateY(0deg) translateZ(173.2px);
     animation: piece1Rotate 5s 5s;
     -moz-animation: piece1Rotate 5s 5s; /* Firefox */
     -webkit-animation: piece1Rotate 5s 5s; /* Safari and Chrome */
     -o-animation: piece1Rotate 5s 5s; /* Opera */
     -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
      animation-fill-mode: forwards;
 }
/*front*/
 @keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
     -ms-transform: rotateY(0deg) translateZ(173.2px);
     -o-transform: rotateY(0deg) translateZ(173.2px);
     transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
     -ms-transform:  rotateY(0deg) translateZ(100px);
     -o-transform: rotateY(0deg)  translateZ(100px);
     transform:  rotateY(0deg) translateZ(100px);}
 }
 /* Firefox */
 @-moz-keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
     -ms-transform: rotateY(0deg) translateZ(173.2px);
     -o-transform: rotateY(0deg) translateZ(173.2px);
     transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
     -ms-transform:  rotateY(0deg) translateZ(100px);
     -o-transform: rotateY(0deg)  translateZ(100px);
     transform:  rotateY(0deg) translateZ(100px);}
 }
 /* Safari and Chrome */
 @-webkit-keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
     -ms-transform: rotateY(0deg) translateZ(173.2px);
     -o-transform: rotateY(0deg) translateZ(173.2px);
     transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
     -ms-transform:  rotateY(0deg) translateZ(100px);
     -o-transform: rotateY(0deg)  translateZ(100px);
     transform:  rotateY(0deg) translateZ(100px);}
 }
 /* Opera */
 @-o-keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
     -ms-transform: rotateY(0deg) translateZ(173.2px);
     -o-transform: rotateY(0deg) translateZ(173.2px);
     transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
     -ms-transform:  rotateY(0deg) translateZ(100px);
     -o-transform: rotateY(0deg)  translateZ(100px);
     transform:  rotateY(0deg) translateZ(100px);}
 }
登录后复制

细心的读者可以发现我用了一个animation-fill-mode: forwards;,这个其实就是让这些piece保持动画最后的效果，也就是正方体的效果，读者可以不加试试看，那还是会恢复原样。

最后就是正方体的旋转了，前面我们的容器已经用过animation了,读者可能会想我再加个class放animaiton不就行了，hhh，animaiton会覆盖掉前面的，那前面的走马灯的动画就没了，所以在html结构中，我再加了一个box包裹piece, 如下

<p class="container">
    <p class="piece-box">
        <p class="piece-box2"><!--新加的容器-->
            <p class="piece piece-1"></p>
            <p class="piece piece-2"></p>
            <p class="piece piece-3"></p>
            <p class="piece piece-4"></p>
            <p class="piece piece-5"></p>
            <p class="piece piece-6"></p>
        </p>
    </p>
</p>
登录后复制

在动画上我们可以控制正方体动画的延时时间，就是等到正方体组装完成后再开始动画

animation: boxRotate 5s 10s infinite;第一个5s是动画时长，第二个10s是延时时间，然后我们让正方体的旋转，绕X轴从0度到360度,绕Y轴也0到Y轴360度。

.piece-box2 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    animation: boxRotate 5s 10s infinite;
    -moz-animation: boxRotate 5s 10s infinite; /* Firefox */
    -webkit-animation: boxRotate 5s 10s infinite; /* Safari and Chrome */
    -o-animation: boxRotate 5s 10s infinite; /* Opera */
}
/*正方体旋转动画*/
@keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}
/* Firefox */
@-moz-keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}
/* Safari and Chrome */
@-webkit-keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}
/* Opera */
@-o-keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}
登录后复制

最后效果，大功告成！

以上是教你玩转CSS3的3D效果的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

如何修复KB5055612无法在Windows 10中安装？
4 周前 By DDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：种植花园 - 完整的突变指南
3 周前 By DDD
北端：融合系统，解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程
1672
14
CakePHP 教程
1428
52
Laravel 教程
1332
25
PHP教程
1277
29
C# 教程
1257
24
显示更多
Related knowledge
为何在自动驾驶方面Gaussian Splatting如此受欢迎，开始放弃NeRF？ 为何在自动驾驶方面Gaussian Splatting如此受欢迎，开始放弃NeRF？ Jan 17, 2024 pm 02:57 PM

写在前面&笔者的个人理解三维Gaussiansplatting（3DGS）是近年来在显式辐射场和计算机图形学领域出现的一种变革性技术。这种创新方法的特点是使用了数百万个3D高斯，这与神经辐射场（NeRF）方法有很大的不同，后者主要使用隐式的基于坐标的模型将空间坐标映射到像素值。3DGS凭借其明确的场景表示和可微分的渲染算法，不仅保证了实时渲染能力，而且引入了前所未有的控制和场景编辑水平。这将3DGS定位为下一代3D重建和表示的潜在游戏规则改变者。为此我们首次系统地概述了3DGS领域的最新发展和关

了解 Microsoft Teams 中的 3D Fluent 表情符号 了解 Microsoft Teams 中的 3D Fluent 表情符号 Apr 24, 2023 pm 10:28 PM

您一定记得，尤其是如果您是Teams用户，Microsoft在其以工作为重点的视频会议应用程序中添加了一批新的3DFluent表情符号。在微软去年宣布为Teams和Windows提供3D表情符号之后，该过程实际上已经为该平台更新了1800多个现有表情符号。这个宏伟的想法和为Teams推出的3DFluent表情符号更新首先是通过官方博客文章进行宣传的。最新的Teams更新为应用程序带来了FluentEmojis微软表示，更新后的1800表情符号将为我们每天

选择相机还是激光雷达？实现鲁棒的三维目标检测的最新综述 选择相机还是激光雷达？实现鲁棒的三维目标检测的最新综述 Jan 26, 2024 am 11:18 AM

0.写在前面&&个人理解自动驾驶系统依赖于先进的感知、决策和控制技术，通过使用各种传感器（如相机、激光雷达、雷达等）来感知周围环境，并利用算法和模型进行实时分析和决策。这使得车辆能够识别道路标志、检测和跟踪其他车辆、预测行人行为等，从而安全地操作和适应复杂的交通环境.这项技术目前引起了广泛的关注，并认为是未来交通领域的重要发展领域之一。但是，让自动驾驶变得困难的是弄清楚如何让汽车了解周围发生的事情。这需要自动驾驶系统中的三维物体检测算法可以准确地感知和描述周围环境中的物体，包括它们的位置、

Windows 11中的Paint 3D：下载、安装和使用指南 Windows 11中的Paint 3D：下载、安装和使用指南 Apr 26, 2023 am 11:28 AM

当八卦开始传播新的Windows11正在开发中时，每个微软用户都对新操作系统的外观以及它将带来什么感到好奇。经过猜测，Windows11就在这里。操作系统带有新的设计和功能更改。除了一些添加之外，它还带有功能弃用和删除。Windows11中不存在的功能之一是Paint3D。虽然它仍然提供经典的Paint，它对抽屉，涂鸦者和涂鸦者有好处，但它放弃了Paint3D，它提供了额外的功能，非常适合3D创作者。如果您正在寻找一些额外的功能，我们建议AutodeskMaya作为最好的3D设计软件。如

单卡30秒跑出虚拟3D老婆！Text to 3D生成看清毛孔细节的高精度数字人，无缝衔接Maya、Unity等制作工具 单卡30秒跑出虚拟3D老婆！Text to 3D生成看清毛孔细节的高精度数字人，无缝衔接Maya、Unity等制作工具 May 23, 2023 pm 02:34 PM

ChatGPT给AI行业注入一剂鸡血，一切曾经的不敢想，都成为如今的基操。正持续进击的Text-to-3D，就被视为继Diffusion（图像）和GPT（文字）后，AIGC领域的下一个前沿热点，得到了前所未有的关注度。这不，一款名为ChatAvatar的产品低调公测，火速收揽超70万浏览与关注，并登上抱抱脸周热门（Spacesoftheweek）。△ChatAvatar也将支持从AI生成的单视角/多视角原画生成3D风格化角色的Imageto3D技术，受到了广泛关注现行beta版本生成的3D模型，

CLIP-BEVFormer：显式监督BEVFormer结构，提升长尾检测性能 CLIP-BEVFormer：显式监督BEVFormer结构，提升长尾检测性能 Mar 26, 2024 pm 12:41 PM

写在前面&笔者的个人理解目前，在整个自动驾驶系统当中，感知模块扮演了其中至关重要的角色，行驶在道路上的自动驾驶车辆只有通过感知模块获得到准确的感知结果后，才能让自动驾驶系统中的下游规控模块做出及时、正确的判断和行为决策。目前，具备自动驾驶功能的汽车中通常会配备包括环视相机传感器、激光雷达传感器以及毫米波雷达传感器在内的多种数据信息传感器来收集不同模态的信息，用于实现准确的感知任务。基于纯视觉的BEV感知算法因其较低的硬件成本和易于部署的特点，以及其输出结果能便捷地应用于各种下游任务，因此受到工业

牛津大学最新！Mickey：3D中的2D图像匹配SOTA！(CVPR\'24) 牛津大学最新！Mickey：3D中的2D图像匹配SOTA！(CVPR\'24) Apr 23, 2024 pm 01:20 PM

写在前面项目链接：https://nianticlabs.github.io/mickey/给定两张图片，可以通过建立图片之间的对应关系来估计它们之间的相机姿态。通常，这些对应关系是二维到二维的，而我们估计的姿态在尺度上是不确定的。一些应用，例如随时随地实现即时增强现实，需要尺度度量的姿态估计，因此它们依赖于外部的深度估计器来恢复尺度。本文提出了MicKey，这是一个关键点匹配流程，能够够预测三维相机空间中的度量对应关系。通过学习跨图像的三维坐标匹配，我们能够在没有深度测试的情况下推断出度量相对

自动驾驶3D视觉感知算法深度解读 自动驾驶3D视觉感知算法深度解读 Jun 02, 2023 pm 03:42 PM

对于自动驾驶应用来说，最终还是需要对3D场景进行感知。道理很简单，车辆不能靠着一张图像上得到感知结果来行驶，就算是人类司机也不能对着一张图像来开车。因为物体的距离和场景的和深度信息在2D感知结果上是体现不出来的，而这些信息才是自动驾驶系统对周围环境作出正确判断的关键。一般来说，自动驾驶车辆的视觉传感器（比如摄像头）安装在车身上方或者车内后视镜上。无论哪个位置，摄像头所得到的都是真实世界在透视视图（PerspectiveView）下的投影（世界坐标系到图像坐标系）。这种视图与人类的视觉系统很类似，

See all articles