首页 > 其他分享 >three.js 鼠标点击获取模型对象

three.js 鼠标点击获取模型对象

时间:2024-10-08 09:10:44浏览次数:10  
标签:intersects 鼠标 three js 点击 renderer intersect console mouse

three.js 创建模型后,想要实现点击模型获取模型对象触发相应事件。可以使用它提供的API THREE.Raycaster()

https://threejs.org/docs/index.html?q=Raycaster#api/en/core/Raycaster

 
//监听点击事件
window.addEventListener('click', (event) => {

    event.preventDefault();

    var raycaster = new THREE.Raycaster();

    var mouse = new THREE.Vector2();

    mouse.x = ((event.clientX) / renderer.domElement.clientWidth) * 2 - 1;

    mouse.y = -((event.clientY) / renderer.domElement.clientHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

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

      //当intersects.length > 0说明碰点击到物体(可能为多个重合的物体),获取最近的物体名称进行判断

    if (intersects.length > 0) {
        console.log(intersects)
    }

});

如果当前场景不是整个页面 需要调整鼠标拾取位置 否则获取数据不准确具体调整代码如下(其中的renderer就是场景canvas大小

        const mouse = new THREE.Vector2();
        // 转换为webgl坐标系下的鼠标位置
        mouse.x = ((event.clientX - renderer.domElement.getBoundingClientRect().left) / renderer.domElement.clientWidth) * 2 - 1;
        mouse.y = -((event.clientY - renderer.domElement.getBoundingClientRect().top) / renderer.domElement.clientHeight) * 2 + 1;

        // // 使用鼠标位置更新射线投射器
        raycaster.setFromCamera(mouse, camera);
        
        // // 计算鼠标点击的所有物体
        const intersects = raycaster.intersectObjects(scene.children, true);
        
        // 如果有物体被点击,输出它的信息
        if (intersects.length > 0) {
            // 取第一个被点击的物体
            let intersect = null;
            intersects.forEach((ele) => {
                if(ele.object.name == "partitionName"){
                    intersect = ele;
                }
            })
            if(intersect){
                // 输出被点击的物体信息
                console.log('输出被点击的物体信息');
                console.log(intersect.object);
                if(intersect.object.partitionInfo.volume){
                    intersect.object.partitionInfo.volume = Number(intersect.object.partitionInfo.volume).toFixed(2)
                }
                this.currentPartition = { ...intersect.object.partitionInfo }
                // console.log(intersects);
            }
            // 你可以获取更多的信息,例如点的位置、面的法线等
            // console.log(intersect.point);
            // console.log(intersect.face.normal);
        }

 

标签:intersects,鼠标,three,js,点击,renderer,intersect,console,mouse
From: https://www.cnblogs.com/lst619247/p/18451002

相关文章

  • 网站的时间使用dayjs.js格式化
    1.为什么要使用dayjs在mysql数据库中,datetime字段从数据库读取后,在前台显示出来会带有TZ字母,这是格林尼治时间,如:2024-10-07T12:02:00Z,而我们一般需要2024-10-0712:02:00这种格式。另外,需要在不同地区显示本地时间,那么dayjs会将格林尼时间转换为本地时间。dayjs是一个轻量级的......
  • JS animate() 学习
    animate(keyframes,options)1.关键帧 1/ 如果是过渡动画直接就写效果eg:{transform:'rotate(360deg)'}2/关键帧数组使用数组报过对象eg:[{transform:'translateX(400px)'},{transform:'translateX(300px)'},{transform:'translateX(20px)�......
  • 学习Openmv的第四天——鼠标绘图
    1、简单演示在这里,我们创建一个简单的应用程序,无论我们在哪里双击它,都可以在图像上绘制一个圆。首先,我们创建一个鼠标回调函数,该函数在发生鼠标事件时执行。鼠标事件可以是与鼠标相关的任何事物,例如左键按下,左键按下,左键双击等。它为我们提供了每个鼠标事件的坐标(x,y)。通......
  • Nuxt.js 应用中的 link:prefetch 钩子详解
    title:Nuxt.js应用中的link:prefetch钩子详解date:2024/10/7updated:2024/10/7author:cmdragonexcerpt:link:prefetch是一个强大的钩子,允许开发者在链接预取时执行附加逻辑。合理利用这个钩子,可以帮助优化页面的加载速度和用户体验,提升Web应用的整体性能。categ......
  • Nuxt.js 应用中的 app:suspense:resolve 钩子详解
    title:Nuxt.js应用中的app:suspense:resolve钩子详解date:2024/10/6updated:2024/10/6author:cmdragonexcerpt:app:suspense:resolve是一个强大的钩子,允许开发者在异步数据解析完成后的最后一步执行必要的处理。通过合理使用该钩子,我们可以优化组件的渲染过程,并提供......
  • go web的json系列化
     打开APP  golangWEB应用【2】:json数据处理应用 原创https://blog.csdn.net/loo_Charles_ool/article/details/138916161原地址2024-05-1517:33:48阅读量980收藏28 32赞一叶萩Charles 码龄7年关注 文章目录json数据处理应用JS......
  • jsp测试缺陷管理系统3166o程序+源码+数据库+调试部署+开发环
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、研究背景随着软件行业的迅速发展,软件质量成为企业竞争力的关键因素。在软件开发过程中,测试缺陷管理系统是确保软件质量的重要环节。传统的缺陷......
  • Vue.js组件开发研究
    摘要随着前端技术的快速发展,Vue.js以其轻量级、高性能和组件化开发的优势,在前端开发领域占据了重要地位。本研究深入探讨了Vue.js组件开发的理论基础、开发方法以及实际应用。通过系统梳理Vue.js框架的核心特性、组件化思想及Vue.js组件的基本概念,本研究为Vue.js组件开发提供......
  • [网络爬虫] Jsoup : HTML 解析工具
    1概述简介Jsoup是一款基于Java的HTML解析器,它提供了一种简单、灵活且易于使用的API,用于从URL、文件或字符串中解析HTML文档。它可以帮助开发人员从HTML文档中提取数据、操作DOM元素、处理表单提交等。主要特点Jsoup的主要特点包括:简单易用:Jsoup提供了一系列简单的API,使......
  • c++ 键盘/鼠标交互
    c++键盘/鼠标交互鼠标操作点击加上如下宏定义#include<windows.h>#defineKEY_DOWN(VK_NONAME)((GetAsyncKeyState(VK_NONAME)&0x8000)?1:0)#defineKEY_UP(VK_NONAME)((GetAsyncKeyState(VK_NONAME)&0x8000)?0:1)如果获取左键的点击,可以使用如下的代码:KEY_D......