THREEJS - 动态标签（dom方式）

最新推荐文章于 2025-06-11 17:10:16 发布

Crimaster·W

最新推荐文章于 2025-06-11 17:10:16 发布

阅读量4.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： THREEJS 文章标签： three.js javascript

本文链接：https://blog.youkuaiyun.com/Kreme/article/details/115261661

THREEJS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在三维场景中通过DOM元素为模型添加标签，包括创建DOM结构、封装转换坐标函数以及在渲染过程中实时更新标签位置。这种方法允许自定义样式，适应不同场景需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在三维场景中，我们会有一种需求：需要给三维场景中的模型打上标签，例如展示模型的名称/性能展示等，三维场景打标签的方式很多，有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，其它的几种方式，我们会在后续文章中给出。

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