threejs通过CSS2Dobject为什么点击获取不到标点返回信息

Question

<!-- author: Mr.J -->
<!-- date: 2023-04-12 11:43:45 -->
<!-- description: Vue3+JS代码块模板 -->
<template>
  <div class="container" ref="container"></div>
</template>

<script setup>
import * as THREE from "three";
// 轨道
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {
  CSS2DRenderer,
  CSS2DObject,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";
import { ref, reactive, onMounted } from "vue";
// 三个必备的参数
let scene, camera, renderer, controls, labelRenderer, divContainer;
let container = ref(null);
let raycaster = new THREE.Raycaster();
let position = reactive([
  {
    x: 5,
    y: 3,
    z: 6,
  },
  {
    x: 6,
    y: 2,
    z: 6,
  },
  {
    x: 1,
    y: 1,
    z: 6,
  },
]);
onMounted(() => {
  // 外层需要获取到dom元素以及浏览器宽高，来对画布设置长宽
  // clientWidth等同于container.value.clientWidth

  const { clientWidth, clientHeight } = container.value;
  console.log(clientHeight);
  var group = new THREE.Group();
  init();
  animate();
  // 首先需要获取场景，这里公共方法放在init函数中
  function init() {
    scene = new THREE.Scene();
    // 给相机设置一个背景
    scene.background = new THREE.Color(0xaaaaaa);
    // 透视投影相机PerspectiveCamera
    // 支持的参数：fov, aspect, near, far
    camera = new THREE.PerspectiveCamera(
      60,
      clientWidth / clientHeight,
      0.1,
      1000
    );
    // 相机坐标
    camera.position.set(20, 20, 20);
    // 相机观察目标
    camera.lookAt(scene.position);
    // 渲染器
    renderer = new THREE.WebGLRenderer();
    // 渲染多大的地方
    renderer.setSize(clientWidth, clientHeight);
    container.value.appendChild(renderer.domElement);
    controls = new OrbitControls(camera, renderer.domElement);
    addBox();

    positionFun();
    addMarker()
    animate()
    
  }
  function addBox() {
    // 模型部分
    // 几何体
    var geometry = new THREE.BoxGeometry(10, 10, 10);
    var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    var mesh = new THREE.Mesh(geometry, material);
    group.add(mesh);
    mesh.position.set(0, 0, 0);
    scene.add(group);
  }
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    // labelRenderer.render(scene, camera)
  }


  function positionFun() {
    position.map((item) => {
      var element2 = document.createElement('div');
      element2.innerHTML = 'Point 2';
      element2.style.color = 'white';
      element2.style.cursor = 'pointer'
      var object2 = new CSS2DObject(element2);
      
      object2.position.set(item.x, item.y, item.z);
      group.add(object2);
      scene.add(group);
    })
  }
  function positionClick(event) {
    var mouse = new THREE.Vector2();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(group.children);
    console.log(intersects);
    for (var i = 0; i < intersects.length; i++) {
      var object = intersects[i].object;
      if (object instanceof THREE.Mesh) {
        // 点击了模型
        console.log(123);
      } else if (object instanceof THREE.CSS2DObject) {
        // 点击了标签
        console.log(156);
      }

    }
  }

  function addMarker() {
    labelRenderer = new CSS2DRenderer();
    // labelRenderer.domElement.style.zIndex = 10
    labelRenderer.setSize(clientWidth, clientHeight);

    labelRenderer.domElement.style.position = 'absolute';
    labelRenderer.domElement.style.top = '0px';
    labelRenderer.domElement.style.left = '0px';
    labelRenderer.domElement.style.zIndex = '2';//设置层级
    // labelRenderer.domElement.style.pointerEvents = 'none';
    container.value.appendChild(labelRenderer.domElement)
    controls = new OrbitControls(camera, labelRenderer.domElement);
  }
  function animate() {
    // css3Renderer.render(scene, camera);
    requestAnimationFrame(animate);
    controls.update();
    labelRenderer.render(scene, camera);
    renderer.render(scene, camera);
  }
  window.addEventListener("click", positionClick, false);
  // !图片标点
});
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
}
</style>

Answer 1

以下答案由GPT-4.0Plus大模型与博主A努力中.......共同编写：
根据您提供的CSDN问答链接,这个提问是关于three.js中通过CSS2DRenderer添加的DOM元素为什么点击获取不到信息的问题。
three.js是著名的WebGL三维模型库,我们可以通过它在网页中渲染3D场景和模型。而CSS2DRenderer可以创建CSS2D对象,将自定义的DOM元素添加到three.js的场景中。
但是,当我们为CSS2D对象添加的DOM元素绑定点击事件后,在three.js的渲染循环中是无法获取到点击信息的。这是因为:
three.js使用WebGL进行硬件加速渲染,它不直接操作DOM元素。CSS2DRenderer创建的DOM元素只是添加到three.js场景来进行定位和渲染,但其事件响应等行为依然由浏览器控制。
而three.js的渲染是独立于浏览器事件循环外的,它不会检测或响应我们为DOM元素绑定的事件。所以,点击CSS2D对象的DOM元素,其事件无法在three.js的渲染循环中被捕获和获取。
要解决这个问题,我们有两种方法:

1. 使用事件委托
   我们不为CSS2D对象的每个DOM元素 individually 绑定事件,而是为其父容器或three.js画布绑定事件,在事件回调中使用事件对象的target属性获取触发元素,然后进行操作。
2. 使用自定义事件
   我们可以为CSS2D对象的DOM元素绑定自定义事件,并在事件触发时,使用three.js的EventDispatcher发送事件到three.js场景,在three.js的渲染循环中监听此事件并获取信息。
   这两种方法的基本思路是:不直接在三维场景的渲染中检测和响应DOM事件,而是在浏览器事件中触发和发送事件到three.js,由其在渲染循环中监听和响应。