Building a AR Profile Card with Real-Time Face Detection
簡介
想像一張互動式 3D 個人資料卡，它可以追蹤您的臉部動作並即時做出反應 - 這就是 3D AR 個人資料卡的本質。由 P-R 創建。 Lopez 是一位精通 JavaScript、React 和 Firebase 的高級開發人員，將尖端的人臉檢測技術與時尚、優質的設計相結合，具有動態發光效果、豐富的漸變和精緻的佈局。它非常適合在個人層面上吸引用戶。
在本教程中，我們將使用 HTML、CSS 和 JavaScript 以及 TensorFlow 的 FaceMesh 來建立此互動式個人資料卡，以進行即時人臉偵測。該組件非常適合需要令人難忘的互動體驗的專業作品集或應用程式。對於那些對更多互動項目感興趣的人，不要錯過《角鬥士之戰》——一款受古羅馬啟發的驚心動魄的角鬥士紙牌遊戲，它結合了身臨其境的策略和令人驚嘆的視覺設計。
讓我們開始建立這張個人資料卡！
第 1 步：設定 HTML 結構
我們的個人資料卡將包括用於臉部偵測的網路攝影機來源、使用者資訊和社交媒體圖示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D AR Profile Card with Face Detection</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- Video for webcam stream -->
<video>
<p>Key HTML Elements<br>
Webcam Video: Captures real-time video for face detection.<br>
Profile Card: Contains profile information, including name, location, experience, skills, and links to Gladiators Battle and social media.<br>
Social Icons: Link to GitHub, LinkedIn, and Twitter (or X), providing a fully interactive and connected profile.<br>
Step 2: Styling the Profile Card with CSS<br>
The CSS brings the 3D and AR effects to life, with gradients, glowing shadows, and animations for an eye-catching experience.</p>
<p>Body and Background<br>
The body uses a radial gradient to create a soft, dark background that complements the card’s glowing effects.<br>
</p>
<pre class="brush:php;toolbar:false">body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background: radial-gradient(circle at center, #2d2d2d, #1b1b1b);
overflow: hidden;
font-family: 'Arial', sans-serif;
}
/* Webcam */
#webcam {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: -1;
}
個人資料卡設計
個人資料卡本身使用漸層背景、3D 變換和陰影效果來脫穎而出。
.profile-card {
position: relative;
width: 370px;
padding: 35px;
border-radius: 25px;
background: linear-gradient(145deg, #3d3d3d, #2a2a2a);
box-shadow:
0 15px 25px rgba(0, 0, 0, 0.6),
0 0 25px rgba(255, 215, 0, 0.3),
inset 0 0 15px rgba(255, 255, 255, 0.1);
transform-style: preserve-3d;
transform: perspective(1000px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
z-index: 1;
}
.profile-card:hover {
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.7),
0 0 50px rgba(255, 215, 0, 0.7),
inset 0 0 15px rgba(255, 255, 255, 0.2);
transform: scale(1.03);
}
頭像和文字樣式
頭像和文字的風格與卡片的高級美感相匹配，具有發光和大膽的效果。
.profile-avatar {
width: 130px;
height: 130px;
background: url('avatar.jpg') center/cover;
border-radius: 50%;
margin: 0 auto;
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4), 0px 0px 30px rgba(255, 215, 0, 0.5);
transform: translateZ(70px);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.profile-name {
font-size: 30px;
text-align: center;
color: #ffffff;
margin-top: 20px;
transform: translateZ(50px);
background: linear-gradient(45deg, #ffd700, #ffa500, #ff4500);
-webkit-background-clip: text;
color: transparent;
font-weight: bold;
text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
}
第 3 步：使用 TensorFlow FaceMesh 進行人臉偵測
JavaScript 程式碼使用 TensorFlow 的 FaceMesh 模型來偵測臉部並動態設定個人資料影像。這種尖端的方法為卡片帶來了 AR 的感覺。
網路攝影機與臉部偵測設定
setupCameraAndModel 函數初始化網路攝影機並載入 FaceMesh 模型以開始臉部追蹤。
const video = document.getElementById('webcam');
const profileAvatar = document.querySelector('.profile-avatar');
async function setupCameraAndModel() {
const model = await facemesh.load();
const stream = await navigator.mediaDevices.getUserMedia({
video: { width: 640, height: 480 }
});
video.srcObject = stream;
video.addEventListener('loadeddata', () => {
detectFaceAndCapture(model, stream);
});
}
人臉偵測與頭像更新
detectorFaceAndCapture 函數在偵測到人臉時捕捉照片並將其設定為頭像的背景。
async function detectFaceAndCapture(model, stream) {
const predictions = await model.estimateFaces(video);
if (predictions.length > 0) {
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageDataUrl = canvas.toDataURL('image/png');
profileAvatar.style.backgroundImage = `url(${imageDataUrl})`;
stream.getTracks().forEach(track => track.stop());
video.style.display = 'none';
} else {
requestAnimationFrame(() => detectFaceAndCapture(model, stream));
}
}
// Initialize camera and model
setupCameraAndModel();
此方法利用 AR 技術，透過即時動態設定個人資料圖片，為個人資料卡提供獨特的觸感。
結論
建立具有即時人臉偵測功能的互動式 3D AR 個人資料卡，為任何個人或專業網站帶來現代、優質的感覺。本教學結合了用於 3D 效果的 CSS 和使用 TensorFlow 進行動態人臉偵測的 JavaScript，示範了增強使用者互動的強大方法。如果您對更具創新性、身臨其境的項目感興趣，請不要錯過 Gladiators Battle——一款令人興奮的角鬥士卡牌遊戲，它將歷史主題與戰略遊戲玩法融為一體。欲了解更多信息，請訪問 GladiatorsBattle.com。
？發現更多：
Explore Gladiators Battle: Step into a world of ancient warriors and epic battles at https://gladiatorsbattle.com.
GitHub: Check out code examples and projects at https://github.com/HanGPIErr.
LinkedIn: Follow updates at https://www.linkedin.com/in/pierre-romain-lopez/.
Twitter: Stay connected on X at https://x.com/GladiatorsBT.
This article is your gateway to building visually stunning and interactive web elements. Join us as we continue exploring ways to merge advanced technology with intuitive, high-quality design.
The above is the detailed content of Building a AR Profile Card with Real-Time Face Detection. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1653
14
1413
52
1304
25
1251
29
1224
24
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Google Fonts Variable Fonts
Apr 09, 2025 am 10:42 AM
I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference
How to Create an Animated Countdown Timer With HTML, CSS and JavaScript
Apr 11, 2025 am 11:29 AM
Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more
HTML Data Attributes Guide
Apr 11, 2025 am 11:50 AM
Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
How to select a child element with the first class name item through CSS?
Apr 05, 2025 pm 11:24 PM
When the number of elements is not fixed, how to select the first child element of the specified class name through CSS. When processing HTML structure, you often encounter different elements...
Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'?
Apr 05, 2025 pm 05:51 PM
Questions about purple slash areas in Flex layouts When using Flex layouts, you may encounter some confusing phenomena, such as in the developer tools (d...
A Proof of Concept for Making Sass Faster
Apr 16, 2025 am 10:38 AM
At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads
In front-end development, how to use CSS and JavaScript to achieve searchlight effects similar to Windows 10 settings interface?
Apr 05, 2025 pm 10:21 PM
How to implement Windows-like in front-end development...
