【趣味Html】第11課：動態閃爍發光粒子五角星

打造炫酷的動態閃爍發光粒子五角星效果

在這里插入圖片描述

前言

在現代Web開發中，視覺效果的重要性不言而喻。今天我們將深入探討如何使用HTML5 Canvas和JavaScript創建一個令人驚艷的動態閃爍發光粒子五角星效果。這個項目不僅展示了Canvas的強大功能，還涉及了粒子系統、動畫循環、數學計算等多個技術要點。

項目概述

我們創建的效果包含以下特性：

  • 🌟 自動旋轉的五角星
  • ? 動態發光效果（呼吸燈效果）
  • 🎆 粒子系統（從五角星邊緣發射粒子）
  • 🎮 鼠標交互（靠近時產生更多粒子）
  • 📱 響應式設計

技術架構

1. 基礎結構

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>動態閃爍發光粒子五角星</title><style>body {margin: 0;padding: 0;background: #000;overflow: hidden;display: flex;justify-content: center;align-items: center;height: 100vh;}canvas {border: 1px solid #333;}</style>
</head>
<body><canvas id="starCanvas"></canvas>
</body>
</html>

2. 核心類設計

Particle 類（粒子系統）

粒子類是整個效果的核心組件之一，負責創建和管理單個粒子的行為：

class Particle {constructor(x, y) {this.x = x;                                    // 粒子位置this.y = y;this.vx = (Math.random() - 0.5) * 2;          // 隨機速度this.vy = (Math.random() - 0.5) * 2;this.life = 1;                                // 生命值this.decay = Math.random() * 0.02 + 0.005;    // 衰減速度this.size = Math.random() * 3 + 1;            // 粒子大小this.color = {                                // 隨機顏色r: Math.random() * 100 + 155,g: Math.random() * 100 + 155,b: Math.random() * 100 + 155};}update() {this.x += this.vx;        // 更新位置this.y += this.vy;this.life -= this.decay;  // 減少生命值this.size *= 0.99;        // 縮小粒子}draw() {// 繪制發光效果和粒子本體}
}

設計要點：

  • 使用隨機值創建自然的粒子運動
  • 生命周期管理確保粒子會自然消失
  • 漸變發光效果增強視覺沖擊力
Star 類（五角星系統）

五角星類管理五角星的繪制、旋轉和粒子生成：

class Star {constructor(x, y, size) {this.x = x;this.y = y;this.size = size;this.rotation = 0;              // 旋轉角度this.glowIntensity = 0;         // 發光強度this.glowDirection = 1;         // 發光方向this.particles = [];            // 粒子數組this.lastParticleTime = 0;      // 上次生成粒子的時間}getStarPoints() {// 計算五角星的10個頂點坐標const points = [];const outerRadius = this.size;const innerRadius = this.size * 0.4;for (let i = 0; i < 10; i++) {const angle = (i * Math.PI) / 5 + this.rotation;const radius = i % 2 === 0 ? outerRadius : innerRadius;const x = this.x + Math.cos(angle) * radius;const y = this.y + Math.sin(angle) * radius;points.push({ x, y });}return points;}
}

核心算法解析

1. 五角星頂點計算

五角星的繪制是基于數學計算的。一個標準五角星有10個頂點（5個外頂點和5個內頂點）：

// 五角星頂點計算公式
for (let i = 0; i < 10; i++) {const angle = (i * Math.PI) / 5 + this.rotation;  // 每個頂點間隔36度const radius = i % 2 === 0 ? outerRadius : innerRadius;const x = centerX + Math.cos(angle) * radius;const y = centerY + Math.sin(angle) * radius;
}

數學原理：

  • 五角星的外角為36°（2π/10）
  • 內外半徑比例約為0.4，創造最佳視覺效果
  • 通過旋轉角度實現動態旋轉

2. 粒子生成策略

粒子的生成采用了多種策略來創造豐富的視覺效果：

generateParticles() {const points = this.getStarPoints();// 策略1：在五角星邊緣生成粒子for (let i = 0; i < points.length; i++) {const point = points[i];const nextPoint = points[(i + 1) % points.length];// 線性插值在邊緣隨機位置生成粒子const t = Math.random();const x = point.x + (nextPoint.x - point.x) * t;const y = point.y + (nextPoint.y - point.y) * t;if (Math.random() < 0.3) {this.particles.push(new Particle(x, y));}}// 策略2：在頂點生成更多粒子for (let i = 0; i < points.length; i += 2) {const point = points[i];if (Math.random() < 0.5) {this.particles.push(new Particle(point.x, point.y));}}
}

3. 發光效果實現

發光效果通過Canvas的陰影和漸變功能實現：

// 動態發光強度
this.glowIntensity += this.glowDirection * 0.02;
if (this.glowIntensity >= 1 || this.glowIntensity <= 0) {this.glowDirection *= -1;  // 反向，創造呼吸效果
}// 應用發光效果
ctx.shadowColor = `rgba(255, 255, 100, ${this.glowIntensity})`;
ctx.shadowBlur = 20 + this.glowIntensity * 30;

性能優化技巧

1. 粒子生命周期管理

// 高效的粒子清理
this.particles = this.particles.filter(particle => {particle.update();return particle.life > 0;  // 只保留活著的粒子
});

2. 時間控制的粒子生成

// 避免每幀都生成粒子，控制生成頻率
const now = Date.now();
if (now - this.lastParticleTime > 50) {this.generateParticles();this.lastParticleTime = now;
}

3. 漸進式畫布清理

// 使用半透明矩形而非完全清除，創造拖尾效果
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

交互設計

鼠標交互

canvas.addEventListener('mousemove', (e) => {const rect = canvas.getBoundingClientRect();const mouseX = e.clientX - rect.left;const mouseY = e.clientY - rect.top;stars.forEach(star => {const dx = mouseX - star.x;const dy = mouseY - star.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < 150) {// 鼠標靠近時增加粒子生成for (let i = 0; i < 3; i++) {const angle = Math.random() * Math.PI * 2;const radius = Math.random() * star.size;const x = star.x + Math.cos(angle) * radius;const y = star.y + Math.sin(angle) * radius;star.particles.push(new Particle(x, y));}}});
});

響應式設計

window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 重新定位五角星stars.forEach((star, i) => {star.x = canvas.width / 4 + (i * canvas.width / 4);star.y = canvas.height / 2 + Math.sin(i * 2) * 100;});
});

擴展可能性

1. 顏色主題

可以添加多種顏色主題，讓用戶選擇不同的視覺風格：

const themes = {golden: { r: 255, g: 215, b: 0 },blue: { r: 100, g: 150, b: 255 },purple: { r: 200, g: 100, b: 255 }
};

2. 音頻響應

可以集成Web Audio API，讓粒子效果響應音頻頻率：

// 偽代碼
const audioContext = new AudioContext();
// 根據音頻頻率調整粒子生成速度和五角星大小

3. 3D效果

使用WebGL或Three.js可以將效果擴展到3D空間。

總結

這個動態閃爍發光粒子五角星項目展示了現代Web技術的強大能力。通過合理的類設計、數學計算、性能優化和交互設計，我們創造了一個既美觀又高效的視覺效果。

關鍵技術點：

  • Canvas 2D API的高級應用
  • 面向對象的JavaScript設計
  • 數學在圖形編程中的應用
  • 性能優化策略
  • 用戶交互設計

這個項目不僅可以作為學習Canvas和JavaScript的優秀案例，也可以作為更復雜視覺效果的基礎框架。希望這篇博客能夠幫助你理解現代Web圖形編程的精髓，并激發你創造更多令人驚艷的視覺效果！

源碼

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>動態閃爍發光粒子五角星</title><style>body {margin: 0;padding: 0;background: #000;overflow: hidden;display: flex;justify-content: center;align-items: center;height: 100vh;}canvas {border: 1px solid #333;}</style>
</head>
<body><canvas id="starCanvas"></canvas><script>const canvas = document.getElementById('starCanvas');const ctx = canvas.getContext('2d');// 設置畫布大小canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 粒子類class Particle {constructor(x, y) {this.x = x;this.y = y;this.vx = (Math.random() - 0.5) * 2;this.vy = (Math.random() - 0.5) * 2;this.life = 1;this.decay = Math.random() * 0.02 + 0.005;this.size = Math.random() * 3 + 1;this.color = {r: Math.random() * 100 + 155,g: Math.random() * 100 + 155,b: Math.random() * 100 + 155};}update() {this.x += this.vx;this.y += this.vy;this.life -= this.decay;this.size *= 0.99;}draw() {ctx.save();ctx.globalAlpha = this.life;// 創建發光效果const gradient = ctx.createRadialGradient(this.x, this.y, 0,this.x, this.y, this.size * 3);gradient.addColorStop(0, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 1)`);gradient.addColorStop(0.5, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.5)`);gradient.addColorStop(1, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0)`);ctx.fillStyle = gradient;ctx.beginPath();ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);ctx.fill();// 繪制核心粒子ctx.fillStyle = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 1)`;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fill();ctx.restore();}}// 五角星類class Star {constructor(x, y, size) {this.x = x;this.y = y;this.size = size;this.rotation = 0;this.glowIntensity = 0;this.glowDirection = 1;this.particles = [];this.lastParticleTime = 0;}// 計算五角星的頂點getStarPoints() {const points = [];const outerRadius = this.size;const innerRadius = this.size * 0.4;for (let i = 0; i < 10; i++) {const angle = (i * Math.PI) / 5 + this.rotation;const radius = i % 2 === 0 ? outerRadius : innerRadius;const x = this.x + Math.cos(angle) * radius;const y = this.y + Math.sin(angle) * radius;points.push({ x, y });}return points;}update() {this.rotation += 0.01;// 更新發光強度this.glowIntensity += this.glowDirection * 0.02;if (this.glowIntensity >= 1 || this.glowIntensity <= 0) {this.glowDirection *= -1;}// 生成粒子const now = Date.now();if (now - this.lastParticleTime > 50) {this.generateParticles();this.lastParticleTime = now;}// 更新粒子this.particles = this.particles.filter(particle => {particle.update();return particle.life > 0;});}generateParticles() {const points = this.getStarPoints();// 在五角星邊緣生成粒子for (let i = 0; i < points.length; i++) {const point = points[i];const nextPoint = points[(i + 1) % points.length];// 在邊緣隨機位置生成粒子const t = Math.random();const x = point.x + (nextPoint.x - point.x) * t;const y = point.y + (nextPoint.y - point.y) * t;if (Math.random() < 0.3) {this.particles.push(new Particle(x, y));}}// 在五角星頂點生成更多粒子for (let i = 0; i < points.length; i += 2) {const point = points[i];if (Math.random() < 0.5) {this.particles.push(new Particle(point.x, point.y));}}}draw() {const points = this.getStarPoints();// 繪制發光效果ctx.save();ctx.shadowColor = `rgba(255, 255, 100, ${this.glowIntensity})`;ctx.shadowBlur = 20 + this.glowIntensity * 30;// 繪制五角星主體ctx.fillStyle = `rgba(255, 255, 150, ${0.8 + this.glowIntensity * 0.2})`;ctx.strokeStyle = `rgba(255, 255, 200, ${0.9 + this.glowIntensity * 0.1})`;ctx.lineWidth = 2;ctx.beginPath();ctx.moveTo(points[0].x, points[0].y);for (let i = 1; i < points.length; i++) {ctx.lineTo(points[i].x, points[i].y);}ctx.closePath();ctx.fill();ctx.stroke();ctx.restore();// 繪制粒子this.particles.forEach(particle => particle.draw());}}// 創建多個五角星const stars = [];const numStars = 3;for (let i = 0; i < numStars; i++) {const x = canvas.width / 4 + (i * canvas.width / 4);const y = canvas.height / 2 + Math.sin(i * 2) * 100;const size = 50 + Math.random() * 30;stars.push(new Star(x, y, size));}// 動畫循環function animate() {// 清除畫布ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';ctx.fillRect(0, 0, canvas.width, canvas.height);// 更新和繪制所有五角星stars.forEach(star => {star.update();star.draw();});requestAnimationFrame(animate);}// 窗口大小調整window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 重新定位五角星stars.forEach((star, i) => {star.x = canvas.width / 4 + (i * canvas.width / 4);star.y = canvas.height / 2 + Math.sin(i * 2) * 100;});});// 鼠標交互canvas.addEventListener('mousemove', (e) => {const rect = canvas.getBoundingClientRect();const mouseX = e.clientX - rect.left;const mouseY = e.clientY - rect.top;stars.forEach(star => {const dx = mouseX - star.x;const dy = mouseY - star.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < 150) {// 鼠標靠近時增加粒子生成for (let i = 0; i < 3; i++) {const angle = Math.random() * Math.PI * 2;const radius = Math.random() * star.size;const x = star.x + Math.cos(angle) * radius;const y = star.y + Math.sin(angle) * radius;star.particles.push(new Particle(x, y));}}});});// 開始動畫animate();</script>
</body>
</html>

如果你覺得這個效果有趣，不妨嘗試修改參數，創造屬于你自己的獨特效果！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/908177.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/908177.shtml
英文地址，請注明出處：http://en.pswp.cn/news/908177.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

6.RV1126-OPENCV 形態學基礎膨脹及腐蝕

6.RV1126-OPENCV 形態學基礎膨脹及腐蝕

一.膨脹 1.膨脹原理 膨脹的本質就是通過微積分的轉換&#xff0c;將圖像A和圖形B進行卷積操作合并成一個AB圖像。核就是指任意的形狀或者大小的圖形B。例如下圖&#xff0c;將核(也就是圖形B)通過微積分卷積&#xff0c;和圖像A合并成一個圖像AB。 2.特點 圖像就會更加明亮 …
閱讀更多...
機器學習實戰37-基于情感字典和機器學習的股市輿情分析可視化系統

機器學習實戰37-基于情感字典和機器學習的股市輿情分析可視化系統

文章目錄 一、項目背景數字時代情感分析情況二、項目流程1.數據采集與預處理2.復合情感分析模型構建3.輿情分析可視化：三、機器學習算法原理1.支持向量機基礎2.核函數與高維映射3.情感分類特征融合4.模型訓練與優化四、實現代碼五、系統特點與優勢1.復合情感分析模型2.多維度可…
閱讀更多...
STM32F407VET6學習筆記9：編譯輸出固定大小.bin文件

STM32F407VET6學習筆記9：編譯輸出固定大小.bin文件

今日學習如何輸出固定大小的.bin編譯文件 目錄 Keil_V5 fromelf.exe 軟件目錄&#xff1a; 魔棒添加命令輸出bin文件&#xff1a; 輸出固定大小的bin文件&#xff1a; 計算bin文件大小&#xff1a; 安裝 SRecord 工具集&#xff1a; 使用SRecord&#xff1a; 參考文章&#…
閱讀更多...
【Web應用】若依框架：基礎篇14 源碼閱讀-后端代碼分析

【Web應用】若依框架：基礎篇14 源碼閱讀-后端代碼分析

文章目錄 ?前言?一、課程講解?總結 標題詳情作者JosieBook頭銜CSDN博客專家資格、阿里云社區專家博主、軟件設計工程師博客內容開源、框架、軟件工程、全棧&#xff08;,NET/Java/Python/C&#xff09;、數據庫、操作系統、大數據、人工智能、工控、網絡、程序人生口號成為你…
閱讀更多...
Java 單例模式詳解

Java 單例模式詳解

目錄 1. 餓漢式&#xff08;Eager Initialization&#xff09; 2. 懶漢式&#xff08;Lazy Initialization&#xff09; 3. 懶漢式 同步鎖&#xff08;線程安全&#xff09; 4. 雙重檢查鎖&#xff08;Double-Checked Locking&#xff09; 5. 靜態內部類&#xff08;推薦…
閱讀更多...
從 AMQP 到 RabbitMQ：核心組件設計與工作原理（一）

從 AMQP 到 RabbitMQ：核心組件設計與工作原理（一）

一、引言 ** 在當今分布式系統盛行的時代&#xff0c;消息隊列作為一種關鍵的中間件技術&#xff0c;承擔著系統間異步通信、解耦和削峰填谷的重要職責。AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;作為一種高級消息隊列協議&#xff0c;為消息隊列的實現…
閱讀更多...
概率單純形（Probability Simplex）

概率單純形（Probability Simplex）

目錄 定義性質在統計學中的應用在機器學習中的應用在信息論中的應用在優化問題中的應用在其他領域的應用 定義 定義&#xff1a;在數學中&#xff0c;概率單純形&#xff08;Probability Simplex&#xff09;是指在 n n n維空間中&#xff0c;所有分量非負且分量之和為1的向量…
閱讀更多...
項目練習：Vue2中el-button上的@click事件失效

項目練習：Vue2中el-button上的@click事件失效

文章目錄 一、問題描述二、解決 一、問題描述 button按鈕上綁定了一個click事件 對應的方法寫在methods中 但是&#xff0c;測試點擊時&#xff0c;無法觸發函數 二、解決 1、問題代碼 <el-buttonclick"changeConfirm(Y)"type"success"plainicon&qu…
閱讀更多...
十六、【前端強化篇】完善 TestCase 編輯器：支持 API 結構化定義與斷言配置

十六、【前端強化篇】完善 TestCase 編輯器：支持 API 結構化定義與斷言配置

【前端強化篇】完善 TestCase 編輯器：支持 API 結構化定義與斷言配置 前言準備工作第一步：更新前端 `TestCase` 類型定義第二步：改造 `TestCaseEditView.vue` 表單第三步：修改后端代碼中的TestCase模型和序列化器第四步：測試強化后的用例編輯器總結前言 在之前的后端文章…
閱讀更多...
HTTP連接管理——短連接，長連接，HTTP 流水線

HTTP連接管理——短連接，長連接，HTTP 流水線

連接管理是一個 HTTP 的關鍵話題&#xff1a;打開和保持連接在很大程度上影響著網站和 Web 應用程序的性能。在 HTTP/1.x 里有多種模型&#xff1a;短連接、_長連接_和 HTTP 流水線。 下面分別來詳細解釋 短連接 HTTP 協議最初&#xff08;0.9/1.0&#xff09;是個非常簡單的…
閱讀更多...
MySQL范式和反范式

MySQL范式和反范式

范式 是用一組規則定義的數據庫設計標準&#xff0c;旨在確保數據庫結構合理&#xff0c;避免數據冗余和異常。 目的 消除數據的重復&#xff0c;提高存儲效率防止數據異常&#xff08;插入、刪除、更新異常&#xff09;提高數據的完整性和一致性 第一范式 定義 所有列&am…
閱讀更多...
編程技能：格式化打印04，sprintf

編程技能：格式化打印04，sprintf

專欄導航 本節文章分別屬于《Win32 學習筆記》和《MFC 學習筆記》兩個專欄&#xff0c;故劃分為兩個專欄導航。讀者可以自行選擇前往哪個專欄。 &#xff08;一&#xff09;WIn32 專欄導航 上一篇&#xff1a;編程技能&#xff1a;格式化打印03&#xff0c;printf 回到目錄…
閱讀更多...
JavaScript性能優化實戰：深入探討JavaScript性能瓶頸與優化技巧

JavaScript性能優化實戰：深入探討JavaScript性能瓶頸與優化技巧

引言：為什么JavaScript性能至關重要 在現代Web開發中，JavaScript已成為構建交互式應用程序的核心技術。隨著單頁應用(SPA)和復雜前端架構的普及，JavaScript代碼的性能直接影響用戶體驗、轉化率甚至搜索引擎排名。研究表明，頁面加載時間每增加1秒，轉化率可能下降7%，而性能…
閱讀更多...
Java數據結構——八大排序

Java數據結構——八大排序

排序 插?排序希爾排序直接選擇排序堆排序冒泡排序快速排序歸并排序計數排序 排序的概念 排序&#xff1a;就是將一串東西&#xff0c;按照要求進行排序&#xff0c;按照遞增或遞減排序起來 穩定性&#xff1a;就是比如排序中有兩個相同的數&#xff0c;如果排序后&#xff0c…
閱讀更多...
WPF響應式UI的基礎：INotifyPropertyChanged

WPF響應式UI的基礎：INotifyPropertyChanged

INotifyPropertyChanged 1 實現基礎接口2 CallerMemberName優化3 數據更新觸發策略4 高級應用技巧4.1 表達式樹優化4.2 性能優化模式4.3 跨平臺兼容實現 5 常見錯誤排查 在WPF的MVVM架構中&#xff0c; INotifyPropertyChanged是實現數據驅動界面的核心機制。本章將深入解析屬…
閱讀更多...
低空城市場景下的多無人機任務規劃與動態協調！CoordField：無人機任務分配的智能協調場

低空城市場景下的多無人機任務規劃與動態協調！CoordField：無人機任務分配的智能協調場

作者&#xff1a;Tengchao Zhang 1 ^{1} 1 , Yonglin Tian 2 ^{2} 2 , Fei Lin 1 ^{1} 1, Jun Huang 1 ^{1} 1, Patrik P. Sli 3 ^{3} 3, Rui Qin 2 , 4 ^{2,4} 2,4, and Fei-Yue Wang 5 , 1 ^{5,1} 5,1單位&#xff1a; 1 ^{1} 1澳門科技大學創新工程學院工程科學系&#xff0…
閱讀更多...
解決Java項目NoProviderFoundException報錯

解決Java項目NoProviderFoundException報錯

前言 在Java開發中&#xff0c;jakarta.validation.NoProviderFoundException 是一個令人困惑的運行時錯誤&#xff0c;常因校驗框架依賴缺失或版本沖突導致。 問題復現&#xff1a;用戶注冊校驗失敗 業務場景 開發一個用戶注冊功能&#xff0c;要求&#xff1a; 校驗郵箱…
閱讀更多...
重構跨境收益互換價值鏈：新一代TRS平臺的破局之道

重構跨境收益互換價值鏈：新一代TRS平臺的破局之道

當香港券商面對內地洶涌的結構化產品需求&#xff0c;一套智能化的TRS系統正成為打開萬億市場的金鑰匙 在跨境金融的暗流涌動中&#xff0c;一家中資背景的香港券商正面臨甜蜜的煩惱&#xff1a;內地高凈值客戶對港股、美股的杠桿交易需求激增&#xff0c;但傳統TRS業務深陷操作…
閱讀更多...
實驗設計如何拯救我的 CEI VSR 28G 設計

實驗設計如何拯救我的 CEI VSR 28G 設計

為了確定總體設計裕量&#xff0c;CEI 28G VSR/100 Gb 以太網設計需要分析 500 萬種通道變化、收發器工藝和均衡設置的組合。蠻力模擬需要 278 天&#xff0c;這顯然超出了可用的時間表。 相反&#xff0c;我們使用實驗設計 &#xff08;DOE&#xff09; 和響應面建模 &#x…
閱讀更多...
【仿生機器人】刀劍神域——愛麗絲蘇醒計劃，需求文檔

【仿生機器人】刀劍神域——愛麗絲蘇醒計劃，需求文檔

仿生機器人"愛麗絲"系統架構設計需求文檔 一、硬件基礎 已完成頭部和頸部硬件搭建 25個舵機驅動表情系統 頸部旋轉功能 眼部攝像頭&#xff08;視覺輸入&#xff09; 麥克風陣列&#xff08;聽覺輸入&#xff09; 頸部發聲裝置&#xff08;語音輸出&#xff09…
閱讀更多...
最新文章

Copyright @ 2022~2023