1回答

慕无忌6277495

2023-06-16

之前有一节坐标系转换的，可以再回顾一下。

"-1" 是为了把计算结果从[0,2]转换成[-1,1]。

给y的计算结果取负值，是因为canvas坐标系和webgl坐标系的Y方向相反。

整体来说就是：浏览器客户端的坐标 >>> canva坐标系坐标  >>> webgl坐标系坐标。给你一个实现的demo:

    function transformCoord (event,canvasDom) {

        // 获取鼠标位置在浏览器客户端的位置

        const px = event.clientX;

        const py = event.clientY;

        // 将{px, py}转转换为canvas坐标系中的位置【canvasDom左上角为坐标系原点】

        const domPosition = event.target.getBoundingClientRect();

        const cx = px - domPosition.left;

        const cy = py - domPosition.top;

        // 将canvas坐标系中的坐标{cx,cy}转换为webgl坐标系中的坐标【原点在画布中心，x,y,z的取值范围为[-1,+1]】

        const halfWidth = canvasDom.offsetWidth / 2;

        const halfHeight = canvasDom.offsetHeight / 2;

        const glx = (cx - halfWidth) / halfWidth;

        const gly = -(cy - halfHeight) / halfHeight;

       

        return { x: glx, y: gly };

    }

    document.onclick = function (event) {

        // 将鼠标在浏览器上的坐标转换成webgl坐标系中的坐标

        const {x,y} = transformCoord(event, renderer.domElement);

        // 设定z值，格式化一个对应位置的三维空间的坐标点

        const standardVector = new THREE.Vector3(x, y, 0.5); // 创建V3矢量坐标

        const worldVector = standardVector.unproject(camera); // 转化为世界坐标

        const pointCoord = worldVector.sub(camera.position).normalize(); // 做序列化【归一化】

        // 射线法获取场景中被点击的几何体对象

        const raycaster = new THREE.Raycaster(camera.position, point); // 创建发射器发射射线

        const intersects = raycaster.intersectObjects(scene.children, true); // 返回场景中与射线碰撞的物体对象

       

        console.log(intersects);

        let point3d = null;

        if (intersects.length) {

            point3d = intersects[0];

            console.log(point3d?.object?.name);

        }

    }

1

0