Threejs-射线拾取模型,获取模型表面点击的点坐标

本文介绍如何在Three.js中实现射线检测,用于捕捉用户在模型表面上的点击,从而获取点击点的精确坐标。同时,还讲解了将三维坐标转换为屏幕坐标的技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

     addEventListener('click',Ray);// 监听窗口鼠标单击事件
     function Ray() {
        var windowX = event.clientX;//鼠标单击位置横坐标
        var windowY = event.clientY;//鼠标单击位置纵坐标

        var x = (windowX / window.innerWidth) * 2 - 1;//标准设备横坐标
        var y = -(windowY / window.innerHeight) * 2 + 1;//标准设备纵坐标
        var standardVector = new THREE.Vector3(x, y, 0.5);//标准设备坐标
        //标准设备坐标转世界坐标
        var worldVector = standardVector.unproject(camera);
        var ray = worldVector.sub(camera.position).normalize();
        //创建射线投射器对象
        var raycaster = new THREE.Raycaster(camera.position, ray);
        //返回射线选中的对象
        var intersects = raycaster.intersectObjects(floorChildrenGroup);
        console.log(intersects);
        if (intersects.length > 0) {
            var point=intersects[0].point; //射线在模型表面拾取的点坐标
            var mesh=intersects[0].object;        
        }

    }

补充一个三维坐标转屏幕坐标

    function transPosition(position) {

        le
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值