ThreeJS:光线投射与3D场景交互

光线投射Raycaster

        光线投射详细介绍可参考：https://en.wikipedia.org/wiki/Ray_casting，

        ThreeJS中，提供了Raycaster类，用于进行鼠标拾取，即：当三维场景中鼠标移动时，利用光线投射，可计算出鼠标划过了哪些物体。

        ThreeJS官方案例webgl_interactive_cubes演示了光线投射的具体应用，

        通过Raycaster类实例的intersectObjects方法，可以获取到与射线Ray相交的一组物体；

        通过Raycaster类实例的intersectObject方法，可以获取到与Ray射线相交的第一个物体，

        此外，在鼠标点击或移动时，我们是需要不断去更新Ray射线的，这样才能选中正确的3D物体，可以通过setFromCamera方法，来更新射线，

        接着，还有一个要解决的问题，就是这里的标准化设备坐标中的二维坐标，如何进行处理才是符合ThreeJS的接口规范的？

        核心代码如下，

const mousePosition = new THREE.Vector2(); //记录鼠标位置
//TODO:监听鼠标移动事件
function onPointerMove( event ) {
  mousePosition.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mousePosition.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
document.addEventListener("mousemove",onPointerMove);

注意到：计算mousePosition.y的计算结果，相比mousePosition.x多乘了一个-1，这是因为屏幕坐标系和ThreeJS的XYZ空间直角坐标系，两者的Y轴是相反的。

3D场景鼠标交互案例

       下面来实现一个利用光线投射控制鼠标选中物体高亮显示的案例，主要效果如下：

①鼠标选中物体，高亮显示，

②鼠标离开物体，取消高亮显示，

         完整示例代码如下，

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js"; //轨道控制器
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js"; //lil-gui调试工具
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js"; //HDR加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; //GLTF加载器
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

const gui = new GUI();

//TODO:打印版本
console.warn("threejs版本:", THREE.REVISION);
//TODO:创建时钟
const clock = new THREE.Clock();
//TODO:创建场景
const scene = new THREE.Scene();
//TODO:创建透视相机
const camera = new THREE.PerspectiveCamera(
  45, //视角
  window.innerWidth / window.innerHeight,
  0.1, //近平面
  1000.0 //远平面
);

//TODO:创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

//TODO:轨道控制器
const orbitControls = new OrbitControls(camera, renderer.domElement);
//设置阻尼效果
// orbitControls.enableDamping = true;
orbitControls.update();

document.body.appendChild(renderer.domElement);

//TODO:添加光源
const light = new THREE.PointLight(0xffffff, 1000, 1000);
light.position.set(15, 15, 15);
scene.add(light);

scene.background = new THREE.Color(0xbfe3dd);


//TODO：添加3个球体
const ball1 = new THREE.SphereGeometry(1);
const ballMaterial = new THREE.MeshBasicMaterial({color:0xffff00});
const ballMesh1 = new THREE.Mesh(ball1,ballMaterial);
ballMesh1.geometry.scale(0.5,0.5,0.5);
ballMesh1.position.set(-1.0,-1.0,-1.0);

const ballMesh2 = new THREE.Mesh(ball1,ballMaterial);
ballMesh2.geometry.scale(0.5,0.5,0.5);
ballMesh2.position.set(1.0,-1.0,-1.0);

const ballMesh3 = new THREE.Mesh(ball1,ballMaterial);
ballMesh3.geometry.scale(0.5,0.5,0.5);
ballMesh3.position.set(1.0,1.0,-1.0);

const ballMesh4 = new THREE.Mesh(ball1,ballMaterial);
ballMesh4.geometry.scale(0.5,0.5,0.5);
ballMesh4.position.set(1.0,1.0,1.0);

scene.add(ballMesh1);
scene.add(ballMesh2);
scene.add(ballMesh3);
scene.add(ballMesh4);

//TODO:设置相机位置
camera.position.z = 5.0;
camera.position.y = 2.0;
camera.position.x = 2.0;
camera.lookAt(0, 0, 0);

//TODO:利用光线投射,使用鼠标选中Mesh
const rayCaster = new THREE.Raycaster();
const mousePosition = new THREE.Vector2(); //记录鼠标位置
const hightLightColor = new THREE.Color(0xff0000);//高亮颜色
const highlightMaterial = new THREE.MeshBasicMaterial({color:hightLightColor});
const lastSelected = {
  originMaterial:null,//被选中的3D物体的material
  instance:null,//被选中的3D物体
}
//TODO:监听鼠标移动事件
function onPointerMove( event ) {
  mousePosition.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mousePosition.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
document.addEventListener("mousemove",onPointerMove);


//TODO:还原上一次被选中的3D物体
function resetLastSelected(){
  if(lastSelected.instance && lastSelected.originMaterial){
    lastSelected.instance.material = lastSelected.originMaterial;
    lastSelected.instance = null;
    lastSelected.originMaterial = null;
  }
}

function pick3DObject(){
  // 通过摄像机和鼠标位置更新射线_[使用一个新的原点和方向来更新射线。]
  rayCaster.setFromCamera(mousePosition,camera);
  /**
   * objects —— 检测和射线相交的一组物体。
     recursive —— 若为true，则同时也会检测所有物体的后代。否则将只会检测对象本身的相交部分。默认值为true。
   */
  const interscets = rayCaster.intersectObjects(scene.children,false);
  if(interscets.length>0){
    const interscetObject = interscets[ 0 ].object;
    console.log("interscets::",interscetObject);
    //TODO:还原上一次选中的3D物体
    resetLastSelected();
    if(interscetObject){
      //TODO:鼠标选中3D物体,设置高亮效果
      //记录当前被选中的物体
      lastSelected.instance = interscetObject;
      lastSelected.originMaterial = interscetObject.material;
      //设置高亮
      interscetObject.material = highlightMaterial;
    }
  }else{
    //TODO:鼠标离开3D物体,还原Material
    resetLastSelected();
  }
}

//TODO:创建坐标辅助器
// const axesHelper = new THREE.AxesHelper(5);
// scene.add(axesHelper);

//TODO:渲染函数
function animate() {
  requestAnimationFrame(animate);
  //TODO:旋转立方体
  // mesh.rotation.x += 0.01;
  // mesh.rotation.y += 0.01;
  pick3DObject();
  //TODO:更新轨道控制器
  orbitControls.update();
  //TODO:渲染
  renderer.render(scene, camera);
}
window.onresize = function () {
  //TODO:重置渲染器宽高比
  renderer.setSize(window.innerWidth, window.innerHeight);
  //TODO:重置相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  //TODO:更新相机投影矩阵
  camera.updateProjectionMatrix();
};

animate();

//TODO:lil-gui添加调试按钮
const myObject = {
  // myBoolean: true,
  fullScreenBtnFunction: function () {
    document.body.requestFullscreen();
  },
  exitFullScreenBtnFunction: function () {
    document.exitFullscreen();
  },
  wireframeMode: false,
  renderMode: 1,
  colorSpace: 0,
};

gui.add(myObject, "fullScreenBtnFunction").name("全屏显示"); // Button
gui.add(myObject, "exitFullScreenBtnFunction").name("退出全屏"); // Button
//TODO:开启/关闭线框模式
gui
  .add(myObject, "wireframeMode")
  .name("线框模式")
  .onChange(function (value) {
    console.log(value);
    mesh.material.wireframe = value;
  });
// gui.add(myObject, "myString"); // Text Field
// gui.add(myObject, "myNumber"); // Number Field

//TODO:控制Mesh网格正反面显示模式
gui
  .add(myObject, "renderMode", { 双面模式: 0, 正面模式: 1, 背面模式: 2 })
  .name("三角形正反面显示模式")
  .onChange(function (value) {
    console.log(value);
    switch (value) {
      case 0: {
        triangleMesh.material.side = THREE.DoubleSide;
        break;
      }
      case 1: {
        triangleMesh.material.side = THREE.FrontSide;
        break;
      }
      case 2: {
        triangleMesh.material.side = THREE.BackSide;
        break;
      }
    }
  });

//TODO:控制颜色空间
gui
  .add(myObject, "colorSpace", {
    NoColorSpace: 0,
    SRGBColorSpace: 1,
    LinearSRGBColorSpace: 2,
  })
  .onChange((value) => {
    console.log("修改颜色空间::", value);
    switch (value) {
      case 0: {
        diffuseMap.colorSpace = THREE.NoColorSpace;
        break;
      }
      case 1: {
        diffuseMap.colorSpace = THREE.SRGBColorSpace;
        break;
      }
      case 2: {
        diffuseMap.colorSpace = THREE.LinearSRGBColorSpace;
        break;
      }
    }
  });

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/594427.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

点亮一个LED

点亮一个LED

新建项目 #include <REGX52.H>void main() {P2 0xFE;while(1){} }调整字体大小 在编译之前要勾选一个东西,不然scp读取不了 去stc-isp中烧录进51单片机 两个地方要勾选,一个是单片机型号,一个是串口号,我的单片机型号不是江科大视频里面那个型号,所以不能按视频里面来选…
阅读更多...
【数据结构（邓俊辉）学习笔记】列表04——排序器

【数据结构（邓俊辉）学习笔记】列表04——排序器

文章目录 0. 统一入口1. 选择排序1.1 构思1.2 实例1.3 实现1.4 复杂度 2. 插入排序2.1 构思2.2 实例2.3 实现2.4 复杂度分析2.5 性能分析 3. 归并排序3.1 二路归并算法3.1.1 二路归并算法原理3.1.2 二路归并算法实现3.1.3 归并时间 3.2 分治策略3.2.1 实现3.2.2 排序时间 4. 总…
阅读更多...
学习笔记：【QC】Android Q - IMS 模块

学习笔记：【QC】Android Q - IMS 模块

一、IMS init 流程图 二、IMS turnon 流程图 三、分析说明 1、nv702870 不创建ims apn pdp 2、nv702811 nv702811的时候才创建ims pdp&#xff1a; ims pdp 由ims库发起&#xff0c;高通没有开放这部分代码&#xff1a; 10-10 11:45:53.027 943 943 E Diag_Lib: [IMS_D…
阅读更多...
只用语音能训练出AI大模型吗？就像训练会说话但不识字的人一样

只用语音能训练出AI大模型吗？就像训练会说话但不识字的人一样

AI语音对话技术通常是基于语音识别和自然语言处理&#xff08;NLP&#xff09;的。在这个过程中&#xff0c;语音首先被识别成文字&#xff0c;然后NLP技术对这些文字进行处理&#xff0c;生成回应。然而&#xff0c;我们是否可以直接训练一个“文盲”大模型&#xff0c;即只用…
阅读更多...
45. UE5 RPG 增加角色受击反馈

45. UE5 RPG 增加角色受击反馈

在前面的文章中&#xff0c;我们实现了对敌人的属性的初始化&#xff0c;现在敌人也拥有的自己的属性值&#xff0c;技能击中敌人后&#xff0c;也能够实现血量的减少。 现在还需要的就是在技能击中敌人后&#xff0c;需要敌人进行一些击中反馈&#xff0c;比如敌人被技能击中后…
阅读更多...
深度学习中的注意力机制二（Pytorch 16）

深度学习中的注意力机制二（Pytorch 16）

一 Bahdanau 注意力 通过设计一个 基于两个循环神经网络的编码器‐解码器架构&#xff0c;用于序列到序列学习。具体来说&#xff0c;循环神经网络编码器将长度可变的序列转换为固定形状的上下文变量&#xff0c;然后循环神经网络 解码器根据生成的词元和上下文变量按词元生成…
阅读更多...
meshlab: pymeshlab计算两个模型的布尔交集（mesh boolean intersection）

meshlab: pymeshlab计算两个模型的布尔交集（mesh boolean intersection）

一、关于环境 请参考&#xff1a;pymeshlab遍历文件夹中模型、缩放并导出指定格式-CSDN博客 二、关于代码 本文所给出代码仅为参考&#xff0c;禁止转载和引用&#xff0c;仅供个人学习。 本案例以两个圆环为例。 左侧为两个圆环&#xff0c;右上是重叠&#xff0c;右下是圆…
阅读更多...
引流源码短剧搜索前端源码+内附搜索API

引流源码短剧搜索前端源码+内附搜索API

引流源码短剧搜索前端源码内附搜索API&#xff0c;全网短剧搜索前端源码分享&#xff0c;文末附API及使用详解 内含7000短剧资源(不支持在线播放&#xff09;&#xff0c;毕竟搞在线播放挺烧钱的[阴险] 源码直接上传虚拟主机或服务器即可使用&#xff0c;无需其他配置&#x…
阅读更多...
jvm 马士兵 01 JVM简介，class文件结构

jvm 马士兵 01 JVM简介，class文件结构

01.JVM是什么 JVM是一个跨平台的标准 JVM只识别class文件&#xff0c;符合JVM规范的class文件都可以被识别 u1 是一个字节 u2是两个字节
阅读更多...
使用网络用户命令行工具的/passwordreq:yes

使用网络用户命令行工具的/passwordreq:yes

提示:"新建域时&#xff0c;本地administrator帐户将成为域administrator账户。无法新建域&#xff0c;因为本地administrator账户密码不符合要求。 目前&#xff0c;本地administrator账户不需要密码。我们建议您使用网络用户命令行工具的/passwordreq:yes选项获得该账户…
阅读更多...
AI图书推荐：ChatGPT在真实商业世界中的应用

AI图书推荐：ChatGPT在真实商业世界中的应用

《ChatGPT在真实商业世界中的应用》 (Unleashing The Power of ChatGPT: A Real World Business Applications)首先概述了ChatGPT及其在对话式人工智能领域的影响。接着&#xff0c;你将深入了解ChatGPT的技术方面&#xff0c;理解机器学习算法和自然语言处理如何在后台工作。然…
阅读更多...
鸿蒙ArkTs开发，仿抖音个人中心header 下拉放大

鸿蒙ArkTs开发，仿抖音个人中心header 下拉放大

如果是iOS 或者android 上实现&#xff0c;可以用Scollview 的contentOffset 来实现&#xff0c;然而在鸿蒙ets中该如何实现&#xff1f;废话不多说开始撸代码 第一步、实现一个header // 创建header&#xff0c;准备一张背景图片BuilderHeaderBuilder(){Column() {Row() {Ima…
阅读更多...
社交媒体数据恢复：爱聊

社交媒体数据恢复：爱聊

爱聊数据恢复方法 在爱聊的使用过程中&#xff0c;如果遇到数据丢失的情况&#xff0c;可以尝试以下几种方法来恢复数据。 1. 硬盘坏道检测与修复 如果问题是由于硬盘坏道导致的&#xff0c;可以按照以下步骤进行操作&#xff1a; 找到需要修复的坏道磁盘&#xff1a;首先&…
阅读更多...
js模块化：修改导入模块的内容，会有影响吗？

js模块化：修改导入模块的内容，会有影响吗？

起因 element-ui的popper组件相关的层级&#xff0c;是使用popup-manager来统一管理的。 之前试图在自己的组件里导入并使用element-ui的popup-manager&#xff0c;但是层级老是和element-ui组件的层级冲突&#xff0c;看了下源码&#xff0c;竟意外发现&#xff0c;使用popu…
阅读更多...
基于若依框架搭建网站的开发日志（一）：若依框架搭建、启动、部署

基于若依框架搭建网站的开发日志（一）：若依框架搭建、启动、部署

RuoYi&#xff08;基于SpringBoot开发的轻量级Java快速开发框架&#xff09; 链接&#xff1a;开源地址 若依是一款开源的基于VueSpringCloud的微服务后台管理系统&#xff08;也有SpringBoot版本&#xff09;&#xff0c;集成了用户管理、权限管理、定时任务、前端表单生成等…
阅读更多...
You don’t have permission.

You don’t have permission.

The document “XXX” could not be saved. You don’t have permission. 1.查看修改了iOS系统库导致的, 根据提示, 进入到"XXX"文件中, 然后commandz回退/取消 2. Xcode 调试遇到的报错&#xff08;持续更新&#xff09;
阅读更多...
治疗耳鸣患者案例分享第二期

治疗耳鸣患者案例分享第二期

“患者耳鸣20年了&#xff0c;目前耳朵没有堵或者胀的感觉&#xff0c;但是偶尔有点痒&#xff0c;平时会有头晕头胀这种情况&#xff0c;然后头晕是稍微晕炫一下。然后头疼是经常有的&#xff0c;头胀不经常。” 患者耳鸣持续20年&#xff0c;虽然耳朵没有堵或胀的感觉&#x…
阅读更多...
书生浦语训练营第三次课笔记：XTuner 微调 LLM：1.8B、多模态、Agent

书生浦语训练营第三次课笔记：XTuner 微调 LLM：1.8B、多模态、Agent

Finetune 简介 两种Finetune范式&#xff1a;增量预训练微调、指令跟随微调 微调数据集 上述是我们所期待模型回答的内容&#xff0c;在训练时损失的计算也是基于这个。 训练数据集看起来是这样&#xff0c;但是真正喂给模型的&#xff0c;是经过对话模板组装后的 下图中&…
阅读更多...
防火墙的基本概念

防火墙的基本概念

我们在 TCP/IP协议四层模型与OSI七层模型 的最后说过&#xff0c;在四层模型中每一层都会有对应的风险&#xff0c;而防火墙就是来阻断这些风险的工具。 防火墙的基本功能 防火墙的分类 目前没有权威而明确的分类 按照实现方式&#xff1a; 硬件防火墙软件防火墙 按照部署…
阅读更多...
HNU-人工智能-实验1-A*算法

HNU-人工智能-实验1-A*算法

人工智能-实验1 计科210x 甘晴void 一、实验目的 掌握有信息搜索策略的算法思想&#xff1b; 能够编程实现搜索算法&#xff1b; 应用A*搜索算法求解罗马尼亚问题。 二、实验平台 课程实训平台https://www.educoder.net/shixuns/vgmzcukh/challenges 三、实验内容 3.…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站