Three.js 的第一個工程-添加文本
添加文本
在Three.js應用中添加文本有3種方式：
1.DOM+CSS
添加HTML文本。這種方法是在 three.js 應用程序中添加文本最常見且性能最好的方法之一。
工作原理：
不在 3D WebGL 上下文中渲染文本，而是使用 CSS 定位（通常是 position: absolute）將標準 HTML 元素（如 <div>、<p>、<span>）放置在 three.js 畫布之上或旁邊。
優點：
性能： HTML 文本渲染由瀏覽器的優化布局引擎處理，而不是 GPU。這比在 WebGL 中渲染文本要快得多，資源消耗也更少，特別是對于大量文本或頻繁更新的情況。
易于使用： 使用熟悉的 HTML 和 CSS 進行樣式設置（字體、顏色、陰影、響應式）、選擇和交互（點擊、懸停效果）。
質量： 文本渲染清晰，使用標準抗鋸齒，在任何顯示器上看起來都很清晰。
可訪問性： 可以使用標準網頁可訪問性實踐（ARIA 標簽、語義化 HTML）使其可訪問。
缺點：
不在 3D 空間中： 文本存在于 2D 瀏覽器層中，而不是場景中的真實 3D 對象。它不能位于 3D 對象后面，不能從 3D 對象投射/接收陰影，也不能原生地具有擠出或倒角等逼真的 3D 效果。
圖層管理： 需要仔細管理 CSS z-index，以確保文本相對于 3D 畫布正確顯示。
最適合： 用戶界面（UI）、HUD（平視顯示器）、標簽、說明、描述、菜單以及任何覆蓋在 3D 場景上的文本。
具體操作：
方法一.把文本內容和CSS裝飾都添加在HTML文件中：
在HTML文件index.html的body中添加
<body>
...
<div id="info">This is a three.js application</div>
...
</body>
再在style中添加
#info {
position: absolute; /* 使用絕對定位使其浮動在其他內容之上 */
top: 10px; /* 距離頂部 10px */
left: 0; /* 距離左邊 0 */
width: 100%; /* 寬度占滿整個視口 */
text-align: center; /* 文本居中 */
z-index: 1000; /* 確保在 canvas 之上 */
color: white; /* 文本顏色，根據背景調整 */
pointer-events: none; /* 可選：允許鼠標事件穿透，不影響與 3D 場景的交互 */
}
/* 確保 canvas 不覆蓋 #info */
canvas {
display: block;
}
方法二.在HTML中應用獨立的CSS裝飾文件
在項目目錄中（與 index.html 相同的文件夾），創建一個名為 styles.css 的新文件。添加CSS 代碼：
/* styles.css */
/* 確保 html 和 body 占滿整個視口 */
html, body {
margin: 0;
height: 100%;
overflow: hidden; /* 可選：隱藏滾動條 */
}
/* 確保 canvas 占滿其父容器 (body) */
canvas {
display: block;
}
/* 設置 #info 的樣式 */
#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 1000; /* 確保在 canvas 之上 */
color: white; /* 根據背景顏色調整文字顏色 */
/* background-color: rgba(0, 0, 0, 0.5); /* 可選：半透明背景提高可讀性 */
/* padding: 5px; /* 可選：內邊距 */
pointer-events: none; /* 可選：允許鼠標事件穿透文本，以便與3D場景交互 */
}
然后在index.html中，刪除原有的style標簽，添加link標簽
<link rel="stylesheet" href="styles.css">
添加完，保存，再次運行
npx vite --host
效果
可以看到
2.THREE.TextGeometry
工作原理： 使用 TextGeometry 類和字體文件（如 .json）為文本生成實際的 3D 網格幾何體，就像一個 3D 模型。
優點：
文本是真實的 3D 對象，可以被光照、產生陰影、被其他物體遮擋或遮擋其他物體，可以進行擠出、倒角等 3D 效果。
缺點：
性能： 性能開銷大（尤其長文本），需要加載字體文件（文件可能很大）。
復雜性： 設置復雜，需要加載字體文件并設置幾何體和材質。與 CSS 相比，動態樣式更改的靈活性較差。
質量： 渲染質量取決于網格分辨率和 WebGL；可能不如 DOM 文本清晰，尤其是在小尺寸時。
適用場景：
需要真實 3D 效果的文本，如建筑物上的立體招牌、帶深度的標題、需要物理交互的 3D 文字。
3.Canvas 紋理 (Canvas Texture)
工作原理：
在一個 2D
優點：
文本清晰（2D Canvas 渲染），可以應用在任何 3D 表面，可以被 3D 物體遮擋（因為是 3D 面片），適合動態內容（如分數、計時器）。
缺點：
需要手動管理 canvas 的重繪來更新文本，性能開銷在于頻繁更新紋理。
適用場景：
3D 物體表面的動態標簽、記分牌、需要貼圖效果的 2D 文本。
4. CSS2DRenderer / CSS3DRenderer
工作原理：
使用 three.js 的附加渲染器。將普通 HTML 元素作為文本容器，CSS2DRenderer 或 CSS3DRenderer 負責根據 3D 空間位置和相機視圖，通過 CSS transform 將這些 DOM 元素定位，使其看起來像是 3D 場景的一部分。
優點：
文本質量極高，樣式靈活（CSS），CSS2DRenderer 能實現文本與 3D 物體的正確遮擋，集成度高。
缺點：
實現復雜（需要額外的渲染循環），CSS3DRenderer 性能開銷大且與 WebGL 混合復雜。
適用場景：
CSS2DRenderer： 3D 空間中的動態標簽、名稱標簽（可被物體遮擋）。
CSS3DRenderer： 需要真實 3D 透視的界面（如 3D 菜單、信息亭）。
浙公網安備 33010602011771號