Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

  • 1.Three.js快速入门

  • 2.几何体BufferGeometry

  • 3.模型对象、材质

  • 4.层级模型

  • 5.顶点UV坐标、纹理贴图

  • 6.加载外部三维模型(gltf)

  • 7.PBR材质与纹理贴图

  • 8.渲染器和前端UI界面

  • 9.生成曲线、几何体

  • 10.相机基础

  • 11.光源和阴影

  • 12.精灵模型Sprite

  • 13.后处理EffectComposer

  • 14.射线拾取模型

    • 1. 射线Ray
    • 2. Raycaster(射线拾取模型)
    • 3. 屏幕坐标转标准设备坐标
    • 4. Raycaster(鼠标点击选中模型)
    • 5. Canvas尺寸变化(射线坐标计算)
    • 6. 射线拾取层级模型(模型描边)
    • 7. 射线拾取Sprite控制场景
    • 15.场景标注标签信息

    • 16.关键帧动画

    • 17.动画库tween.js

    • Three.js教程
    • 14.射线拾取模型
    郭隆邦
    2023-03-10
    目录

    7. 射线拾取Sprite控制场景

    # 射线拾取Sprite控制场景

    射线投射器Raycaster通过.intersectObjects()方法可以拾取网格模型Mesh,一样也可以拾取精灵模型Sprite。

    下面举一个例子,把精灵模型当做一个功能按钮,当鼠标单击选中以后,改变3D场景中参数,比如模型的颜色。

    # 给精灵模型绑定一个函数.change()

    三维场景中提供了两个精灵模型对象,可以分别自定义一个方法.change()。

    sprite.change = function(){
      mesh.material.color.set(0xffffff);
    }
    sprite2.change = function(){
      mesh.material.color.set(0xffff00);
    }
    

    # 射线选中Sprite,sprite.change()函数执行

    鼠标单击,如果选中某个精灵模型,就调用该精灵模型绑定的函数.change()。

    addEventListener('click', function (event) {
        ...
        ...
        // 射线交叉计算拾取精灵模型
        const intersects = raycaster.intersectObjects([sprite,sprite2]);
        if (intersects.length > 0) {
            intersects[0].object.change();//执行选中sprite绑定的change函数
        }
    })
    
    6. 射线拾取层级模型(模型描边)
    1. CSS2DRenderer(HTML标签)

    ← 6. 射线拾取层级模型(模型描边) 1. CSS2DRenderer(HTML标签)→

    Theme by Vdoing | Copyright © 2016-2025 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式