使用CSS3DRenderer/CSS2DRenderer给模型上面添加html标签

 先放一下预览图

主要使用css2dRender和css3dRender，添加图片和标签。

思路：使用css3dRender添加一个图片，然后获取的位置坐标，使用css3dRender添加一个文字标签，也设置这个位置坐标，此外z轴设置一个高度，这样就可以放在图片的正上方。图片添加一个点击事件，点击之后会出现一个弹窗。海岛介绍文本框，使用css2dRender。

下面的通过css3dRender创建的html标签，都是放到了模型上面，这个要注意，不是放在场景scene里面。

使用css3dRender添加图片

        addimg(img, fun) {

            const imgDiv = document.createElement('div');

            imgDiv.style.width = '25px';

            imgDiv.style.height = '25px';

            imgDiv.style.backgroundImage = `url(${img})`;

            imgDiv.style.backgroundSize = 'contain';

            imgDiv.style.backgroundRepeat = 'no-repeat';

            imgDiv.style.cursor = 'pointer'; // 鼠标悬停时显示为手型

            imgDiv.style.zIndex = '1000'

            imgDiv.addEventListener('click', fun)

            const imgLabel = new CSS3DObject(imgDiv);

            imgLabel.position.set(1, 0, 0);

            return imgLabel

        },

使用css3dRender添加文本

        addtext(text) {

            // 创建第二个文本标签

            const labelDiv = document.createElement('div');

            labelDiv.innerHTML = text;

            labelDiv.style.color = 'white';

            labelDiv.style.fontSize = '5px';

            labelDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';

            labelDiv.style.padding = '2px';

            labelDiv.style.borderRadius = '3px';

            const label = new CSS3DObject(labelDiv);

            label.position.set(0, 1, 0); // 相对于模型的局部位置

            return label

        },

 这里有一点需要注意一下，就是添加渲染器css3dRender，他会增加一个html标签，默认会叠加到父元素canvas上面，这样就会导致鼠标缩放，模型无法缩放，所以需要设置pointerEvents属性为none，解决html标签对画布的遮盖。对于具体添加的某个css3dObject对象，我们可以看需求，然后决定是否添加 div.style.pointerEvents = 'none'; 如果添加了，就是说对这个html标签设置任何点击事件，都无法起作用。

 添加一个obj格式的模型，这里之前写过一篇文章，写了如何引入如何在three.js里面导入obj的三维模型_threejs 加载obj模型-CSDN博客

        addmodel() {

            // 加载三维模型

            let obj;

            const mtlLoader = new MTLLoader();

            mtlLoader.load(blockmtl, (materials) => {

                const objLoader = new OBJLoader();

                objLoader.setMaterials(materials);

                objLoader.load(block, (loadedObj) => {

                    obj = loadedObj;

                    obj.rotation.x = -20 * (Math.PI / 180);

                    obj.position.set(-2, 2, 0);

                    obj.scale.set(0.02, 0.02, 0.02);

                    // 创建文字标签

                    const labelDiv = document.createElement('div');

                    // labelDiv.className = 'label';

                    labelDiv.innerHTML = `海岛介绍</br>这是被海水围绕的小块陆地`;

                    labelDiv.style.color = 'white';

                    labelDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';

                    labelDiv.style.padding = '9px';

                    labelDiv.style.borderRadius = '5px';

                    const label = new CSS2DObject(labelDiv);

                    labelDiv.style.pointerEvents = 'none'

                    label.position.set(0, 0, 0); // 相对于模型的局部位置

                    obj.add(label);

                    // 创建图片标签

                    let imgLabel1 = this.addimg(img1, () => {

                        window.location.href = 'https://baidu.com';

                    })

                    obj.add(imgLabel1);

                    imgLabel1.position.y -= 70

                    imgLabel1.position.x += 90

                    let imgLabel2 = this.addimg(img2, () => {

                        this.showImageInfo('https://www.baidu.com')

                    })

                    obj.add(imgLabel2);

                    imgLabel2.position.y -= 120

                    imgLabel2.position.x += 140

                    // 创建文字标签

                    let label1 = this.addtext('电箱')

                    obj.add(label1);

                    label1.position.copy(imgLabel2.position); // 复制图片的位置

                    label1.position.y += 20; // 向上偏移

                    let label2 = this.addtext('路牌')

                    obj.add(label2);

                    label2.position.copy(imgLabel1.position); // 复制图片的位置

                    label2.position.y += 20; // 向上偏移

                    this.scene.add(obj);

                });

            });

        },

