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。

相关文章

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL？1.2 动态SQL的优点1.3 动态S
阅读更多...
Python基于wxPython和FFmpeg开发一个视频标签工具

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优
阅读更多...
Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
Java中&和&&以及|和||的区别、应用场景和代码示例

Java中&和&&以及|和||的区别、应用场景和代码示例

《Java中&和&&以及|和||的区别、应用场景和代码示例》：本文主要介绍Java中的逻辑运算符&、&&、|和||的区别,包括它们在布尔和整数类型上的应用,文中通过代码介绍的非常详细,需要的朋友可... 目录前言1. & 和 &&代码示例2. | 和 ||代码示例3. 为什么要使用 & 和 | 而不是总是使
阅读更多...
浅析CSS 中z - index属性的作用及在什么情况下会失效

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...
一文详解SQL Server如何跟踪自动统计信息更新

一文详解SQL Server如何跟踪自动统计信息更新

《一文详解SQLServer如何跟踪自动统计信息更新》SQLServer数据库中,我们都清楚统计信息对于优化器来说非常重要,所以本文就来和大家简单聊一聊SQLServer如何跟踪自动统计信息更新吧... SQL Server数据库中，我们都清楚统计信息对于优化器来说非常重要。一般情况下，我们会开启"自动更新
阅读更多...
Vue 调用摄像头扫描条码功能实现代码

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤：代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js
阅读更多...
CSS @media print 使用详解

CSS @media print 使用详解

《CSS@mediaprint使用详解》：本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例，如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等，还提供了测试方法和关键注意事项，并分享了进阶技巧，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2