当前位置: 首页 > news >正文

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&#xff0c;做一个给模型批量CSS2D标签的案例&#xff0c;在导入模型的js文件里&#xff0c;跟着课程写的代码如下&#xff1a; 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 是一个函数&#xff0c;用于将信息输出到控制台&#xff08;终端&#xff09;。它主要用于显示程序运行的结果&#xff0c;方便用户查看。print 的作用是输出内容&#xff0c;而不…...

springboot411-基于Java的自助客房服务系统(源码+数据库+纯前后端分离+部署讲解等)

&#x1f495;&#x1f495;作者&#xff1a; 爱笑学姐 &#x1f495;&#x1f495;个人简介&#xff1a;十年Java&#xff0c;Python美女程序员一枚&#xff0c;精通计算机专业前后端各类框架。 &#x1f495;&#x1f495;各类成品Java毕设 。javaweb&#xff0c;ssm&#xf…...

跨平台文件互传工具

一款高效便捷的文件互传工具&#xff0c;支持在线快速传输各种文件格式&#xff0c;无需注册&#xff0c;直接分享文件。适用于个人和团队间的文件共享&#xff0c;跨平台支持&#xff0c;轻松解决文件传输问题。免费的文件传输服务&#xff0c;让你的工作更高效。 gotool...

final 关键字在不同上下文中的用法及其名称

1. final 变量 名称&#xff1a;final 变量&#xff08;常量&#xff09;。 作用&#xff1a;一旦赋值后&#xff0c;值不能被修改。 分类&#xff1a; final 实例变量&#xff1a;必须在声明时或构造函数中初始化。 final 静态变量&#xff1a;必须在声明时或静态代码块中初…...

Elasticsearch:使用阿里云 AI 服务进行嵌入和重新排名

作者&#xff1a;来自 Elastic Toms Mura 将阿里云 AI 服务功能与 Elastic 结合使用。 更多阅读&#xff0c;请参阅 “Elasticsearch&#xff1a;使用阿里 infererence API 及 semantic text 进行向量搜索”。 在本文中&#xff0c;我们将介绍如何将阿里云 AI 功能与 Elastics…...

【愚公系列】《鸿蒙原生应用开发从零基础到多实战》004-TypeScript 中的泛型

标题详情作者简介愚公搬代码头衔华为云特约编辑&#xff0c;华为云云享专家&#xff0c;华为开发者专家&#xff0c;华为产品云测专家&#xff0c;CSDN博客专家&#xff0c;CSDN商业化专家&#xff0c;阿里云专家博主&#xff0c;阿里云签约作者&#xff0c;腾讯云优秀博主&…...

IP属地是通过卫星定位的吗?如何保护用户隐私

在数字时代&#xff0c;网络空间成为了人们日常生活不可或缺的一部分。随着社交媒体、在线服务等平台的兴起&#xff0c;用户IP属地信息的重要性日益凸显。然而&#xff0c;关于IP属地是如何确定的&#xff0c;尤其是是否通过卫星定位这一问题&#xff0c;却常常引发公众的疑问…...

【云原生之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序列化与反序列化

文章目录 基础知识魔术方法&#xff1a;在序列化和反序列化过程中自动调用的方法什么是 __destruct() 方法&#xff1f;何时触发 __destruct() 方法&#xff1f;用途&#xff1a;语法示例&#xff1a; 反序列化漏洞利用前提条件一些绕过策略绕过__wakeup函数绕过正则匹配绕过相…...

视频级虚拟试衣技术在淘宝的产品化实践

作为一种新的商品表现形态&#xff0c;内容几乎存在于手淘用户动线全流程&#xff0c;例如信息流种草内容、搜索消费决策内容、详情页种草内容等。通过低成本、高时效的AIGC内容生成能力&#xff0c;能够从供给端缓解内容生产成本高的问题&#xff0c;通过源源不断的低成本供给…...

音视频-WAV格式

