threejs模型标注

### 在 Three.js 中实现 3D 模型标注

为了在 Three.js 中对 3D 模型进行标注，可以采用多种方式来增强用户体验并提供交互功能。一种常见的做法是在特定位置放置标签或文字说明，并确保这些标签能够跟随相机视角或其他动态因素保持可见。

#### 创建基本场景与加载模型

首先，构建基础的 Three.js 场景并引入所需的库：

import * as THREE from 'three';
// 如果使用GLTF格式，则还需要这个加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 加载外部3D模型文件
const loader = new GLTFLoader().load('path/to/model.gltf', function(gltf){
    scene.add(gltf.scene);
});

#### 添加标注对象

接着，在目标物体附近添加 HTML 或 Canvas 文本作为标注。这里展示了一种基于三维空间坐标的简单方法，即利用 `THREE.Sprite` 来承载文本材质[^4]。

function createLabel(textContent, position) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    // 设置画布大小适应字体高度宽度
    context.font = "Bold 18px Arial";
    let metrics = context.measureText(textContent);
    canvas.width = metrics.width + 20;
    canvas.height = 20;

    // 绘制背景颜色和边框
    context.fillStyle = "#fff";  
    context.fillRect(0, 0, context.canvas.width, context.canvas.height); 

    // 填充文字内容
    context.textAlign = "center";
    context.fillStyle = "#000";
    context.fillText(textContent, canvas.width / 2, 15);

    var texture = new THREE.CanvasTexture(canvas),
        material = new THREE.SpriteMaterial({
            map: texture,
            color: 0xffffff
        }),
        sprite = new THREE.Sprite(material);

    sprite.scale.set(16, 8, 1); // 调整缩放比例使文本合适显示
    sprite.position.copy(position);
    
    return sprite;
}

// 应用于具体mesh节点上
this.labels = this.model.children.filter(v => v.type === 'Mesh').forEach(mesh => {
    const labelPosition = mesh.position.clone(); // 获取当前网格的位置
    const labelText = `${Math.random()}`; // 这里仅为示例随机生成一些文本
    
    const labelSprite = createLabel(labelText, labelPosition);
    scene.add(labelSprite);
});

此代码片段展示了如何遍历已加载的模型子组件(`children`)，对于每一个符合条件的对象（例如类型为'Mesh'），创建一个新的带有自定义文本的 Sprite 并将其置于该对象旁边。

#### 动态更新标注位置

为了让标注始终面向摄像机方向或是当被标记物移动时同步调整其相对位移，可以在渲染循环内加入额外逻辑处理：

animate();

function animate(){
    requestAnimationFrame(animate);
    controls.update(); // 若有轨道控制器则需调用update刷新状态

    // 更新所有label的位置使其紧跟关联mesh变动
    labels.forEach((label,idx)=>{
        if(this.model && this.model.children[idx]){
            label.position.copy(this.model.children[idx].position);
        }
    });

    renderer.render(scene,camera);
}

上述过程实现了在一个简单的 Three.js 环境下向 3D 对象附加静态或动态文本标签的效果。当然实际项目可能还会涉及到更复杂的样式定制、响应式布局以及性能优化等问题。