Threejs之场景标注标签信息CSS2DRenderer

2024-03-04 07:44
文章标签 css 场景 信息 frontend 标签 threejs 标注 2drenderer

本文主要是介绍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>

这篇关于Threejs之场景标注标签信息CSS2DRenderer的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

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

相关文章

java如何实现高并发场景下三级缓存的数据一致性

java如何实现高并发场景下三级缓存的数据一致性

《java如何实现高并发场景下三级缓存的数据一致性》这篇文章主要为大家详细介绍了java如何实现高并发场景下三级缓存的数据一致性,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 下面代码是一个使用Java和Redisson实现的三级缓存服务，主要功能包括：1.缓存结构：本地缓存：使
阅读更多...
C++中detach的作用、使用场景及注意事项

C++中detach的作用、使用场景及注意事项

《C++中detach的作用、使用场景及注意事项》关于C++中的detach,它主要涉及多线程编程中的线程管理,理解detach的作用、使用场景以及注意事项,对于写出高效、安全的多线程程序至关重要,下... 目录一、什么是join()？它的作用是什么？类比一下：二、join()的作用总结三、join()怎么
阅读更多...
在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分
阅读更多...
从入门到精通详解LangChain加载HTML内容的全攻略

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言：当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二
阅读更多...
一文详解如何使用Java获取PDF页面信息

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸（宽高）四、获取页面旋转角度五、判断
阅读更多...
nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析(结合应用场景)

nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析(结合应用场景)

《nginx-t、nginx-sstop和nginx-sreload命令的详细解析(结合应用场景)》本文解析Nginx的-t、-sstop、-sreload命令,分别用于配置语法检... 以下是关于 nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析，结合实际应
阅读更多...
Java中读取YAML文件配置信息常见问题及解决方法

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》：本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu
阅读更多...
Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理；Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期
阅读更多...
MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()
阅读更多...
ModelMapper基本使用和常见场景示例详解

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置（如匹配策略、转换器）,可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例：简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2