当前位置: 首页 > news >正文

学习threejs,通过THREE.Raycaster给模型绑定点击事件

👨‍⚕️ 主页: gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏:threejs gis工程师


文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.Raycaster光线投射概念
  • 二、🍀通过THREE.Raycaster给模型绑定点击事件
    • 1. ☘️实现思路
    • 2. ☘️代码样例


一、🍀前言

本文详细介绍如何基于threejs在三维场景中实现通过THREE.Raycaster给模型绑定点击事件,亲测可用。希望能帮助到您。一起学习,加油!加油!

1.1 ☘️THREE.Raycaster光线投射概念

THREE.Raycaster 光线投射,常用于和3D图形之间做一些点击事件和交互操作,也可用于碰撞检测等
创建方法:
Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float )
origin:光线投射的原点向量。
direction:向射线提供方向的方向向量,应当被标准化。
near:返回的所有结果比near远。near不能为负值,其默认值为0。
far:返回的所有结果都比far近。far不能小于near,其默认值为Infinity(正无穷。)
属性
far:远距离因数(投射远点)。这个值表明哪些对象可以基于该距离而被raycaster所丢弃。 这个值不应当为负,并且应当比near属性大。
near:近距离因数(投射近点)。这个值表明哪些对象可以基于该距离而被raycaster所丢弃。 这个值不应当为负,并且应当比far属性小。
camera : 对依赖于视图的对象进行光线投射时使用的相机。默认为空。
layers:Raycaster 在执行相交测试时使用它来选择性地忽略 3D 对象。
ray:用于进行光线投射的射线。

二、🍀通过THREE.Raycaster给模型绑定点击事件

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机,定义相机位置 camera.position.set,定义相机方向lookAt。
  • 4、加载模型:添加THREE.AxesHelper坐标辅助工具,添加3000个位置随机的THREE.BoxGeometry立方体,scene场景中加入坐标辅助工具和立方体。
  • 5、创建THREE.Raycaste光线投射对象,创建onMouseClick事件,定义THREE.Raycaster光线投射与scene中立方体交互事件。
  • 6、加入controls,加入stats监控器,监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn27(通过THREE.Raycaster给模型绑定点击事件)</title><script src="lib/threejs/127/three.js-master/build/three.js"></script><script src="lib/threejs/127/three.js-master/examples/js/utils/SceneUtils.js"></script><script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style>body {margin: 0;}canvas {width: 100%;height: 100%;display: block;}
