threejs:document.createElement创建标签后css设置失效
vue3+threejs,做一个给模型批量CSS2D标签的案例,在导入模型的js文件里,跟着课程写的代码如下:
import * as THREE from 'three';
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';// 引入CSS2模型对象CSS2DObject
import {CSS2DObject
} from 'three/addons/renderers/CSS2DRenderer.js';const model = new THREE.Group();
const loader = new GLTFLoader();
// 路径要特别注意,默认是从public读取的,模型文件必须放在public下,并且路径前的public要省略
loader.load('models/简易小区.glb', gltf => {gltf.scene.getObjectByName("小区房子").traverse(function (obj) {if (obj.isMesh) {let label = tag(obj.name);const pos = new THREE.Vector3();obj.getWorldPosition(pos);label.position.copy(pos);label.name = obj.name;model.add(label);}});model.add(gltf.scene);
}, undefined, error => {console.error(error);
});function tag(name) {// 创建dom元素(作为标签)let div = document.createElement('div');div.innerHTML = name;div.classList.add('css2dtag');//使用dom元素生成CSS2模型对象CSS2DObjectlet label = new CSS2DObject(div);div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件return label;//返回CSS2模型标签 }export default model;
在vue文件里设置css。
<template>
</template><script setup>
import { scene } from './init.js';
</script><style scoped>.css2dtag {background: #ffffff;color: orangered;}
</style>
运行代码后发现css没有生效。

查了资料,找到一篇参考文章:
threejs 代码创建div设置样式不生效的问题原因探讨 - 简书
尝试去掉scoped,确实生效了,但是这种处理并不理想。
在继续学习threejs课程的时候,发现老师教了另一种批量创建的办法。
对vue文件修改如何:
增加一个id为css2dtag的div,css加上scoped。
<template><div id="css2dtag" style="display: none;"></div>
</template><script setup>
import { scene } from './init.js';
</script><style scoped>#css2dtag {background: #ffffff;color: orangered;}
</style>
然后在导入模型的js文件里,通过克隆这个div来批量创建dom元素。
import * as THREE from 'three';
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';// 引入CSS2模型对象CSS2DObject
import {CSS2DObject
} from 'three/addons/renderers/CSS2DRenderer.js';const model = new THREE.Group();
const loader = new GLTFLoader();
// 路径要特别注意,默认是从public读取的,模型文件必须放在public下,并且路径前的public要省略
loader.load('models/简易小区.glb', gltf => {gltf.scene.getObjectByName("小区房子").traverse(function (obj) {if (obj.isMesh) {let label = tag(obj.name);const pos = new THREE.Vector3();obj.getWorldPosition(pos);label.position.copy(pos);label.name = obj.name;model.add(label);}});model.add(gltf.scene);
}, undefined, error => {console.error(error);
});function tag(name) {// 通过克隆来批量创建divlet div = document.getElementById('css2dtag').cloneNode();div.innerHTML = name;//使用dom元素生成CSS2模型对象CSS2DObjectlet label = new CSS2DObject(div);div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件return label;//返回CSS2模型标签
}export default model;
再次运行代码,css生效了。

相关文章:
threejs:document.createElement创建标签后css设置失效
vue3threejs,做一个给模型批量CSS2D标签的案例,在导入模型的js文件里,跟着课程写的代码如下: import * as THREE from three; // 引入gltf模型加载库GLTFLoader.js import { GLTFLoader } from three/addons/loaders/GLTFLoader.…...
安装2018版本的petalinux曲折经历
具体操作步骤 1.安装VMware Workstation15.5的虚拟机2.安装Ubuntu16.04.43.配置Ubuntu的环境1.可以复制粘贴的指令2.安装vim 4.准备安装petalinux1.先配置petalinux的安装环境2.替换镜像源1.备份原始的软件源2.从以下镜像点找到合适自己系统版本的源3.执行替换镜像源1.打开源文…...
return和print
目录 1.print的用法 2.return的用法 3. print 和 return 的区别 4.总结 1.print的用法 print 是一个函数,用于将信息输出到控制台(终端)。它主要用于显示程序运行的结果,方便用户查看。print 的作用是输出内容,而不…...
springboot411-基于Java的自助客房服务系统(源码+数据库+纯前后端分离+部署讲解等)
💕💕作者: 爱笑学姐 💕💕个人简介:十年Java,Python美女程序员一枚,精通计算机专业前后端各类框架。 💕💕各类成品Java毕设 。javaweb,ssm…...
跨平台文件互传工具
一款高效便捷的文件互传工具,支持在线快速传输各种文件格式,无需注册,直接分享文件。适用于个人和团队间的文件共享,跨平台支持,轻松解决文件传输问题。免费的文件传输服务,让你的工作更高效。 gotool...
final 关键字在不同上下文中的用法及其名称
1. final 变量 名称:final 变量(常量)。 作用:一旦赋值后,值不能被修改。 分类: final 实例变量:必须在声明时或构造函数中初始化。 final 静态变量:必须在声明时或静态代码块中初…...
Elasticsearch:使用阿里云 AI 服务进行嵌入和重新排名
作者:来自 Elastic Toms Mura 将阿里云 AI 服务功能与 Elastic 结合使用。 更多阅读,请参阅 “Elasticsearch:使用阿里 infererence API 及 semantic text 进行向量搜索”。 在本文中,我们将介绍如何将阿里云 AI 功能与 Elastics…...
【愚公系列】《鸿蒙原生应用开发从零基础到多实战》004-TypeScript 中的泛型
标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主&…...
IP属地是通过卫星定位的吗?如何保护用户隐私
在数字时代,网络空间成为了人们日常生活不可或缺的一部分。随着社交媒体、在线服务等平台的兴起,用户IP属地信息的重要性日益凸显。然而,关于IP属地是如何确定的,尤其是是否通过卫星定位这一问题,却常常引发公众的疑问…...
【云原生之kubernetes实战】在k8s环境中高效部署Vikunja任务管理工具(含数据库配置)
【【云原生之kubernetes实战】在k8s环境中高效部署Vikunja任务管理工具(含数据库配置) 前言一、Vikunja介绍1.1 Vikunja简介1.2 Vikunja主要特点1.3 使用场景二、相关知识介绍2.1 本次实践存储介绍2.2 k8s存储介绍三、本次实践介绍3.1 本次实践简介3.2 本次环境规划3.3 部署前…...
php序列化与反序列化
文章目录 基础知识魔术方法:在序列化和反序列化过程中自动调用的方法什么是 __destruct() 方法?何时触发 __destruct() 方法?用途:语法示例: 反序列化漏洞利用前提条件一些绕过策略绕过__wakeup函数绕过正则匹配绕过相…...
视频级虚拟试衣技术在淘宝的产品化实践
作为一种新的商品表现形态,内容几乎存在于手淘用户动线全流程,例如信息流种草内容、搜索消费决策内容、详情页种草内容等。通过低成本、高时效的AIGC内容生成能力,能够从供给端缓解内容生产成本高的问题,通过源源不断的低成本供给…...
音视频-WAV格式
1. WAV格式说明: 2. 格式说明: chunkId:通常是 “RIFF” 四个字节,用于标识文件类型。(wav文件格式表示)chunkSize:表示整个文件除了chunkId和chunkSize这 8 个字节外的其余部分的大小。Forma…...
c++ std::array使用笔记
c array使用笔记 1. 构造2. 成员类型3. 元素访问4. 容量相关5. 填充与交换6. 比较操作7. 迭代器总结 array 是 C 标准库中的一个容器模板,它封装了一个固定长度的内建数组,并提供了类似于其他 STL 容器的接口。与内建数组相比, array 提供了…...
第39天:安全开发-JavaEE应用SpringBoot框架Actuator监控泄漏Swagger自动化
时间轴: Java知识点: 功能:数据库操作,文件操作,序列化数据,身份验证,框架开发,第三方组件使用等. 框架库:MyBatis,SpringMVC,SpringBoot…...
浏览器JS打不上断点,一点就跳到其他文件里。浏览器控制台 js打断点,指定的位置打不上断点,一打就跳到其他地方了。
关闭JavaScript 源代码映射,F12开发者模式 设置->偏好设置->源代码/来源->JavaScript 源代码映射。 肯定不是这个原因导致的,但这个办法可以暂时解决问题,点完这个东西就隐藏了webpack,有懂的来讲讲。 又浪费一个小时…...
conda环境管理 kernel注册到jupyter notebook
本文核心目的:解决jupyter notebook找不到自己想要的指定conda环境 首先安装anaconda,在win搜索框打开anaconda prompt 按下ctrlc终止操作的时间很长。需要输入y来确认操作。 国内镜像源不能使用代理服务访问。要尝试代理服务的打开与关闭 下面是cond…...
【SpringBoot】【log】 自定义logback日志配置
前言:默认情况下,SpringBoot内部使用logback作为系统日志实现的框架,将日志输出到控制台,不会写到日志文件。如果在application.properties或application.yml配置,这样只能配置简单的场景,保存路径、日志格…...
15.7 LangChain 版智能销售顾问实战:构建企业级知识驱动型对话系统
LangChain 版智能销售顾问实战:构建企业级知识驱动型对话系统 关键词:LangChain 销售系统、知识图谱集成、对话状态管理、生产级部署、多链协同优化 1. LangChain 销售系统架构设计 1.1 模块化架构全景图 #mermaid-svg-42MLuD3aMcpX0y8c {font-family:"trebuchet ms&q…...
计算机网络基础:揭开网络世界的神秘面纱
计算机网络基础:揭开网络世界的神秘面纱 前言一、计算机网络的定义与基本概念1.1 计算机网络的定义1.2 计算机网络的基本组成 二、计算机网络的分类2.1 按地域范围分类2.2 按拓扑结构分类 三、计算机网络体系结构3.1 OSI 参考模型3.2 TCP/IP 参考模型 四、网络通信协…...
练习(含atoi的模拟实现,自定义类型等练习)
一、结构体大小的计算及位段 (结构体大小计算及位段 详解请看:自定义类型:结构体进阶-CSDN博客) 1.在32位系统环境,编译选项为4字节对齐,那么sizeof(A)和sizeof(B)是多少? #pragma pack(4)st…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...
Git常用命令完全指南:从入门到精通
Git常用命令完全指南:从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...
k8s从入门到放弃之HPA控制器
k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率(或其他自定义指标)来调整这些对象的规模,从而帮助应用程序在负…...
若依登录用户名和密码加密
/*** 获取公钥:前端用来密码加密* return*/GetMapping("/getPublicKey")public RSAUtil.RSAKeyPair getPublicKey() {return RSAUtil.rsaKeyPair();}新建RSAUti.Java package com.ruoyi.common.utils;import org.apache.commons.codec.binary.Base64; im…...
【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解
一、前言 在HarmonyOS 5的应用开发模型中,featureAbility是旧版FA模型(Feature Ability)的用法,Stage模型已采用全新的应用架构,推荐使用组件化的上下文获取方式,而非依赖featureAbility。 FA大概是API7之…...
