博客

在三维场景中，我们会有一种需求：需要给三维场景中的模型打上标签，例如展示模型的名称/性能展示等，三维场景打标签的方式很多，有dom、sprite、Mesh等等，这篇文章来给大家介绍的是一种比较常见的打标签方式：dom。这种方式我们可以自定义任何样式的dom标签，比较容易满足各种场景的需求。

1.创建dom元素：

<div id="sign" style="position: absolute;">
    <div class="sign">
        <div class="name">我是标签</div>
    </div>
    <img src="./img/mark.png" class="mark" alt="">
</div>

2.函数的封装：目的是将三维场景中的坐标转化为屏幕坐标系的二维坐标：

/**
 * 添加标签：dom方式
 * @param {*} targePosition ：需要传递当前标签的位置
 * @param {*} targetId ：标签对应的dom的唯一ID，暂且用时间戳代替，避免重复
 */
function newTag(targePosition, targetId) {
    let world_vector = new THREE.Vector3(targePosition.x, targePosition.y, targePosition.z);
    let vector = world_vector.project(camera);
    let halfWidth = window.innerWidth / 2,
        halfHeight = window.innerHeight / 2;
    let x = Math.round(vector.x * halfWidth + halfWidth);
    let y = Math.round(-vector.y * halfHeight + halfHeight);

    /**
     * 更新立方体元素位置
     */
    let div = document.getElementById(targetId)
    div.style.left = x + 'px';
    div.style.top = y + 'px';
}

3.将目标标签的函数，放置到render函数中，这样做的目的就是保证标签可以根据我们需要展示的三维场景坐标实时转化为屏幕的二维坐标，保证标签是跟随场景的视角实时联动：

function render() {
    newTag({x: 100,  y: 100, z: 100}, 'sign');
    renderer.render(scene, camera);
}

上面就是三维场景中给模型打标签的方式之一 —— dom，其它的几种方式，我们会在后续文章中给出。

欢迎大家提意见或者建议，相互学习！！！！！！