Threejs之场景标注标签信息CSS2DRenderer

参考资料

  • CSS2DRenderer(HTML标签)
  • …
  • 单击按钮关闭HTML标签

知识点

注：基于Three.jsv0.155.0

  • CSS2DRenderer(HTML标签)
  1. HTML标签遮挡Canvas画布事件
  2. Canvas尺寸变化(HTML标签)
  3. 标签位置不同设置方式
  4. 标签位置(标注工厂设备)
  5. 标签指示线或箭头指向标注点
  6. 鼠标选中模型弹出标签(工厂)
  7. 单击按钮关闭HTML标签

总体思路

  • 1.HTML元素创建标签
  • 2.CSS2模型对象CSS2DObject
  • 3.CSS2渲染器CSS2DRenderer
  • 4.CSS2Renderer.domElement重新定位

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title>
</head><body><div id="container"></div><div id="tag">标签内容</div></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js","three/addons/": "../three.js/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { CSS2DRenderer,CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';import {OrbitControls} from 'three/addons/controls/OrbitControls.js';const width = 800const height = 500// 场景const scene = new THREE.Scene();const geometry = new THREE.BoxGeometry(25, 100, 50);geometry.translate(0, 50, 0);// 材质const material = new THREE.MeshBasicMaterial({color: 0x00ff00,transparent: true,});// mesh顶部中心添加标注，顶部中心坐标是(0,100,0)const mesh = new THREE.Mesh(geometry, material);scene.add(mesh);// mesh设置一个父对象meshGroupconst meshGroup = new THREE.Group();meshGroup.add(mesh);// mesh位置受到父对象局部坐标.positionn影响meshGroup.position.x = -100;scene.add(meshGroup);// 环境光const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);// renderer.setClearColor(0x000000, 0.5);renderer.render(scene, camera);// 渲染器背景透明document.body.appendChild(renderer.domElement);// 标签const div = document.getElementById('tag');// HTML元素转化为threejs的CSS2模型对象const tag = new CSS2DObject(div);// tag.position.set(-50,0,50);// const worldPosition = new THREE.Vector3();// mesh.getWorldPosition(worldPosition);// tag.position.copy(worldPosition);// scene.add(tag);mesh.add(tag);scene.add(mesh);const pos = geometry.attributes.position;// 获取几何体顶点1的xyz坐标，设置标签局部坐标.position属性tag.position.set(pos.getX(0),pos.getY(0),pos.getZ(0));const group = new THREE.Group();// 最后meshGroup和tag放在同一个父对象中即可group.add(meshGroup,tag);scene.add(group);// 创建一个CSS2渲染器CSS2DRendererconst css2Renderer = new CSS2DRenderer();css2Renderer.setSize(width, height);css2Renderer.render(scene, camera);document.body.appendChild(css2Renderer.domElement);css2Renderer.domElement.style.position = 'absolute';css2Renderer.domElement.style.top = '0';// renderer.domElement.style.marginTop = '200px';// css2Renderer.domElement.style.top = '200px';css2Renderer.domElement.style.color = 'red';css2Renderer.domElement.style.fontSize = '20px';css2Renderer.domElement.style.pointerEvents  = 'none';renderer.domElement.style.zIndex  = -1;css2Renderer.domElement.style.zIndex  = 1;// 控制器const controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener('change', () => {// 因为动画渲染了，所以这里可以省略renderer.render(scene, camera);});// 画布跟随窗口变化window.onresize = function () {const width = window.innerWidth;const height = window.innerHeight;// cnavas画布宽高度重新设置renderer.setSize(width,height);// HTML标签css2Renderer.domElement尺寸重新设置css2Renderer.setSize(width,height);camera.aspect = width / height;camera.updateProjectionMatrix();};</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title>
</head><body><div id="container"></div><div id="tag">标签内容</div></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js","three/addons/": "../three.js/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { CSS2DRenderer,CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';import {OrbitControls} from 'three/addons/controls/OrbitControls.js';const width = 800const height = 500// 场景const scene = new THREE.Scene();const geometry = new THREE.ConeGeometry(25, 80);// 材质const material = new THREE.MeshBasicMaterial({color: 0x00ff00,transparent: true,});const mesh = new THREE.Mesh(geometry, material);// 可视化模型的局部坐标系scene.add(mesh);// 环境光const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);// renderer.setClearColor(0x000000, 0.5);renderer.render(scene, camera);// 渲染器背景透明document.body.appendChild(renderer.domElement);// 标签const div = document.getElementById('tag');// HTML元素转化为threejs的CSS2模型对象const tag = new CSS2DObject(div);mesh.add(tag);// scene.add(tag);//y轴正方向，平移高度一半geometry.translate(0, 40, 0); //圆锥mesh局部坐标系原点在自己底部时候，标签需要向上偏移圆锥自身高度tag.position.y += 40; // 创建一个CSS2渲染器CSS2DRendererconst css2Renderer = new CSS2DRenderer();css2Renderer.setSize(width, height);css2Renderer.render(scene, camera);document.body.appendChild(css2Renderer.domElement);css2Renderer.domElement.style.position = 'absolute';css2Renderer.domElement.style.top = '0';css2Renderer.domElement.style.color = 'red';css2Renderer.domElement.style.fontSize = '20px';// 控制器const controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener('change', () => {// 因为动画渲染了，所以这里可以省略renderer.render(scene, camera);});// 画布跟随窗口变化window.onresize = function () {const width = window.innerWidth;const height = window.innerHeight;// cnavas画布宽高度重新设置renderer.setSize(width,height);// HTML标签css2Renderer.domElement尺寸重新设置css2Renderer.setSize(width,height);camera.aspect = width / height;camera.updateProjectionMatrix();};</script>
</html>

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

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

相关文章

Microsoft PyRIT能自动化完成AI红队的任务

Microsoft PyRIT能自动化完成AI红队的任务

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
两数相加的问题

两数相加的问题

题目是&#xff1a;给两个非空的链表&#xff0c;表示两个非负整数。它们每位数都是按照逆序的方式存储&#xff0c;并且每一个节点只能存储一位数字。现在两个数相加&#xff0c;并且以相同的形式返回一个表示和的链表。 首先回顾一下&#xff0c;什么是链表&#xff1f;链表…
阅读更多...
《异常检测——从经典算法到深度学习》26 Time-LLM：基于大语言模型的时间序列预测

《异常检测——从经典算法到深度学习》26 Time-LLM：基于大语言模型的时间序列预测

《异常检测——从经典算法到深度学习》 0 概论1 基于隔离森林的异常检测算法 2 基于LOF的异常检测算法3 基于One-Class SVM的异常检测算法4 基于高斯概率密度异常检测算法5 Opprentice——异常检测经典算法最终篇6 基于重构概率的 VAE 异常检测7 基于条件VAE异常检测8 Donut: …
阅读更多...
使用递归方法和类数组两种方法计算斐波那契数列

使用递归方法和类数组两种方法计算斐波那契数列

菲波纳契数列又称"菲波纳契神奇数列"&#xff0c;是由13世纪的意大利数学家菲波纳契提出的&#xff0c;当时是和兔子的繁殖问题有关的&#xff0c;它是一个很重要的数学模型。这个问题是:有小兔一对&#xff0c;若第二个月它们成年&#xff0c;第三个月生下小兔一对&…
阅读更多...
iOS调起高德/百度/腾讯/谷歌/苹果地图并使用GCJ02坐标进行导航

iOS调起高德/百度/腾讯/谷歌/苹果地图并使用GCJ02坐标进行导航

使用演示: 2.地图API相关网站 : 高德:
阅读更多...
3333666777

3333666777

☞ 通用计算机启动过程 1️⃣一个基础固件&#xff1a;BIOS 一个基础固件&#xff1a;BIOS→基本IO系统&#xff0c;它提供以下功能&#xff1a; 上电后自检功能 Power-On Self-Test&#xff0c;即POST&#xff1a;上电后&#xff0c;识别硬件配置并对其进行自检&#xff0c…
阅读更多...
阿里云仓库

阿里云仓库

仓库服务 (aliyun.com) maven中央仓库&#xff1a; Central Repository: (maven.org)
阅读更多...
Windows10 安装Neo4j流程

Windows10 安装Neo4j流程

1、下载并安装ava运行环境 官网链接&#xff08;需要注册Oracle账号&#xff09;&#xff1a;https://www.oracle.com/java/technologies/downloads/ 根据自己Neo4j版本确认需要的JDK版本 百度网盘链接&#xff1a; 链接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/…
阅读更多...
静态网页和动态网页的异同

静态网页和动态网页的异同

静态网页和动态网页是两种不同类型的网页。它们之间的主要异同点如下&#xff1a; 1. 静态网页&#xff1a; - 静态网页是指在服务器上预先准备好的网页&#xff0c;内容固定不变。 - 静态网页通常由HTML、CSS和JavaScript等静态文件组成。 - 用户访问静态网页时&#xff0c…
阅读更多...
Sodinokibi勒索病毒最新变种，解密工具更新到2.0版本

Sodinokibi勒索病毒最新变种，解密工具更新到2.0版本

Sodinokibi勒索病毒 Sodinokibi勒索病毒又称REvil&#xff0c;自从2019年6月1日&#xff0c;GandCrab勒索病毒运营团伙宣布停止运营之后&#xff0c;Sodinokibi勒索病毒马上接管了GandCrab的大部分传播渠道&#xff0c;同时它也被称为是GandCrab勒索病毒的“接班人”&#xff…
阅读更多...
VMware 虚拟机安装windows 10操作系统

VMware 虚拟机安装windows 10操作系统

先提前准备好镜像文件 1.创建新的虚拟机 2.选择自定义&#xff0c;然后下一步 v Windows 建议选择2G以上&#xff0c;下一步 选择网络地址转换&#xff08;NAT&#xff09;&#xff0c;下一步 这里可按自己的需求来分区&#xff0c;也可以安装好后再分区 选择立即重启&#xff…
阅读更多...
【剑指offer】C++ 翻转字符串里面的单词

【剑指offer】C++ 翻转字符串里面的单词

目录 题目： 思路： 代码出现 结果 题目： 给定一个字符串，逐个翻转字符串中的每个单词。 示例 1： 输入: "the sky is blue" 输出: "blue is sky the" 示例 2： 输入: " hello world! " 输出: "world! hello" 解释: 输入字符…
阅读更多...
L1-032 Left-pad（PTA）

L1-032 Left-pad（PTA）

文章目录 L1-032 Left-pad题目描述代码 L1-032 Left-pad 题目描述 根据新浪微博上的消息&#xff0c;有一位开发者不满NPM&#xff08;Node Package Manager&#xff09;的做法&#xff0c;收回了自己的开源代码&#xff0c;其中包括一个叫left-pad的模块&#xff0c;就是这个…
阅读更多...
使用 Object.defineProperty() 来进行数据劫持有什么缺点？

使用 Object.defineProperty() 来进行数据劫持有什么缺点？

使用 Object.defineProperty() 来进行数据劫持有什么缺点&#xff1f; &#xff08;1&#xff09;在对一些属性进行操作时&#xff0c;使用这种方法无法拦截&#xff0c;比如通过下标方式修改数组数据或者给对象新增属性&#xff0c;这都不能触发组件的重新渲染&#xff0c;因为…
阅读更多...
Vue组件置底方法，ElementPlus布局

Vue组件置底方法，ElementPlus布局

问题描述 在开发网页时使用了elementplus的el-container组件 组件里分成了main和footer两块&#xff0c;但是想要将两个按钮置底在容器底部遇到了困难 如下图所示&#xff0c;在网页开发者工具可见两个按钮与左侧的图片没有底部对齐 此时我的代码是这样 <el-footer>&…
阅读更多...
STM32自学☞串口发送+接收

STM32自学☞串口发送+接收

一、相关函数说明&#xff1a; USART_ClockInit()和USART_ClockStructInit(); 用来配置同步时钟输出 USART_DMACmd(); 开启USART到DMA的触发通道 USART_SendData(); 发送数据 USART_ReceiveData(); 接收数据 二、程序代码 serial.c文件 #include "stm32f10x.h" #i…
阅读更多...
文件底层的深入理解之文件输入输出重定向

文件底层的深入理解之文件输入输出重定向

目录 一、文件fd的分配规则 二、对输出重定向现象的理解 三、输出输入重定向的简单实现 1、输出重定向 2、输入重定向 一、文件fd的分配规则 最小的没有被使用的数组下标&#xff0c;会被分配给最新打开的文件。 二、对输出重定向现象的理解 正如上面这段代码所示&#xff0…
阅读更多...
C语言实现日本某地发生了一件谋杀案

C语言实现日本某地发生了一件谋杀案

题目 猜凶手 题目内容&#xff1a; 日本某地发生了一件谋杀案&#xff0c;警察通过排查确定杀人凶手必为4个嫌疑犯的一个。 以下为4个嫌疑犯的供词: A说&#xff1a;不是我。 B说&#xff1a;是C。 C说&#xff1a;是D。 D说&#xff1a;C在胡说 已知3个人说了真话&…
阅读更多...
从零开始学习Netty - 学习笔记 -Netty入门【半包，黏包】

从零开始学习Netty - 学习笔记 -Netty入门【半包，黏包】

Netty进阶 1.黏包半包 1.1.黏包 服务端代码 public class HelloWorldServer {private static final Logger logger LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());public static void main(String[] args) {NioEventLoopGroup bossGroup new NioEventL…
阅读更多...
Ubuntu上Jenkins自动化部署Gitee上VUE项目

Ubuntu上Jenkins自动化部署Gitee上VUE项目

文章目录 1.安装NodeJS插件2.配置全局工具配置-NodeJS环境变量3.新建自由风格的软件项目任务4.配置General配置丢弃旧的构建配置参数化构建过程 5.配置源码管理6.构建触发器7.设置构建环境8.配置构建步骤9.配置构建后操作10测试构建 前文链接&#xff1a; Ubuntu上Jenkins自动…
阅读更多...
最新文章

Copyright @ 2022~2023