使用CSS2DRenderer在3D项目中创建Label标签并添加点击事件（代替鼠标射线检测）_vue3 three给css2drenderer添加点击事件

引入CSS2DRenderer

import {
      CSS2DRenderer,
       CSS2DObject,
   } from "./libs/threejs/jsm/renderers/CSS2DRenderer.js";
var camera, scene, renderer, labelRenderer;
1
2
3
4
5

创建场景相机灯光加载模型等代码省略
创建渲染器的同时创建一个 CSS2DRenderer：

renderer = new THREE.WebGLRenderer({
    altialias: true,
     alpha: true
 });
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.getElementById("dom").appendChild(renderer.domElement);

labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth,window.innerHeight);
labelRenderer.domElement.style.position = 'fixed';
labelRenderer.domElement.style.top = '0px';
labelRenderer.domElement.style.left = '0px';
labelRenderer.domElement.style.zIndex = '100';
document.getElementById("dom").appendChild(labelRenderer.domElement);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

创建控制器的时候传入labelRenderer.domElement，这样在控制旋转移动3D模型的时候标签可以同步跟着动

 orbit = new OrbitControls(camera, labelRenderer.domElement);
1

创建lable，要把label放在3D场景中的什么位置就设置为什么位置(label本质是div标签)

 const dom = document.createElement('div');
 dom.className = 'label'
 dom.innerHTML = text;
 dom.setAttribute('data-name','label');
 dom.addEventListener('click', this.clickLabel, false);
 dom.addEventListener('mousedown', this.clickLabel, false);// 有时候PC端click事件不生效，不知道什么原因，就使用mousedown事件
 dom.addEventListener('touchstart', this.clickLabel, false);
 const Label = new CSS2DObject(dom);
 // position为3D坐标，数据类型Vector3
 Label.position.set(position.x, position.y + 14, position.z);
 Label.name = name;
 // console.log(Label)
 scene.add(Label);
1
2
3
4
5
6
7
8
9
10
11
12
13

刷新渲染的时候记住同步刷新 labelRenderer

renderScene() {
      orbit && orbit.update();
       requestAnimationFrame(this.renderScene);
       renderer.render(scene, camera);
       labelRenderer.render(scene, camera);
   },
1
2
3
4
5
6