three CSS2DRenderer 标签位置偏移和点击事件无效_threejs css2dobject不触发点击事件问题

有关CSS2DRenderer 的用法，有很多篇文章，这里记录一下遇到的坑

一、使用rayCaster，获取到位置 point

        window.addEventListener('dblclick', event => {

                var rayCaster   = new Raycaster();

            console.log('camera.position----',this.camera.position);

            console.log('controls.target----',this.controls.target);

            let mouse = {}

            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;

            mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

            rayCaster.setFromCamera(mouse, this.camera);

            var intersects = rayCaster.intersectObjects(this.scene.children, true);

            if (intersects.length > 0) {

                var object = intersects[0].object;

                var point  = intersects[0].point;

                console.log("=====position=====",point);

                console.log("=====object=====",object.name);

                // this.setObjColor(object,0xFF0000);

            }

        });

二、根据point 在模型显示标签

        let pos = new Vector3(point.x, point.y,point.z);

        let dom= document.createElement('div');

            dom.style.background = `#99f`;

            dom.style.marginTop = `-15px`

            dom.style.width  = `30px`;

            dom.style.height = `30px`;

            dom.onclick = e=> { console.log(e.target) }

        let labelObject = new CSS2DObject(dom);

        labelObject.position.set(pos.x,pos.y,pos.z);

        Group.add(labelObject);

        坑一：这里的dom,如果只有一个img标签document.createElement('img');，

                位置不是在point上，而且会随着缩放而飘，display：block也不行，这里我解释不了，

        解决：div包裹，或者做成背景图片

三、在three.js   0.13X版本后,上面dom的onclick 不会触发，原因是控制器Controls，

        let obtControls = new OrbitControls(camera, container);

        OrbitControls对页面的事件进行监听，并且阻止穿透

        解决：把参数container(three容器)改为renderer.domElement

                let obtControls = new OrbitControls(camera, renderer.domElement);

                这样控制器的监听事件只作用于randerer生成的cavans，不会对外部产生影响

                然后还需要给 CSS2DRenderer 添加事件none，否则control就不能触发了，

                let labelRenderer = new CSS2DRenderer()

                labelRenderer.domElement.style.pointerEvents = 'none';

                再然后给上面二中的dom ,添加事件auto,

                dom .style.pointerEvents = 'auto';

                完美解决！！

        就不上图了，懂的自然懂，不懂的就不懂吧！