Threejs之光线投射Raycaster

已于 2024-09-11 15:01:40 修改
阅读量920 收藏 26
点赞数 32
分类专栏： ThreeJS 文章标签： 数码相机 threejs 3d webgl 前端
于 2024-09-11 14:48:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44103733/article/details/142134403
版权

本文目录

前言

Three.js中的光线投射（Raycaster）是一个功能强大的类，用于在三维场景中执行射线投射和交叉检测。它广泛应用于鼠标拾取、碰撞检测等场景，使用户能够与3D对象进行交互。

一、简要介绍

1.1 定义与原理

  • 定义：光线投射（Raycaster）是Three.js中用于进行射线投射和交叉检测的类。
  • 原理：通过从特定点（如相机位置或屏幕上的某一点）发射一条射线，并检测这条射线是否与场景中的物体相交，从而确定用户与哪些物体进行了交互。

1.2 构造器

构造器：Raycaster(origin : Vector3, direction : Vector3, near : Float, far : Float)
origin：光线投射的原点向量。
direction：向射线提供方向的方向向量，应当被标准化。
near：返回的所有结果比此值远。默认为0。
far：返回的所有结果都比此值近。默认为Infinity（正无穷）。

1.3 常用属性

far：远距离因数，表示哪些对象可以基于该距离而被Raycaster所考虑。
near：近距离因数，表示哪些对象可以基于该距离而被Raycaster所忽略。
camera：对依赖于视图的对象（如Sprites等）进行光线投射时使用的相机。
layers：用于控制Raycaster在执行相交测试时忽略哪些3D对象。

1.4 常用方法

  1. set(origin : Vector3, direction : Vector3)：
    origin —— 光线投射的原点向量。
    direction —— 为光线提供方向的标准化方向向量。
    使用新的原点和方向来更新射线。
  2. setFromCamera(coords : Vector2, camera : Camera)：
    coords—— 在标准化设备坐标中鼠标的二维坐标 —— X分量与Y分量应当在-1到1之间。
    camera—— 射线所来源的摄像机。根据鼠标在屏幕上的位置（归一化设备坐标）和相机位置来更新射线的原点和方向。
  3. intersectObject(object : Object3D, recursive : Boolean, optionalTarget : Array)：检测射线与单个物体的相交情况。
  4. intersectObjects(objects : Array, recursive : Boolean, optionalTarget : Array)：
    objects —— 检测和射线相交的一组物体。
    recursive —— 若为true，则同时也会检测所有物体的后代。否则将只会检测对象本身的相交部分。默认值为true。
    optionalTarget —— （可选）设置结果的目标数组。如果不设置这个值，则一个新的Array会被实例化；如果设置了这个值，则在每次调用之前必须清空这个数组（例如：array.length = 0;）。检测射线与一组物体的相交情况。

二、代码准备及效果

2.1 演示代码准备

我们首先在场景添加三个甜甜圈，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script type="module">
        // 倒入轨道控制器
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
        import * as THREE from "three";
        // 创建场景
        const scene = new THREE.Scene();

        // 创建相机
        const camera = new THREE.PerspectiveCamera( // 透视相机
            45, // 视角 角度数
            window.innerWidth / window.innerHeight, // 宽高比 占据屏幕
            0.1, // 近平面（相机最近能看到物体）
            1000, // 远平面（相机最远能看到物体）
        );
        camera.position.set(0, 2, 20);
        // camera.lookAt(0, 0, 0);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({
            antialias: true, // 抗锯齿
        });
        // 设置渲染器宽高
        renderer.setSize(window.innerWidth, window.innerHeight)
        // renderer（渲染器）的dom元素添加到我们的HTML文档中
        document.body.appendChild(renderer.domElement)

        // 开启坐标轴辅助器
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

		const geometry = new THREE.TorusGeometry( 1, 0.5, 20, 25 );
        const geometry1 = new THREE.TorusGeometry( 1, 0.5, 20, 25 );
        const geometry2 = new THREE.TorusGeometry( 1, 0.5, 20, 25 );

		const material = new THREE.MeshBasicMaterial({color: 0xff0000});
		const material1 = new THREE.MeshBasicMaterial({color: 0xff0000});
		const material2 = new THREE.MeshBasicMaterial({color: 0xff0000});

		const torus = new THREE.Mesh( geometry, material );
		const torus1 = new THREE.Mesh( geometry1, material1 );
		const torus2 = new THREE.Mesh( geometry2, material2 );

        torus1.position.x = 3;
        torus2.position.x = -3;


        torus.rotation.y = Math.PI / 2;
        torus1.rotation.y = Math.PI / 2;
        torus2.rotation.y = Math.PI / 2;


		scene.add(torus, torus1, torus2);

        // 控制器
        const control = new OrbitControls(camera, renderer.domElement)
        // 开启阻尼惯性，默认值为0.05
        control.enableDamping = true

        // 渲染循环动画
        function animate() {
            // 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
            requestAnimationFrame(animate);
            // 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用
            control.update();
            renderer.render(scene, camera);
        };

        // 执行动画
        animate();
    </script>
