Threejs之场景标注标签信息CSS2DRenderer

最新推荐文章于 2024-06-13 10:27:10 发布
最新推荐文章于 2024-06-13 10:27:10 发布
阅读量959 收藏 10
点赞数 8
分类专栏： Web3D 文章标签： threejs Web3D
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010678947/article/details/136433588
版权

参考资料

知识点

注：基于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 = 800
    const 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设置一个父对象meshGroup
    const 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渲染器CSS2DRenderer
    const 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 = 800
    const 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渲染器CSS2DRenderer
    const 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>
开心就是最好
关注
  • 8
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
three.js CSS3DRenderer、CSS3DObject渲染HTML标签
yinge0508的博客
02-01 1725
【代码】three.js CSS3DRenderer渲染HTML标签。
15.场景标注标签信息
weixin_60645637的博客
07-02 821
下面给大家介绍一个threejs的扩展库CSS2DRenderer.js，通过CSS2DRenderer.js可以把HTML元素作为标签标注三维场景。
Web3D智慧数字三维工地 HTML5+Threejs实战开发
ALLENJIAO的专栏
08-22 6315
智慧数字工地监管平台的建设,能帮助政府监管部门及建筑企业有效的解决施工现场事故多发,扬尘噪声污染大,重点部位生产操作过程不规范、隐患未及时消除,人员、精力有限,无法全方位检查、监管,施工进度、施工质量得不到保障等问题,提高工地的安全生产监管和建筑质量监管水平。 数字化工地可助力政府监管部门提高监管效率,帮助建筑企业提高企业管理水平。 数字化工地是“智能硬件”和“互联网大数据”理念在建设工程领域行业具体体现，它是一种崭新的工程现场一体化管理模式，是互联网+传统建筑行业的深度统合“数...
Three.js的渲染器：WebGLRenderer、CSS3DRenderer、SVGRenderer
最新发布
2401_82881178的博客
06-13 594
在Three.js中，渲染器（Renderer）是用于将3D场景呈现到屏幕上的组件。它负责处理3D对象的渲染、光照、阴影、材质等方面的细节，最终将场景呈现为图像或动画。渲染器是连接Three.js场景和浏览器窗口之间的桥梁，它将场景中的3D对象转换为2D图像，然后显示在屏幕上。1. 将3D场景中的几何体、光源、材质等元素转换为屏幕上的像素，实现真实感的渲染效果。2. 处理视图投影、相机视角等方面的计算，确保场景在屏幕上的正确呈现。3. 处理光照、阴影等光学效果，使得3D场景具有逼真的外观。
threejs实现标签标注的三种方式
Pure_White520的博客
02-02 1518
threejs常见创建标签的三种方式
Three.js-CSS渲染器（CSS2DRenderer）
damadashen的博客
07-29 7385
Three中css渲染器的介绍及使用，使用css2d渲染器实现地月环绕及添加标签效果。
threejs元素周期表-CSS3DRenderer
qq_43157227的博客
11-26 2128
threejs元素周期表-CSS3DRenderer
Three.js前端3D开发：使用 CSS3DRenderer 渲染全景图
weixin_51678651的博客
08-07 1030
此实例主要通过使用 THREE.CSS3DRenderer 和 THREE.CSS3DObject,实现以鼠标拖曳方式在天空盒(即模拟人站在真实的空间中)中查看全景图。
threejs模型指定位置打一个永远面向正面的标签
qq_39544728的博客
07-04 1573
基于一个3D模型，实现在3D模型中某些固定位置做指向性标注的功能。（配色真丑不过可以突出目标，凑合看看）（转动各个角度也是指向该位置的）例如，在一个床头柜的3D模型里，需要在指向柜子底部的位置，标注一个柜子底部高度的信息。
Three.js前端3D开发：使用CSS3DRenderer渲染全景图
08-07
2. **创建场景（Scene）**：创建一个 Three.js 场景（Scene），这是所有3D对象的容器。 ```javascript var scene = new THREE.Scene(); ``` 3. **创建相机（Camera）**：全景图通常需要一个具有广角视野的相机，...
three-css2drenderer:threejs正式将CSS2DRender.js与npm一起应用
05-15
threejs正式将CSS2DRender.js与npm一起应用 安装 npm i --save three-css2drender 用法 import * as THREE from 'three' import { CSS2DRenderer , CSS2DObject } from 'three-css2drender' let scene = new THREE...
ThreeJs-3D模型渲染、3D标签
05-26
- **TextGeometry**：ThreeJs 提供TextGeometry类，可以创建3D文字，用于制作标签或信息提示。 - **Billboard**：3D标签常使用 Billboard 对象，它们始终面向相机，确保用户始终能看见标签内容。 - **Custom ...
vue页面引入three.js实现3d动画场景操作
10-14
此外，如果你打算将2D CSS元素与3D场景结合，可以安装`three-css2drenderer`： ```bash npm i --save three-css2drender ``` 安装完毕后，你需要在Vue组件中导入这些库。在`<script>`标签中，写入如下代码： ```...
基于Threejs 3D场景浏览器代码.zip
09-23
7. **CSS3DRenderer或CSS2DRenderer**：如果项目中涉及到将2D元素（如文本或图像）与3D场景相结合，这两个渲染器可能会被用到。 通过深入理解和实践这些知识点，你将能够掌握创建自己的Three.js 3D场景浏览器的基础...
d3threejs使用D3和THREEjs实现的CSS3D变换
08-10
《D3与THREE.js结合实现CSS3D变换详解》 在现代Web开发中，数据可视化扮演着至关重要的角色，而D3.js（Data-Driven Documents）和THREE.js是两个非常强大的工具，分别用于数据可视化和3D图形渲染。本文将深入探讨...
three.js 精简小程序版源码，小程序加载3D模型，3D场景，VR全景 适配多个小程序平台
01-11
精简了three.js小程序版的源码，适配小程序端，使用实例可查看资源中的小程序。 关于跨平台： 本人只在微信小程序平台测试过，快手、字节等小程序平台并未测试。 但是由于three.js是基于type为webgl的canvas，所以...
threeJS 模型中加载html页面
jinse29的博客
04-10 2487
CSS3DRenderer通过CSS3的transforms属性，将层级的3D变换应用到Dom元素上，将Dom元素和WebGL的内容相结合，操作Dom元素的positionh和rotation属性来创建动画。/*** CSS3DRenderer通过CSS3的transforms属性，将层级的3D变换应用到Dom元素上，将Dom元素和WebGL的内容相结合，Dom => Object3D* 操作Dom元素的positionh和rotation属性来创建动画*///创建控件对象。
Threejs进阶之十三：CSS3DRenderer与Tween.js实现粒子小球按规律变化
九仞山的专栏
05-06 1010
CSS3DRenderer结合tween.js实现粒子小球的各种变化效果
Threejs进阶之五：使用CSS2DRenderer给模型添加HTML标签
九仞山的专栏
04-22 2937
详细介绍了CSS2DRenderer的使用，结合模型和Raycaster光线投射，实现了选中模型弹出标签显示信息的效果
threejs之显示Label-CSS2DRenderer
05-18
在 Three.js 中，要显示 2D 文本标签可以使用 CSS2DRenderer。 CSS2DRenderer 可以将 2D 元素渲染在 Three.js 的场景中，可以使用标准 HTML 和 CSS 样式来创建标签。这允许我们非常方便地创建自定义的标签，比如显示对象名称、文字、标注等等。 下面是一个简单的使用 CSS2DRenderer 显示文本标签的示例： ```javascript // 创建 CSS2DRenderer var renderer = new THREE.CSS2DRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建场景和相机 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 创建文本标签 var label = document.createElement('div'); label.className = 'label'; label.textContent = 'Hello, World!'; var labelObj = new THREE.CSS2DObject(label); labelObj.position.set(0, 0, 0); scene.add(labelObj); // 渲染循环 function render() { requestAnimationFrame(render); renderer.render(scene, camera); } render(); ``` 在上面的代码中，我们首先创建了一个 CSS2DRenderer，然后创建了场景和相机。接着，我们创建了一个 div 元素作为文本标签，设置了它的 className 和 textContent 属性，并将其包装为一个 CSS2DObject 对象，设置其位置并添加到场景中。最后，我们启动了渲染循环。 需要注意的是，CSS2DRenderer 渲染的元素是基于屏幕坐标系的，它们的位置是相对于窗口左上角的像素位置。如果需要将它们放置在 Three.js 中的某个物体上，需要通过计算其位置和旋转来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值