<template><div class="box"><div id="wbglg" style="margin-top: 100px;"></div></div>
</template><script>
import * as THREE from 'three';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import block from '../../public/obj/block/block.obj'
import blockmtl from '../../public/obj/block/block.mtl'
import img1 from '../assets/ganzi.png'
import img2 from '../assets/gaungai.png'export default {name: "TestS",components: {},mounted() {this.init()},data() {return {controls: "",scene: '',renderer: '',camera: '',css2DRenderer: '',css3DRenderer: '',}},methods: {showImageInfo(detailUrl) {// 创建弹窗const popup = document.createElement('div');popup.style.position = 'fixed';popup.style.top = '60%';popup.style.left = '51%';popup.style.transform = 'translate(-50%, -50%)';popup.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; // 半透明黑色背景popup.style.padding = '5px';popup.style.borderRadius = '10px'; // 圆角popup.style.boxShadow = '0 0 10px rgba(255, 255, 255, 0.2)'; // 白色阴影popup.style.zIndex = '1000';popup.style.fontSize = '14px';popup.style.color = 'white'; // 文字颜色popup.style.fontFamily = 'Arial, sans-serif'; // 字体popup.style.width = '190px'; // 弹窗宽度popup.style.textAlign = 'center'; // 文字居中// 创建关闭按钮（叉号）const closeButton = document.createElement('div');closeButton.innerHTML = '&times;'; // 叉号closeButton.style.position = 'absolute';closeButton.style.top = '10px';closeButton.style.right = '10px';closeButton.style.cursor = 'pointer'; // 鼠标悬停时显示为手型closeButton.style.fontSize = '24px'; // 叉号大小closeButton.style.color = 'white'; // 叉号颜色closeButton.style.userSelect = 'none'; // 禁止选中文本// 点击关闭按钮时移除弹窗closeButton.addEventListener('click', () => {document.body.removeChild(popup);});// 弹窗内容popup.innerHTML = `<h3>电箱信息</h3><p>状态：正常</p><p>管理人：张三</p><p>联系电话：12323232323</p><p style="color: #1E90FF; cursor: pointer;" onclick="window.open('${detailUrl}', '_blank')">点击查看详情</p>`;// 将关闭按钮添加到弹窗中popup.appendChild(closeButton);// 将弹窗添加到页面中document.body.appendChild(popup);},addmodel() {// 加载三维模型let obj;const mtlLoader = new MTLLoader();mtlLoader.load(blockmtl, (materials) => {const objLoader = new OBJLoader();objLoader.setMaterials(materials);objLoader.load(block, (loadedObj) => {obj = loadedObj;obj.rotation.x = -20 * (Math.PI / 180);obj.position.set(-2, 2, 0);obj.scale.set(0.02, 0.02, 0.02);// 创建文字标签const labelDiv = document.createElement('div');// labelDiv.className = 'label';labelDiv.innerHTML = `海岛介绍</br>这是被海水围绕的小块陆地`;labelDiv.style.color = 'white';labelDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';labelDiv.style.padding = '9px';labelDiv.style.borderRadius = '5px';const label = new CSS2DObject(labelDiv);labelDiv.style.pointerEvents = 'none'label.position.set(0, 0, 0); // 相对于模型的局部位置obj.add(label);// 创建图片标签let imgLabel1 = this.addimg(img1, () => {window.location.href = 'https://baidu.com';})obj.add(imgLabel1);imgLabel1.position.y -= 70imgLabel1.position.x += 90let imgLabel2 = this.addimg(img2, () => {this.showImageInfo('https://www.baidu.com')})obj.add(imgLabel2);imgLabel2.position.y -= 120imgLabel2.position.x += 140// 创建文字标签let label1 = this.addtext('电箱')obj.add(label1);label1.position.copy(imgLabel2.position); // 复制图片的位置label1.position.y += 20; // 向上偏移let label2 = this.addtext('路牌')obj.add(label2);label2.position.copy(imgLabel1.position); // 复制图片的位置label2.position.y += 20; // 向上偏移this.scene.add(obj);});});},animate() {requestAnimationFrame(this.animate);this.controls.update();this.renderer.render(this.scene, this.camera);this.css2DRenderer.render(this.scene, this.camera); // 更新 CSS2D 标签this.css3DRenderer.render(this.scene, this.camera); // 更新 CSS3D 标签},addtext(text) {const labelDiv = document.createElement('div');labelDiv.innerHTML = text;labelDiv.style.color = 'white';labelDiv.style.fontSize = '5px';labelDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';labelDiv.style.padding = '2px';labelDiv.style.borderRadius = '3px';const label = new CSS3DObject(labelDiv);label.position.set(0, 1, 0); // 相对于模型的局部位置return label},addimg(img, fun) {const imgDiv = document.createElement('div');imgDiv.style.width = '25px';imgDiv.style.height = '25px';imgDiv.style.backgroundImage = `url(${img})`;imgDiv.style.backgroundSize = 'contain';imgDiv.style.backgroundRepeat = 'no-repeat';imgDiv.style.cursor = 'pointer'; // 鼠标悬停时显示为手型imgDiv.style.zIndex = '1000'imgDiv.addEventListener('click', fun)const imgLabel = new CSS3DObject(imgDiv);imgLabel.position.set(1, 0, 0);return imgLabel},init() {this.scene = new THREE.Scene();this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);this.renderer = new THREE.WebGLRenderer({ alpha: true });this.renderer.setSize(window.innerWidth, window.innerHeight);document.querySelector("#wbglg").appendChild(this.renderer.domElement);// 创建 CSS2DRendererthis.css2DRenderer = new CSS2DRenderer();this.css2DRenderer.setSize(window.innerWidth, window.innerHeight);this.css2DRenderer.domElement.style.position = 'absolute';this.css2DRenderer.domElement.style.top = '0px';this.css2DRenderer.domElement.style.left = '0px';this.css2DRenderer.domElement.style.pointerEvents = 'none'document.body.appendChild(this.css2DRenderer.domElement);// 创建 CSS3DRendererthis.css3DRenderer = new CSS3DRenderer();this.css3DRenderer.setSize(window.innerWidth, window.innerHeight);this.css3DRenderer.domElement.style.position = 'absolute';this.css3DRenderer.domElement.style.top = '0px';this.css3DRenderer.domElement.style.left = '0px';this.css3DRenderer.domElement.style.pointerEvents = 'none'document.body.appendChild(this.css3DRenderer.domElement);// 添加模型this.addmodel()// 光源const light = new THREE.DirectionalLight(0xffffff);light.position.set(20, 10, 1305);this.scene.add(light);// 相机位置this.camera.position.set(0, 0, 5);// 加载场景控制插件this.controls = new OrbitControls(this.camera, this.renderer.domElement);this.controls.enableZoom = true; // 启用缩放this.controls.minDistance = 1; // 最小缩放距离this.controls.maxDistance = 100; // 最大缩放距离this.controls.enableDamping = true; // 启用阻尼效果this.controls.dampingFactor = 0.05; // 阻尼系数// 渲染循环this.animate();},},
}
</script>
<style scoped></style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/896291.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

完美隐藏滚动条方案 (2024 最新验证)

完美隐藏滚动条方案 (2024 最新验证)

完美隐藏滚动条方案 (2024 最新验证) css /* 全局隐藏竖直滚动条但保留滚动功能 */ html {overflow: -moz-scrollbars-none; /* Firefox 旧版 */scrollbar-width: none; /* Firefox 64 */-ms-overflow-style: none; /* IE/Edge */overflow-y: overlay; …
阅读更多...
Linux 内核配置机制详细讲解

Linux 内核配置机制详细讲解

本文是对 Linux 内核配置机制 make menuconfig 的 超详细分步解析&#xff0c;涵盖其工作原理、界面操作、配置逻辑及底层实现&#xff1a; 一、内核配置系统概述 Linux 内核的配置系统是一个 基于文本的交互式配置工具链&#xff0c;核心目标是通过定义 CONFIG_XXX 宏来控制内…
阅读更多...
视频裂变加群推广分享引流源码

视频裂变加群推广分享引流源码

源码介绍 视频裂变加群推广分享引流源码 最近网上很火&#xff0c;很多人都在用&#xff0c;适合引流裂变推广 测试环境&#xff1a;PHP7.4(PHP版本不限制) 第一次访问送五次观看次数&#xff0c;用户达到观看次数后需要分享给好友或者群,好友必须点击推广链接后才会增加观看次…
阅读更多...
python-leetcode-每日温度

python-leetcode-每日温度

739. 每日温度 - 力扣&#xff08;LeetCode&#xff09; class Solution:def dailyTemperatures(self, temperatures: List[int]) -> List[int]:n len(temperatures)answer [0] * nstack [] # 存储索引for i, temp in enumerate(temperatures):while stack and temperat…
阅读更多...
文件下载技术的终极选择：`＜a＞` 标签 vs File Saver.js

文件下载技术的终极选择：`＜a＞` 标签 vs File Saver.js

文件下载技术的终极选择&#xff1a;<a> 标签 vs File Saver.js 在 Web 开发中&#xff0c;文件下载看似简单&#xff0c;实则暗藏玄机。工作种常纠结于 <a> 标签的原生下载和 File Saver.js 等插件的灵活控制之间。本文将从原理、优缺点、场景对比到实战技巧&…
阅读更多...
deepseek sse流式输出

deepseek sse流式输出

链接 semi-ui-vue聊天组件 - 可以用这个组件优化界面 sse服务端消息推送 webflux&webclient Hi-Dream-Blog - 参考这个博客&#xff0c;可以在后台将markdown语法转为html 文章目录 链接效果代码pom.xmlDeepSeekControllerWebConfigDeepSeekClientAiChatRequestAiChatM…
阅读更多...
Linux时间日期类指令

Linux时间日期类指令

1、data指令 基本语法&#xff1a; date &#xff1a; 显示当前时间date %Y : 显示当前年份date %m &#xff1a; 显示当前月份date %d &#xff1a; 显示当前哪一天date “%Y-%m-%d %H:%M:%S" &#xff1a; 显示年月日时分秒date -s 字符串时间 &#xff1a; 设置系统时…
阅读更多...
SQLMesh 系列教程9- 宏变量及内置宏变量

SQLMesh 系列教程9- 宏变量及内置宏变量

SQLMesh 的宏变量是一个强大的工具&#xff0c;能够显著提高 SQL 模型的动态化能力和可维护性。通过合理使用宏变量&#xff0c;可以实现动态时间范围、多环境配置、参数化查询等功能&#xff0c;从而简化数据模型的开发和维护流程。随着数据团队的规模扩大和业务复杂度的增加&…
阅读更多...
鹏哥c语言数组（初阶数组）

鹏哥c语言数组（初阶数组）

前言&#xff1a; 对应c语言视频54集 内容&#xff1a; 一维数组的创建 数组是一组相同元素的集合&#xff0c; 数组的创建方式 type_t就是数组的元素类型&#xff0c;const_n是一个常量表达式&#xff0c;用来指定数组的大小 c99标准之前的&#xff0c;数组的大小必须是…
阅读更多...
爬虫运行后如何保存数据？

爬虫运行后如何保存数据？

爬虫运行后&#xff0c;将获取到的数据保存到本地或数据库中是常见的需求。Python 提供了多种方式来保存数据&#xff0c;包括保存为文本文件、CSV 文件、JSON 文件&#xff0c;甚至存储到数据库中。以下是几种常见的数据保存方法&#xff0c;以及对应的代码示例。 1. 保存为文…
阅读更多...
计算机视觉：经典数据格式(VOC、YOLO、COCO)解析与转换(附代码)

计算机视觉：经典数据格式(VOC、YOLO、COCO)解析与转换(附代码)

第一章&#xff1a;计算机视觉中图像的基础认知 第二章&#xff1a;计算机视觉&#xff1a;卷积神经网络(CNN)基本概念(一) 第三章&#xff1a;计算机视觉&#xff1a;卷积神经网络(CNN)基本概念(二) 第四章&#xff1a;搭建一个经典的LeNet5神经网络(附代码) 第五章&#xff1…
阅读更多...
linux--多进程基础（2）GDB多进程调试（面试会问）

linux--多进程基础（2）GDB多进程调试（面试会问）

将其中的命令记住就行。 总结&#xff1a;GDB下默认调试父进程&#xff0c;可以设置调试父进程还是子进程&#xff0c;也可以设置调试模式&#xff0c;调试模式默认是on即一个在调试另一个直接运行&#xff0c;off就是另一个进程挂起&#xff0c;最后可以查看调试进程 一般默认…
阅读更多...
Cramér-Rao界：参数估计精度的“理论底线”

Cramér-Rao界：参数估计精度的“理论底线”

Cramr-Rao界&#xff1a;参数估计精度的“理论底线” 在统计学中&#xff0c;当我们用数据估计一个模型的参数时&#xff0c;总希望估计结果尽可能精确。但精度有没有一个理论上的“底线”呢&#xff1f;答案是有的&#xff0c;这就是Cramr-Rao界&#xff08;Cramr-Rao Lower …
阅读更多...
【复习】Redis

【复习】Redis

数据结构 Redis常见的数据结构 String&#xff1a;缓存对象Hash&#xff1a;缓存对象、购物车List&#xff1a;消息队列Set&#xff1a;点赞、共同关注ZSet&#xff1a;排序 Zset底层&#xff1f; Zset底层的数据结构是由压缩链表或跳表实现的 如果有序集合的元素 < 12…
阅读更多...
Git add --- error: Filename too long

Git add --- error: Filename too long

0 Preface/Foreword 1 解决办法 git config --system core.longpaths true
阅读更多...
在 Spring Boot 中使用 `@Autowired` 和 `@Bean` 注解

在 Spring Boot 中使用 `@Autowired` 和 `@Bean` 注解

文章目录 在 Spring Boot 中使用 Autowired 和 Bean 注解示例背景 1. 定义 Student 类2. 配置类&#xff1a;初始化 Bean3. 测试类&#xff1a;使用 Autowired 注解自动注入 Bean4. Spring Boot 的自动装配5. 总结 在 Spring Boot 中使用 Autowired 和 Bean 注解 在 Spring Bo…
阅读更多...
【AI+智造】DeepSeek价值重构：当采购与物控遇上数字化转型的化学反应

【AI+智造】DeepSeek价值重构：当采购与物控遇上数字化转型的化学反应

作者&#xff1a;Odoo技术开发/资深信息化负责人 日期&#xff1a;2025年2月24日 引言&#xff1a;从事企业信息化工作16年&#xff0c;我见证过无数企业从手工台账到ERP系统的跨越。但真正让采购和物控部门脱胎换骨的&#xff0c;是融合了Deepseek AI的Odoo数字化解决方案——…
阅读更多...
qt-C++笔记之创建和初始化 `QGraphicsScene` 和 `QGraphicsView` 并关联视图和场景的方法

qt-C++笔记之创建和初始化 `QGraphicsScene` 和 `QGraphicsView` 并关联视图和场景的方法

qt-C++笔记之创建和初始化 QGraphicsScene 和 QGraphicsView 并关联视图和场景的方法 code review! 参考笔记 1.qt-C++笔记之创建和初始化 QGraphicsScene 和 QGraphicsView 并关联视图和场景的方法 2.qt-C++笔记之QGraphicsScene和 QGraphicsView中setScene、通过scene得到vie…
阅读更多...
Java Map实现类面试题

Java Map实现类面试题

Java Map实现类面试题 HashMap Q1: HashMap的实现原理是什么&#xff1f; HashMap基于哈希表实现&#xff0c;使用数组链表红黑树&#xff08;Java 8&#xff09;的数据结构。 public class HashMapPrincipleExample {// 模拟HashMap的基本结构public class SimpleHashMap&…
阅读更多...
Win32/ C++ 简易对话框封装框架(多语言, 通知栏菜单, 拖拽文件处理)

Win32/ C++ 简易对话框封装框架(多语言, 通知栏菜单, 拖拽文件处理)

Win32 简易对话框封装简易框架示例 1. 菜单操作: 多语言 2. 通知栏图标菜单 3. 其他操作: 接受拖拽文件等等 CDialogFrame.h #pragma once #include "CWindow/CDialogBase.h" #include "CNSFHeader.h" #include "Win32Utils/CBytesUtils.h" …
阅读更多...
最新文章

Copyright @ 2022~2023