</body>

</html>

2.2 效果

在这里插入图片描述
在这里插入图片描述
可以看到场景中就有了三个甜甜圈以及坐标轴辅助器。

三、创建射线Raycaster及效果

3.1 代码

在上述代码的基础上添加：

        // 添加光线投射
        const raycaster = new THREE.Raycaster();
        const rcOrigin = new THREE.Vector3(-5, 0, 0);
        const rcDirection = new THREE.Vector3(1, 0, 0);
        rcDirection.normalize(); // 标准化

        // 第一种构造方法设置
        // const raycaster = new THREE.Raycaster(rcOrigin, rcDirection);
        
        // 第二种方法设置
        raycaster.set(rcOrigin, rcDirection);

        let torusObjects = [torus, torus1, torus2];
        // 渲染循环动画
        function animate() {
            // 获取自时钟启动后的秒数
            const elapsedTime = clock.getElapsedTime();
            // 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
            requestAnimationFrame(animate);
            // 一开始先将物体遍历设置颜色，如果不设置的话，下面判断相交的射线一开始会判定为相交
            for(const key in torusObjects){
                torusObjects[key].material.color.set(0xff0000);
                torusObjects[key].position.y = 4 * Math.sin(elapsedTime*((key+1)/10 + 0.2));
            }
			// 循环将与射线相交的物体设置为不同的颜色
            const itobjects = raycaster.intersectObjects(torusObjects);
            for(const itobject of itobjects){
                itobject.object.material.color.set(0xcc33ff);
            }
            
            // 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用
            control.update();
            renderer.render(scene, camera);
        };

可以知道我们往x正方向投射了光线，与之交互就会变颜色。

3.2 效果

请添加图片描述

四、完整代码

最后给出完整代码，如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script type="module">
        // 倒入轨道控制器
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
        import * as THREE from "three";
        // 创建场景
        const scene = new THREE.Scene();

        // 创建相机
        const camera = new THREE.PerspectiveCamera( // 透视相机
            45, // 视角 角度数
            window.innerWidth / window.innerHeight, // 宽高比 占据屏幕
            0.1, // 近平面（相机最近能看到物体）
            1000, // 远平面（相机最远能看到物体）
        );
        camera.position.set(0, 2, 20);
        // camera.lookAt(0, 0, 0);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({
            antialias: true, // 抗锯齿
        });
        // 设置渲染器宽高
        renderer.setSize(window.innerWidth, window.innerHeight)
        // renderer（渲染器）的dom元素添加到我们的HTML文档中
        document.body.appendChild(renderer.domElement)

        // 开启坐标轴辅助器
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        const geometry = new THREE.TorusGeometry( 1, 0.5, 20, 25 );
        const geometry1 = new THREE.TorusGeometry( 1, 0.5, 20, 25 );
        const geometry2 = new THREE.TorusGeometry( 1, 0.5, 20, 25 );

		const material = new THREE.MeshBasicMaterial({color: 0xff0000});
		const material1 = new THREE.MeshBasicMaterial({color: 0xff0000});
		const material2 = new THREE.MeshBasicMaterial({color: 0xff0000});

		const torus = new THREE.Mesh( geometry, material );
		const torus1 = new THREE.Mesh( geometry1, material1 );
		const torus2 = new THREE.Mesh( geometry2, material2 );
        torus1.position.x = 3;
        torus2.position.x = -3;

        torus.rotation.y = Math.PI / 2;
        torus1.rotation.y = Math.PI / 2;
        torus2.rotation.y = Math.PI / 2;

		scene.add(torus, torus1, torus2);

        // 添加光线投射
        const raycaster = new THREE.Raycaster();
        const rcOrigin = new THREE.Vector3(-5, 0, 0);
        const rcDirection = new THREE.Vector3(1, 0, 0);
        rcDirection.normalize(); // 标准化

        // 第一种构造方法设置
        // const raycaster = new THREE.Raycaster(rcOrigin, rcDirection);
        
        // 第二种方法设置
        raycaster.set(rcOrigin, rcDirection);

        let torusObjects = [torus, torus1, torus2];


        // 控制器
        const control = new OrbitControls(camera, renderer.domElement)
        // 开启阻尼惯性，默认值为0.05
        control.enableDamping = true

        // 跟踪时间对象
        const clock = new THREE.Clock();
       
        // 渲染循环动画
        function animate() {
            // 获取自时钟启动后的秒数
            const elapsedTime = clock.getElapsedTime();
            // 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
            requestAnimationFrame(animate);
            // 一开始先将物体遍历设置颜色，如果不设置的话，下面判断相交的射线一开始会判定为相交
            for(const key in torusObjects){
                torusObjects[key].material.color.set(0xff0000);
                torusObjects[key].position.y = 4 * Math.sin(elapsedTime*((key+1)/10 + 0.2));
            }
			// 循环将与射线相交的物体设置为不同的颜色
            const itobjects = raycaster.intersectObjects(torusObjects);
            for(const itobject of itobjects){
                itobject.object.material.color.set(0xcc33ff);
            }
            
            // 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用
            control.update();
            renderer.render(scene, camera);
        };

        // 执行动画
        animate();
    </script>