1. WAV格式说明&#xff1a; 2. 格式说明&#xff1a; chunkId&#xff1a;通常是 “RIFF” 四个字节&#xff0c;用于标识文件类型。&#xff08;wav文件格式表示&#xff09;chunkSize&#xff1a;表示整个文件除了chunkId和chunkSize这 8 个字节外的其余部分的大小。Forma…...

c++ std::array使用笔记

c array使用笔记 1. 构造2. 成员类型3. 元素访问4. 容量相关5. 填充与交换6. 比较操作7. 迭代器总结 array 是 C 标准库中的一个容器模板&#xff0c;它封装了一个固定长度的内建数组&#xff0c;并提供了类似于其他 STL 容器的接口。与内建数组相比&#xff0c; array 提供了…...

第39天:安全开发-JavaEE应用SpringBoot框架Actuator监控泄漏Swagger自动化

时间轴&#xff1a; Java知识点&#xff1a; 功能&#xff1a;数据库操作&#xff0c;文件操作&#xff0c;序列化数据&#xff0c;身份验证&#xff0c;框架开发&#xff0c;第三方组件使用等. 框架库&#xff1a;MyBatis&#xff0c;SpringMVC&#xff0c;SpringBoot&#xf…...

浏览器JS打不上断点,一点就跳到其他文件里。浏览器控制台 js打断点,指定的位置打不上断点,一打就跳到其他地方了。

关闭JavaScript 源代码映射&#xff0c;F12开发者模式 设置->偏好设置->源代码/来源->JavaScript 源代码映射。 肯定不是这个原因导致的&#xff0c;但这个办法可以暂时解决问题&#xff0c;点完这个东西就隐藏了webpack&#xff0c;有懂的来讲讲。 又浪费一个小时…...

conda环境管理 kernel注册到jupyter notebook

本文核心目的&#xff1a;解决jupyter notebook找不到自己想要的指定conda环境 首先安装anaconda&#xff0c;在win搜索框打开anaconda prompt 按下ctrlc终止操作的时间很长。需要输入y来确认操作。 国内镜像源不能使用代理服务访问。要尝试代理服务的打开与关闭 下面是cond…...

【SpringBoot】【log】 自定义logback日志配置

前言&#xff1a;默认情况下&#xff0c;SpringBoot内部使用logback作为系统日志实现的框架&#xff0c;将日志输出到控制台&#xff0c;不会写到日志文件。如果在application.properties或application.yml配置&#xff0c;这样只能配置简单的场景&#xff0c;保存路径、日志格…...

15.7 LangChain 版智能销售顾问实战:构建企业级知识驱动型对话系统

LangChain 版智能销售顾问实战:构建企业级知识驱动型对话系统 关键词:LangChain 销售系统、知识图谱集成、对话状态管理、生产级部署、多链协同优化 1. LangChain 销售系统架构设计 1.1 模块化架构全景图 #mermaid-svg-42MLuD3aMcpX0y8c {font-family:"trebuchet ms&q…...

计算机网络基础:揭开网络世界的神秘面纱

计算机网络基础&#xff1a;揭开网络世界的神秘面纱 前言一、计算机网络的定义与基本概念1.1 计算机网络的定义1.2 计算机网络的基本组成 二、计算机网络的分类2.1 按地域范围分类2.2 按拓扑结构分类 三、计算机网络体系结构3.1 OSI 参考模型3.2 TCP/IP 参考模型 四、网络通信协…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

API网关Kong的鉴权与限流:高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...

深入浅出WebGL:在浏览器中解锁3D世界的魔法钥匙

WebGL&#xff1a;在浏览器中解锁3D世界的魔法钥匙 引言&#xff1a;网页的边界正在消失 在数字化浪潮的推动下&#xff0c;网页早已不再是静态信息的展示窗口。如今&#xff0c;我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室&#xff0c;甚至沉浸式的V…...

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...