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号