</body>
</html>

在学习的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。

你华还是你华
关注
专栏目录
three.js利用射线Raycaster进行碰撞检测
11-21
本文实例为大家分享了利用射线Raycaster进行碰撞检测的具体代码，供大家参考，具体内容如下 学习碰撞检测之前，我们先了解一下Raycaster类 Raycaster 应该翻译为“光线投射”，顾名思义，就是投射出去的一束光线。  Raycaster的构造函数如下 Raycaster( origin, direction, near, far ) { origin — 射线的起点向量。 direction — 射线的方向向量，应该归一化。 near — 所有返回的结果应该比 near 远。Near不能为负，默认值为0。 far — 所有返回的结果应该比 far 近。Far 不能小于 near
threejs中Raycaster(鼠标点击选中模型)
weixin_55541470的博客
12-13 868
将模型导入并对模型进行操作最后渲染到浏览器中。用于创建出N个3D模型体并将模型暴漏。
threejs学习
最新发布
a2739294436的博客
10-09 399
threejs学习。
three.js学习笔记(九)——光线投射
hongsir的博客
12-08 1883
光线投射(RayCaster)可以向特定方向投射光线，并测试哪些对象与其相交。光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。 用法示例： 测试相机前方是否有一堵墙（障碍） 光线是否击中目标 当鼠标移动时测试是否有物体位于光标下方，以此模拟鼠标事件 当物体朝向特定某处时提示信息 初始场景 三个球体，然后我们要发射一条光线穿过这些球体看其是否与之相交 const object1 = new THREE.Mesh( new THREE.SphereBufferGeometry(0
Three.js-光线投射(raycaster)
damadashen的博客
07-12 1952
Three中光线投射(raycaster)的介绍及使用。
ThreeJS中的点击与交互——Raycaster的用法
sanlyshi's front-end road
09-02 1745
基础概念 坐标系 我们的手机屏幕是二维的，但是我们展示物体的世界是三维的，当我们在构建一个物体的时候我们是以一个三维世界既是世界坐标来构建，而转化为屏幕坐标展示在我们眼前，则需要经历多道矩阵变化，中间webGL替我们操作了许多事情。 世界坐标系：在webGL中，世界坐标系是以屏幕中心为原点(0, 0, 0)，且是始终不变的。你面对屏幕，你的右边是x正轴，上面是y正轴，屏幕指向你的为z正轴。长度单位这样来定：窗口范围按此单位恰好是(-1,-1,-1)到(1,1,1)。 屏幕坐标系： web...
【Threejs基础教程-点线精灵篇】 4.5 射线(Ray)与射线拾取(Raycaster)
qq_42760477的博客
06-24 3014
【Threejs基础教程-点线精灵篇】4.5 射线与射线拾取
three.js的室内地图展示
05-21
在本项目中，我们主要探讨的是如何利用three.js库来实现一个室内地图的展示。three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得更加简单。通过这个项目，我们可以学习到以下几个关键知识点： ...
raycaster：在JavaScript中进行光线投射的幼稚方法
02-10
在"raycaster-master"这个压缩包中，可能包含了一个简单的光线投射实现示例，包括源代码、资源文件等。通过阅读和分析这些文件，你可以更深入地理解光线投射的实现细节，并尝试自己动手实践。 总之，光线投射是实现...
ThreeJS渲染尺寸非浏览器窗体尺寸时选中会有问题方案解决DEMO.zip
01-06
在DEMO中，我们会监听`mousedown`事件，然后使用`Raycaster`从鼠标位置向场景投射光线，找出与之相交的3D物体： ```javascript document.addEventListener('mousedown', function (event) { // 转换鼠标点击的2D...
Three.js-3D互动城市.zip
07-13
《Three.js：构建3D互动城市》 Three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建和展示3D图形变得简单易行。WebGL是一种JavaScript API，用于在HTML5 Canvas上进行硬件加速的3D图形渲染，无需插件支持...
Three.js中光线投射Raycaster的简单使用案例 与模型的交互，当鼠标移动到模型时出现信息框
weixin_52960369的博客
04-28 2347
创建光线投射Raycaster实例步骤 1.创建 Raycaster 实例 2.为窗口绑定事件 pointermove 想使用点击事件 click 的可以自行修改 3.定义窗口触发 pointermove 事件所执行的回调函数 onPointerMove 4.通过摄像机和鼠标位置更新射线
three.js光线投射
NOSaac的博客
08-09 668
顾名思义，光线投射器(也算叫光线追踪吧）可以向特定方向投射（或发射）光线并测试哪些物体与其相交光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。你可以使用该技术来检测玩家前面是否有一堵墙，测试激光枪是否击中了某物，测试当前是否有某物位于鼠标下方以模拟鼠标事件，以及许多其他事情。此文章为threejs-journey课程学习笔记。
Three.js中的Raycasting技术：实现3D场景交互事件的Raycaster详解
前端开发工程师
06-05 1814
`Raycasting`是一种计算机图形学技术，用于确定从一个点（通常是观察者的位置或屏幕上的某一点）发射出的光线与场景中物体的交点。在`3D`应用中，这一技术常用于模拟光照效果、碰撞检测以及用户交互。简单来说，当你在屏幕上点击或触摸时，`Three.js`会从该点向场景发射一条虚拟的射线，然后检查这条射线与场景中哪些对象相交，从而判断用户点击了哪个对象。
three.js(6):屏幕点击与鼠标的交互（Raycaster的用法）
spider_man
08-28 4153
参考：光线投射器（Raycaster）、ThreeJS中的点击与交互——Raycaster的用法 该类用来处理光线投射。光线投射主要用于物体选择、碰撞检测以及图像成像等方面。 坐标系概念 我们的手机屏幕是二维的，但是我们展示物体的世界是三维的，当我们在构建一个物体的时候我们是以一个三维世界既是世界坐标来构建，而转化为屏幕坐标展示在我们眼前，则需要经历多道矩阵变化，中间webGL替我们操作了许多事情。 世界坐标系：在webGL中，世界坐标系是以屏幕中心为原点(0, 0, 0)，且是始终不变的。你面
three.js入门速成
01-14
8年前端架构经验快速掌握three.js学到three.js的源码知识及各个目录的作用掌握基础的组件知识掌握three.js的学习方法掌握相机组件的重要内容
three.js 学习笔记 | 光线投射技术 - 包围盒(碰撞检测)
好好学习天天向上
04-27 2132
如果没有设置则每次调用都会初始化一个新数组。
three.js Raycaster简介，不基于body加载，Raycaster射线拾取对象出现误差问题，基于全屏和非全屏DOM射线拾取方法封装
weixin_44242600的博客
08-12 1061
在 three.js 中利用射线Raycaster进行碰撞检测获取射线穿透对象。基于全屏和非全屏dom射线拾取方法封装。
（二）Three.js光线检测
qq_45944090的博客
10-28 1772
使用three.js中的光线检测Raycaster()，实现一下效果：通过点击处的坐标，修改摄像机位置，实现摄像机由远及近的过渡动态效果（由远景到近景）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你华还是你华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值