</style>
<body onload="draw()">
</body>
<script>var renderervar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setClearColor(0xffffff)renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)}var scenevar initScene = () => {scene = new THREE.Scene()}var cameravar initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)camera.position.set(0, 40, 100)camera.lookAt(new THREE.Vector3(0, 0, 0))}var initModel = () => {var helper = new THREE.AxesHelper(20)scene.add(helper)var s = 25var cube = new THREE.BoxGeometry(s, s, s)for (var i = 0; i < 3000; i++) {var material = new THREE.MeshBasicMaterial({color: randomColor()})var mesh = new THREE.Mesh(cube, material)mesh.position.x = 800 * ( 2.0 * Math.random() - 1.0 )mesh.position.y = 800 * ( 2.0 * Math.random() - 1.0 )mesh.position.z = 800 * ( 2.0 * Math.random() - 1.0 )mesh.rotation.x = Math.random() * Math.PImesh.rotation.y = Math.random() * Math.PImesh.rotation.z = Math.random() * Math.PImesh.updateMatrix()scene.add(mesh)}}var randomColor = () => {var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"],strHex = "#",index;for (var i = 0; i < 6; i++) {index = Math.round(Math.random() * 15)strHex += arrHex[index]}return strHex}var raycaster = new THREE.Raycaster()var mouse = new THREE.Vector2()var onMouseClick = (event) => {mouse.x = (event.clientX / window.innerWidth) * 2 - 1mouse.y = -(event.clientY / window.innerHeight) *2 + 1raycaster.setFromCamera(mouse, camera)var intersects = raycaster.intersectObjects(scene.children)console.log(intersects)for (var i = 0; i < intersects.length; i++) {intersects[i].object.material.color.set(0xff0000)}}window.addEventListener('click', onMouseClick, false)var statsvar initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var controlsvar initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping = true}var render = () => {renderer.render(scene, camera)}var onWindowResize = (event) => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()render()renderer.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()controls.update()requestAnimationFrame(animate)}var draw = () => {initRender()initScene()initCamera()initModel()initStats()initControls()animate()window.onresize = onWindowResize}
</script>
</html>

效果如下:
在这里插入图片描述

相关文章:

学习threejs,通过THREE.Raycaster给模型绑定点击事件

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.Raycaster光线投射概…...

Jackson Json序列化反序列化的两个坑

Jackson is a suite of data-processing tools for Java (and the JVM platform) Jackson最常用的Json序列化功能&#xff0c;引入如下的包即可&#xff1a; <properties>...<!-- Use the latest version whenever possible. --><jackson.version>2.17.1<…...

k8s_Pod健康检查

Kubernetes 3种探针介绍 LivenessProbe&#xff08;存活探针&#xff09; LivenessProbe 用于检查容器是否仍然活着。如果探针检测到容器已经失去响应&#xff0c;Kubernetes 将重启该容器。这通常用来修复由于内部状态错误或死锁引起的程序失效问题。 作用&#xff1a;检测容器…...

基于DDPG算法的股票量化交易

项目源码获取方式见文章末尾&#xff01; 回复暗号&#xff1a;13&#xff0c;免费获取600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 **《------往期经典推荐------》**项目名称 1.【基于PyQTFaceNet卷积神经网络实现的学生人脸识别考勤系统】 2.【卫星图像道…...

eIQ笔记(UI介绍+Loss曲线+OpenART例程)

This is a very beginner-friendly article ^o^ 目录 🍂一、训练器设置 input size: learning rate: learning rate decay: Epochs: Decay Rate: Linear Decay: Batch Size: Epochs to Train: QAT(Quantization Aware Training)量化感知训练: Pruning剪枝…...

微信小程序——消息订阅

首先用到的就是wx.requestSubscribeMessage接口。 注意&#xff1a;用户发生点击行为或者发起支付回调后&#xff0c;才可以调起订阅消息界面 requestSubscribeMessage() {uni.requestSubscribeMessage({tmplIds: [],//需要订阅的消息模板的id的集合&#xff0c;一次调用最多可…...

网络原理(传输层)->TCP协议解

前言 大家好&#xff01;我是小帅&#xff0c;今天我们来学习TCP协议&#xff0c;个人主页 文章目录 1. TCP协议2. TCP的核心机制2.1TCP核心机制一&#xff1a;确认应答2.2 TCP核心机制二&#xff1a;超时重传2.3 TCP核心机制三&#xff1a;连接管理2.4 TCP核心机制四&#xf…...

oracle imp和exp 导入不同库的用户和表空间

参考&#xff1a; oracle 导入(imp)数据时的表空间(tablespace users)问题_imp tablespace-CSDN博客 网上的解决办法大概都是这种&#xff0c;但是实际测试19c数据库并不能成功&#xff0c;所以最后采取在导出文件上强行修改表空间的办法&#xff0c;改完后再继续执行导出导入…...

滚珠丝杆的精度级别如何分?

滚珠丝杆是一种常见的线性传动装置&#xff0c;广泛应用于各种机械设备和自动化系统中。滚珠丝杆的精度等级划分是评估其传动精度和运动平稳度的重要标准&#xff0c;滚珠丝杆的精度级别划分主要基于传动中实际移动距离与理想移动距离的偏差&#xff0c;偏差越小&#xff0c;精…...

ComfyUI初体验

ComfyUI 我就不过多介绍了&#xff0c;安装和基础使用可以看下面大佬的视频&#xff0c;感觉自己靠图文描述的效果不一定好&#xff0c;大家看视频比较方便。 ComfyUI全球爆红&#xff0c;AI绘画进入“工作流时代”&#xff1f;做最好懂的Comfy UI入门教程&#xff1a;Stable D…...

DPI-C动态库so的使用

文章目录 前言一、方法介绍二、demo演示2.1 文件准备2.2 执行仿真2.3 仿真结果 总结 前言 在做IC验证EDA仿真过程中&#xff0c;有时候需要调用C实现的参考模块&#xff0c;我们可以利用DPI-C的功能&#xff0c;实现SV侧调用C侧的函数。 在具体实现过程中&#xff0c;我们可以…...

Java避坑案例 - 高并发场景下的分布式缓存策略

文章目录 概述缓存常见问题及解决方案把 Redis 当作数据库常用的数据淘汰策略如何选择合适的驱逐算法 缓存雪崩问题复现解决方案 缓存击穿&#xff08;热点缓存失效&#xff09;问题复现解决方案 缓存穿透问题复现解决方案缓存穿透 vs 缓存击穿 缓存与数据库的一致性先更新缓存…...

Python中的字符串修剪:strip()、lstrip() 和 rstrip()

Python中的字符串修剪 Python 中的字符串修剪&#xff1a;strip()、lstrip() 和 rstrip()strip()lstrip()rstrip()应用场景结论 Python 中的字符串修剪&#xff1a;strip()、lstrip() 和 rstrip() 在 Python 开发中&#xff0c;我们经常需要处理字符串&#xff0c;其中一项常见…...

K8S配置storage-class

简介 Kubernetes支持NFS存储&#xff0c;需要安装nfs-subdir-external-provisioner&#xff0c;它是一个存储资源自动调配器&#xff0c;它可将现有的NFS服务器通过持久卷声明来支持Kubernetes持久卷的动态分配。该组件是对Kubernetes NFS-Client Provisioner的扩展&#xff0…...

多线程——线程池

目录 前言 一、什么是线程池 1.引入线程池的原因 2.线程池的介绍 二、标准库中的线程池 1.构造方法 2.方法参数 &#xff08;1&#xff09;corePoolSize 与 maximumPoolSize &#xff08;2&#xff09;keepAliveTime 与 unit &#xff08;3&#xff09;workQueue&am…...

VScode插件:前端每日一题

大文件上传如何做断点续传&#xff1f; 在前端实现大文件上传的断点续传&#xff0c;通常会将文件切片并分块上传&#xff0c;记录每块的上传状态&#xff0c;以便在中断或失败时只上传未完成的部分。以下是实现断点续传的主要步骤和思路&#xff1a; 1. 文件切片 (File Slici…...

Android跨进程通信

1、跨进程通信的几种方式 在 Android 中&#xff0c;跨进程通信 (IPC, Inter-Process Communication) 方式有多种&#xff0c;主要用于在不同的应用或进程之间传递数据。常见的跨进程通信方式包括&#xff1a; AIDL (Android Interface Definition Language) • 描述&#xff…...

【初阶数据结构】计数排序 :感受非比较排序的魅力

文章目录 前言1. 什么是计数排序&#xff1f;2. 计数排序的算法思路2.1 绝对位置和相对位置2.2 根据计数数组的信息来确认 3. 计数排序的代码4. 算法分析5. 计数排序的优缺点6.计数排序的应用场景 前言 如果大家仔细思考的话&#xff0c;可能会发现这么一个问题。我们学的七大…...

前后双差速轮之LQR控制

在之前的代码中,我们实现了前后两对双差速轮AGV的运动学正解和逆解。但为了实现对AGV的精确路径跟踪和姿态控制,我们需要引入控制算法。线性二次型调节器(LQR)是一种常用的最优控制方法,可以有效地将系统的状态误差最小化。本文将详细说明如何在之前的C++代码中加入LQR控制…...

Linux之远程连接服务器

1、远程连接服务器简介 &#xff08;1&#xff09;什么是远程连接服务器 远程连接服务器通过文字或图形接口方式来远程登录系统&#xff0c;让你在远程终端前登录linux主机以取得可操作主机接口&#xff08;shell&#xff09;&#xff0c;而登录后的操作感觉就像是坐在系统前面…...

k8s 部署 nexus3 详解

创建命名空间 nexus3-namespace.yaml apiVersion: v1 kind: Namespace metadata:name: nexus-ns创建pv&pvc nexus3-pv-pvc.yaml apiVersion: v1 kind: PersistentVolume metadata:name: nfs-pvnamespace: nexus-ns spec:capacity:storage: 3GiaccessModes:- ReadWriteM…...

从“摸黑”到“透视”:AORO A23热成像防爆手机如何改变工业检测?

在工业检测领域&#xff0c;传统的检测手段常因效率低下、精度不足和潜在的安全风险而受到诟病。随着科技的不断进步&#xff0c;一种新兴的检测技术——红外热成像技术&#xff0c;正逐渐在该领域崭露头角。近期&#xff0c;小编对一款集成红外热成像技术的AORO A23防爆手机进…...

让你的 IDEA 使用更流畅 | IDEA内存修改

随着idea使用越来越频繁&#xff0c;笔者最近发现使用过程中有时候会出现卡顿现象&#xff0c;例如&#xff0c;启动软件变慢&#xff0c;打开项目的速度变慢等&#xff1a; 因此如果各位朋友觉得最近也遇到了同样的困惑&#xff0c;不妨跟着笔者一起来设置IDEA的内存大小吧~ …...

docker run 命令解析

docker run 命令解析 docker run 命令用于从给定的镜像启动一个新的容器。这个命令可以包含许多选项&#xff0c;下面是一些常用的选项&#xff1a; -d&#xff1a;后台运行容器&#xff0c;并返回容器ID&#xff1b;-i&#xff1a;以交互模式运行容器&#xff0c;通常与 -t …...

[Unity Demo]从零开始制作空洞骑士Hollow Knight第十七集:制作第一个BOSS苍蝇之母

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、战斗场景Battle Scene相关逻辑处理 1.防止玩家走出战斗场景的门2.制作一个简单的战斗场景二、制作游戏第一个BOSS苍蝇之母 1.导入素材和制作相关动画2.制作…...

【Nginx系列】499错误

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

Springboot项目控制层注释

Springboot主流的 ----------------------- 简略写法 package com.dx.wlmq.controller;import com.dx.wlmq.domain.Address; import com.dx.wlmq.service.AddresssService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.b…...

从Docker容器中备份整个PostgreSQL

问题 现在需要从Docker容器中备份整个PostgreSQL后&#xff0c;然后&#xff0c;使用备份文件在另外一个pg的docker容器中恢复过来。 步骤 备份旧容器中的PG # 登录到旧的PG容器中 docker exec -it postgres bash # 备份数据库 pg_dumpall -c -U postgres > dump_date %…...

从小需求看大格局:如何用技术智慧赢得客户信任

时间&#xff1a;2024年 10月 26日 作者&#xff1a;小蒋聊技术 邮箱&#xff1a;wei_wei10163.com 微信&#xff1a;wei_wei10 音频&#xff1a;从小需求看大格局&#xff1a;如何用技术智慧赢得客户信任 欢迎大家回到“小蒋聊技术”&#xff0c;这是一个不只是教你如何写…...

模型 支付矩阵

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。策略选择的收益分析工具。 1 支付矩阵的应用 1.1 支付矩阵在市场竞争策略分析中的应用 支付矩阵是一种强大的决策工具&#xff0c;它在多个领域的应用中都发挥着重要作用。以下是一个具体的应用案例…...

唐山设计网站公司/沈阳关键词优化费用

转载请注明出处&#xff1a; http://www.cnblogs.com/darkknightzh/p/5797526.html 参考网址&#xff1a; http://caffe.berkeleyvision.org/installation.html#prerequisites 1. 必须的依赖&#xff1a;Boost > 1.55&#xff0c;CUDA&#xff0c;BLAS 看一下自己的CUDA安装…...

安卓开发技术/seo站长工具综合查询

一、数据类型1、列表&#xff1a;# 列表中的每个元素都是可变的# 列表的元素是有序的&#xff0c;# 列表用中括号表示ab [ ]# ab.insert(‘位置’&#xff0c;‘元素‘) ## 在指定位置插入某个元素# ab.append() # 在末尾增加元素# ab.remove(1) # 删除‘1‘这个元素# ab.po…...

专做蔬菜水果的网站/百度app安装

我们是否有必要费力创造一种通用的Web字节码&#xff1f;LLVM就是解决方案吗&#xff1f;Mozilla asm.js和Google PNaCl这两种支持在浏览器中运行原生代码的机制&#xff0c;哪种更好呢&#xff1f;本文汇集了网络上的一些相关观点。\u0026#xD;ArsTechnica上发布了一篇有关以Ja…...

男做女爱网站/东莞网络推广策略

这里是修真院web小课堂&#xff0c;每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解web知识/技能&#xff0c;本篇分享的是&#xff1a; 【简述JS中的event delegate】 在javasript中deleg…...

企业做网站要注意些什么/seo关键词排名优化销售

介绍 在您完成我们的元类简介一章之后&#xff0c;您可能已经问过自己有关元类的可能用例。有一些有趣的用例&#xff0c;但它不是 - 就像有人说的 - 一个等待问题的解决方案。我们已经提到了一些例子。 在 Python 教程的这一章中&#xff0c;我们想详细说明一个示例元类&…...

wordpress 换头像/热门推广平台

文章转自&#xff1a;http://other.caixin.com/2013-09-14/100582628.html 文章作者&#xff1a;安替 美国一个跨学科团队今年完成了一项对资源稀缺状况下人的思维方式的研究&#xff0c;结论是&#xff1a;穷人和过于忙碌的人有一个共同思维特质&#xff0c;即注意力被稀缺资源…...