ThreeJS能力演示——界面点选交互能力
1、支持界面点选
点选模型整体思路是:根据camera位置作为起始点,叠加鼠标相对位置作为偏置,摄像头方向作为射线方向。
根据射线方向中的遇到的3D物体列表,第一个遇到的物体作为被点选的物体。
// 鼠标事件处理let selectedObject = null;const raycaster = new THREE.Raycaster();const mouse = new THREE.Vector2();const rayHelper = new THREE.Line(new THREE.BufferGeometry(), new THREE.LineDashedMaterial({ color: 0xff0000, dashSize: 1, gapSize: 1 }));scene.add(rayHelper);function onMouseClick(event) {event.preventDefault();mouse.x = ((event.clientX / renderer.domElement.clientWidth) * 2) - 1;mouse.y = -((event.clientY / renderer.domElement.clientHeight) * 2) + 1;raycaster.setFromCamera(mouse, camera);const intersects = raycaster.intersectObjects(scene.children);if (intersects.length > 0) {selectedObject = intersects[0].object;const selectionInfo = document.getElementById('selection-info');selectionInfo.innerHTML = `选中对象: ${selectedObject.name}`;const origin = new THREE.Vector3();origin.copy(camera.position);const direction = new THREE.Vector3();direction.copy(raycaster.ray.direction).multiplyScalar(100);rayHelper.geometry.setFromPoints([origin, origin.clone().add(direction)]);} else {selectedObject = null;const selectionInfo = document.getElementById('selection-info');selectionInfo.innerHTML = '未选中任何对象';rayHelper.geometry.dispose();rayHelper.geometry = new THREE.BufferGeometry();}}window.addEventListener('click', onMouseClick);
2、整体代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Three.js 几何体操作示例</title><style>body { margin: 0; overflow: hidden; }#camera-info {position: absolute;top: 10px;left: 10px;background-color: rgba(0, 0, 0, 0.5);color: white;padding: 10px;font-family: Arial, sans-serif;}</style>
</head>
<body>
<div id="camera-info"></div>
<div id="selection-info"></div>
<script type="importmap">{"imports": {"three": "./three.js-master/build/three.module.js","three/addons/": "./three.js-master/examples/jsm/"}}
</script>
<script type="module">import * as THREE from "three"import { OrbitControls } from 'three/addons/controls/OrbitControls.js';import { GUI } from 'three/addons/libs/lil-gui.module.min.js';import { PCDLoader } from "three/addons/loaders/PCDLoader.js"import { GLTFLoader } from "three/addons/loaders/GLTFloader.js"// 1) 创建画布const scene = new THREE.Scene();scene.background = new THREE.Color( 0xa0a0a0 );const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 2) 设置 camera 位置,朝向角度const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 0, 20); // 设置相机位置camera.lookAt(scene.position); // 让相机朝向场景中心// 设置控制轨道const controls = new OrbitControls( camera, renderer.domElement );controls.target.set( 0, 0.1, 0 );controls.update();controls.minDistance = 0.5;controls.maxDistance = 1000;controls.maxPolarAngle = 0.5 * Math.PI;// 5) 支持动态显示摄像头位置、角度、缩放信息const cameraInfo = document.getElementById('camera-info');function updateCameraInfo() {cameraInfo.innerHTML = `摄像头信息:<br>位置: (${camera.position.x.toFixed(2)}, ${camera.position.y.toFixed(2)}, ${camera.position.z.toFixed(2)})<br>角度: (${camera.rotation.x.toFixed(2)}, ${camera.rotation.y.toFixed(2)}, ${camera.rotation.z.toFixed(2)})<br>缩放: ${camera.zoom.toFixed(2)}`;}updateCameraInfo();// 渲染循环function animate() {requestAnimationFrame(animate);updateCameraInfo();renderer.render(scene, camera);}// 存储创建的几何体列表createSphere()// 几何体创建函数// 创建球体function createSphere() {const geometry = new THREE.SphereGeometry( 1, 32, 32 );const material = new THREE.MeshBasicMaterial( {color: 0x0000ff} );const sphere = new THREE.Mesh( geometry, material );sphere.name = 'Sphere';sphere.position.set(0,0,0)scene.add( sphere );return sphere;}// 1) 导入点云const loader = new PCDLoader();loader.load( './exported_point_cloud.pcd', function ( points ) {// loader.load( './three.js-master/examples/models/pcd/binary/Zaghetto.pcd', function ( points ) {points.geometry.center();points.geometry.rotateX( Math.PI );points.name = 'Zaghetto.pcd';points.position.set(2,0,0)scene.add( points );} );// 1) 导入glb模型const glb_loader = new GLTFLoader();glb_loader.load('./three.js-master/examples/models/gltf/Horse.glb', (gltf) => {// loader.load('./exported_model.gltf', (gltf) => {const model = gltf.scene;model.name = "Horse.glb"scene.add(model);// 2) 支持缩放模型比例model.scale.set(1, 1, 1);// 3) 支持调整模型放置位置,角度姿态model.position.set(0, 0, 0);model.rotation.set(0, 0, 0);}, undefined, (error) => {console.error('模型加载失败: ', error);});animate();// 鼠标事件处理let selectedObject = null;const raycaster = new THREE.Raycaster();const mouse = new THREE.Vector2();const rayHelper = new THREE.Line(new THREE.BufferGeometry(), new THREE.LineDashedMaterial({ color: 0xff0000, dashSize: 1, gapSize: 1 }));scene.add(rayHelper);function onMouseClick(event) {event.preventDefault();mouse.x = ((event.clientX / renderer.domElement.clientWidth) * 2) - 1;mouse.y = -((event.clientY / renderer.domElement.clientHeight) * 2) + 1;raycaster.setFromCamera(mouse, camera);const intersects = raycaster.intersectObjects(scene.children);if (intersects.length > 0) {selectedObject = intersects[0].object;const selectionInfo = document.getElementById('selection-info');selectionInfo.innerHTML = `选中对象: ${selectedObject.name}`;const origin = new THREE.Vector3();origin.copy(camera.position);const direction = new THREE.Vector3();direction.copy(raycaster.ray.direction).multiplyScalar(100);rayHelper.geometry.setFromPoints([origin, origin.clone().add(direction)]);} else {selectedObject = null;const selectionInfo = document.getElementById('selection-info');selectionInfo.innerHTML = '未选中任何对象';rayHelper.geometry.dispose();rayHelper.geometry = new THREE.BufferGeometry();}}window.addEventListener('click', onMouseClick);animate();
</script>
</body>
</html>
代码中为了方面确定鼠标射线,在点选后,我这边通过rayHelper显示点选射线方向。实际应用时可以删除。
相关文章:
ThreeJS能力演示——界面点选交互能力
1、支持界面点选 点选模型整体思路是:根据camera位置作为起始点,叠加鼠标相对位置作为偏置,摄像头方向作为射线方向。 根据射线方向中的遇到的3D物体列表,第一个遇到的物体作为被点选的物体。 // 鼠标事件处理let selectedObjec…...
Linux:常用命令--文件与目录操作
ls命令 功能:(list)列出当前目录的文件信息 语法:ls [-l -h -a] [参数] 参数:被查看的文件夹,不提供参数,表示查看当前工作目录-l,以列表形式查看每个文件的属性,包含…...
Node.js NativeAddon 构建工具:node-gyp 安装与配置完全指南
Node.js NativeAddon 构建工具:node-gyp 安装与配置完全指南 node-gyp Node.js native addon build tool [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/no/node-gyp 项目基础介绍及主要编程语言 Node.js NativeAddon 构建工具(node-gyp…...
docker运行Java项目,Kaptcha因为字体缺失没法显示验证码图片
2015工作至今,10年资深全栈工程师,CTO,擅长带团队、攻克各种技术难题、研发各类软件产品,我的代码态度:代码虐我千百遍,我待代码如初恋,我的工作态度:极致,责任ÿ…...
C++otlv4连接sql serveer使用记录(注意点)
C使用otlv4在做插入时,有一些设计的坑需要注意 插入数据: 当要给表中插入单个字符时,数据库表设计使用varchar(1)是合理的,但是otlv4一直报错char。 后续查很久才知道,otlv4所写的绑定的字符数组的长度应该实际数组…...
[思考记录]认知和思考
在以前,具备一定的技能和经验就能轻易找到自己的一席之地。但在AI时代下,这些东西很容易就被抹平,那么我们的竞争力又在哪里?“认知和思考”是一个方向,帮助我们能去应对复杂情境、帮我们更容易去看到真相。 1.很多时…...
前端开发Web
Ajax 概念:Asynchronous JavaScriptAnd XML,异步的JavaScript和XML 作用: 数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的…...
【C++提高篇】—— C++泛型编程之模板基本语法和使用的详解
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、模板的概念二、函数模板2.1 函数模板的使用2.2 函数模板注意事项2.3 普通函数与函数模板的区别2.4 普通函数与函数模板的调用规则2.5 模板的局限性 三、类模…...
WPS计算机二级•高效操作技巧
听说这里是目录哦 斜线表头 展示项目名称🍋🟩横排转竖排🍐批量删除表格空白行🍈方法一方法二建辅助列找空值 能量站😚 斜线表头 展示项目名称🍋🟩 选中单元格,单击右键➡️“设…...
【Maui】视图界面与数据模型绑定
文章目录 前言一、问题描述二、解决方案三、软件开发(源码)3.1 创建模型3.2 视图界面3.3 控制器逻辑层 四、项目展示 前言 .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架,用于使用 C# 和 XAML 创建本机移动和桌面应用。 使用 .NET MAUI&…...
vue3-sfc-loader 加载远程.vue文件(sfc)案例
注意事项 style标签如果增加了lang比如:lang“scss”,需要提供scss-loader的处理器,这个暂时没研究,我的处理方式是将动态模版的css放在了全局打包暂时还没有测试,后面测试了会同步更新 安装vue3-sfc-loader npm inst…...
Hadoop美食推荐系统 爬虫1.8w+数据 协同过滤余弦函数推荐美食 Springboot Vue Element-UI前后端分离
Hadoop美食推荐系统 爬虫1.8w数据 协同过滤余弦函数推荐美食 Springboot Vue Element-UI前后端分离 【Hadoop项目】 1. data.csv上传到hadoop集群环境 2. data.csv数据清洗 3.MapReducer数据汇总处理, 将Reducer的结果数据保存到本地Mysql数据库中 4. SpringbootEchartsMySQL 显…...
使用Linux驱动程序的fasync(文件异步通知机制)向用户空间发送SIGIO信号的学习记录
前言 本文学习使用Linux驱动程序的fasync(文件异步通知机制)向用户空间发送SIGIO信号。 fasync(文件异步通知机制)名字的来历 fasync 是 “file asynchronous” 的缩写,意思是 文件异步通知。 这里的文件是指文件结构体struct file *file ,关于文件结…...
面试经验分享-回忆版某小公司
说说你项目中数据仓库是怎么分层的,为什么要分层? 首先是ODS层,连接数据源和数据仓库,数据会进行简单的ETL操作,数据来源通常是业务数据库,用户日志文件或者来自消息队列的数据等 中间是核心的数据仓库层&a…...
【算法学习笔记】35:扩展欧几里得算法求解线性同余方程
线性同余方程问题 线程同余方程问题是指 a x ≡ b ( m o d m ) ax \equiv b~(mod~m) ax≡b (mod m),给定 a a a、 b b b和 m m m,找到一个整数 x x x使得该方程成立,即使得 a x m o d m b ax~mod~mb ax mod mb,随便返回任何一个…...
ent.SetDatabaseDefaults()
在 AutoCAD 的 .NET API 中,ent.SetDatabaseDefaults() 这句代码通常用于将一个实体(Entity)对象的属性设置为与其所在的数据库(Database)的默认设置相匹配。这意味着,该实体将采用数据库级别的默认颜色、图…...
使用docker部署tomcat服务器和mysql数据库
使用docker部署tomcat服务器 1、拉去tomcat镜像 [rootlocalhost yum.repos.d]# sudo docker pull docker.io/tomcat:9 9: Pulling from library/tomcat de44b265507a: Pull complete 4c2afd91a87d: Pull complete 89e9bbcfa697: Pull complete 11be3e613582: Pull complet…...
Jenkins 启动
废话 这一阵子感觉空虚,心里空捞捞的,总想找点事情做,即使这是一件微小的事情,空余时间除了骑车、打球,偶尔朋友聚会 … 还能干什么呢? 当独自一人时,究竟可以做点什么,填补这空虚…...
Elasticsearch(ES)基础查询语法的使用
1. Match Query (全文检索查询) 用于执行全文检索,适合搜索文本字段。 { “query”: { “match”: { “field”: “value” } } } match_phrase:精确匹配短语,适合用于短语搜索。 { “query”: { “match_phrase”: { “field”: “text” }…...
SpringCloud系列教程:微服务的未来(十四)网关登录校验、自定义过滤器GlobalFilter、GatawayFilter
前言 在微服务架构中,API 网关扮演着至关重要的角色,负责路由请求、执行安全验证、流量控制等任务。Spring Cloud Gateway 作为一个强大的网关解决方案,提供了灵活的方式来实现这些功能。 本篇博客将重点介绍如何在 Spring Cloud Gateway 中…...
Android Studio:Linux环境下安装与配置
更多内容:XiaoJ的知识星球 Android Studio:Linux环境下安装与配置 1.安装JDK2.安装Android Studio2.1 获取安装包2.2 安装(1)配置环境变量:(2)运行安装:(3)配…...
使用AI生成金融时间序列数据:解决股市场的数据稀缺问题并提升信噪比
“GENERATIVE MODELS FOR FINANCIAL TIME SERIES DATA: ENHANCING SIGNAL-TO-NOISE RATIO AND ADDRESSING DATA SCARCITY IN A-SHARE MARKET” 论文地址:https://arxiv.org/pdf/2501.00063 摘要 金融领域面临的数据稀缺与低信噪比问题,限制了深度学习在…...
【银河麒麟高级服务器操作系统】业务访问慢网卡丢包现象分析及处理过程
了解更多银河麒麟操作系统全新产品,请点击访问 麒麟软件产品专区:product.kylinos.cn 开发者专区:developer.kylinos.cn 文档中心:document.kylinos.cn 交流论坛:forum.kylinos.cn 服务器环境以及配置 【内核版本…...
如何将数据库字符集改为中文,让今后所有的数据库都支持中文
最后一行有我自己的my.ini文件 数据库输入中文数据时会变为乱码, 这个时候,我们为每个数据库设置字符集,太过于麻烦,为数据库单独设置重启后又会消失 Set character_set_database’utf8’; Set character_set_server’utf8’; …...
Linux-C/C++--深入探究文件 I/O (下)(文件共享、原子操作与竞争冒险、系统调用、截断文件)
经过上一章内容的学习,了解了 Linux 下空洞文件的概念;open 函数的 O_APPEND 和 O_TRUNC 标志;多次打开同一文件;复制文件描述符;等内容 本章将会接着探究文件IO,讨论如下主题内容。 文件共享介绍&…...
Linux Bash 中使用重定向运算符的 5 种方法
注:机翻,未校。 Five ways to use redirect operators in Bash Posted: January 22, 2021 | by Damon Garn Redirect operators are a basic but essential part of working at the Bash command line. See how to safely redirect input and output t…...
opengrok_windows_环境搭建
目录 软件列表 软件安装 工程索引 编辑 工程部署 问题列表 软件列表 软件名下载地址用途JDKhttps://download.java.net/openjdk/jdk16/ri/openjdk-1636_windows-x64_bin.zipindex 使用java工具tomcathttps://dlcdn.apache.org/tomcat/tomcat-9/v9.0.98/bin/apache-tom…...
【无法下载github文件】虚拟机下ubuntu无法拉取github文件
修改hosts来进行解决。 步骤一:打开hosts文件 sudo vim /etc/hosts步骤二:查询 github.com的ip地址 https://sites.ipaddress.com/github.com/#ipinfo将github.com的ip地址添加到hosts文件末尾,如下所示。 140.82.114.3 github.com步骤三…...
python——句柄
一、概念 句柄指的是操作系统为了标识和访问对象而提供的一个标识符,在操作系统中,每个对象都有一个唯一的句柄,通过句柄可以访问对象的属性和方法。例如文件、进程、窗口等都有句柄。在编程中,可以通过句柄来操作这些对象&#x…...
.Net Core微服务入门系列(一)——项目搭建
系列文章目录 1、.Net Core微服务入门系列(一)——项目搭建 2、.Net Core微服务入门全纪录(二)——Consul-服务注册与发现(上) 3、.Net Core微服务入门全纪录(三)——Consul-服务注…...
Net Core微服务入门全纪录(三)——Consul-服务注册与发现(下)
系列文章目录 1、.Net Core微服务入门系列(一)——项目搭建 2、.Net Core微服务入门全纪录(二)——Consul-服务注册与发现(上) 3、.Net Core微服务入门全纪录(三)——Consul-服务注…...
[苍穹外卖] 1-项目介绍及环境搭建
项目介绍 定位:专门为餐饮企业(餐厅、饭店)定制的一款软件产品 功能架构: 管理端 - 外卖商家使用 用户端 - 点餐用户使用 技术栈: 开发环境的搭建 整体结构: 前端环境 前端工程基于 nginx 运行 - Ngi…...
【PCIe 总线及设备入门学习专栏 2 -- PCIe 的 LTSSM 和 Enumeration】
文章目录 OverviewLTSSM StatesDetect StatesDETECT_QUIETDETECT_ACTDETECT_WAITPolling StatesPOLL_ACTIVEPOLL_CONFIGPOLL_COMPLIANCEConfiguration StatesCONFIG_LINKWD_STARTCONFIG_LINKWD_ACCEPTCONFIG_LANENUM_WAITCONFIG_LANENUM_ACCEPTCONFIG_COMPLETECONFIG_IDLERecov…...
Redis 性能优化:多维度技术解析与实战策略
文章目录 1 基准性能2 使用 slowlog 优化耗时命令3 big key 优化4 使用 lazy free 特性5 缩短键值对的存储长度6 设置键值的过期时间7 禁用耗时长的查询命令8 使用 Pipeline 批量操作数据9 避免大量数据同时失效10 客户端使用优化11 限制 Redis 内存大小12 使用物理机而非虚拟机…...
QT开发技术 【基于TinyXml2的对类进行序列化和反序列化】一
一、对TinyXml2 进行封装 使用宏 实现序列化和反序列化 思路: 利用宏增加一个类函数,使用序列化器调用函数进行序列化 封装宏示例 #define XML_SERIALIZER_BEGIN(ClassName) \ public: \virtual void ToXml(XMLElement* parentElem, bool bSerialize …...
麦田物语学习笔记:创建TransitionManager控制人物场景切换
基本流程 制作场景之间的切换 1.代码思路 (1)为了实现不同场景切换,并且保持当前的persistentScene一直存在,则需要一个Manager去控制场景的加载和卸载,并且在加载每一个场景之后,都要将当前的场景Set Active Scene,保证其为激活的场景,在卸载的时候也可以方便调用当前激活的场…...
2025年最新汽车零部件企业销售项目管理解决方案
在汽车零部件企业,销售项目管理的不规范和销售预测的不准确性常导致生产计划无法及时调整,因此客户关系常常中断,导致企业业务机会的丧失。为解决该问题,企业需要投入更多资源以优化销售流程与销售预测。 1、360多维立体客户视图…...
创建基于Prism框架的WPF应用(NET Framework)项目
创建基于Prism框架的WPF应用(NET Framework)项目 1、创建WPF(NET Framework)项目并整理结构 (1)、创建WPF(NET Framework)项目; (2)、添加Views和…...
AIGC视频生成模型:Meta的Emu Video模型
大家好,这里是好评笔记,公主号:Goodnote,专栏文章私信限时Free。本文详细介绍Meta的视频生成模型Emu Video,作为Meta发布的第二款视频生成模型,在视频生成领域发挥关键作用。 🌺优质专栏回顾&am…...
【PowerQuery专栏】PowerQuery提取XML数据
XML数据和Json 数据类型都是比较典型的层次数据类型,XML的数据格式非常的对称。所有的数据均是由标签对组成,图为典型的XML文件类型的数据。 在PowerQuery中进行XML数据类型解析采用的是Xml.Document 函数来进行文件内容的解析,Xml.Document 目前有三个可用参数。 参数1为数…...
流行的开源高性能数据同步工具 - Apache SeaTunnel 整体架构运行原理
概述 背景 数据集成在现代企业的数据治理和决策支持中扮演着至关重要的角色。随着数据源的多样化和数据量的迅速增长,企业需要具备强大的数据集成能力来高效地处理和分析数据。SeaTunnel通过其高度可扩展和灵活的架构,帮助企业快速实现多源数据的采集、…...
基于单片机的多功能蓝牙语音智能台灯(论文+源码)
1总体方案设计 通过需求分析,本设计多功能蓝牙语音智能台灯的系统框图如图2.1所示,系统架构包括主控制器STM32F103单片机、HC-06蓝牙通信模块、LU-ASR01语音识别模块、OLED液晶、LED灯、按键等器件,在使用时用户可以通过手机APP、语音识别、…...
leetcode刷题记录(七十二)——146. LRU 缓存
(一)问题描述 146. LRU 缓存 - 力扣(LeetCode)146. LRU 缓存 - 请你设计并实现一个满足 LRU (最近最少使用) 缓存 [https://baike.baidu.com/item/LRU] 约束的数据结构。实现 LRUCache 类: * LRUCache(int capacity)…...
力扣203题(3)
题目及之前的两种解法大家可以移步到这里: https://blog.csdn.net/suibiansa_/article/details/145242573?spm1001.2014.3001.5501 力扣203题—— 移除链表元素-CSDN博客 今天呢我们来写一下第三种解法: 虚拟创建一个头结点 ListNode firstnew Lis…...
网络安全:信息时代的守护者
随着互联网的快速发展,网络安全问题日益成为全球关注的焦点。无论是个人用户、企业组织还是政府部门,网络安全都已成为保障信息安全、保护隐私、确保社会秩序的基石。在这个数字化时代,如何应对复杂多变的网络安全威胁,成为了我们…...
【博客之星2024年度总评选】年度回望:我的博客之路与星光熠熠
【个人主页】Francek Chen 【人生格言】征途漫漫,惟有奋斗! 【热门专栏】大数据技术基础 | 数据仓库与数据挖掘 | Python机器学习 文章目录 前言一、个人成长与盘点(一)机缘与开端(二)收获与分享 二、年度创…...
接口自动化测试
APITEST: 接口自动化测试 目录结构介绍: conf目录:用来存放项目运行环境、执行环境相关的配置参数 testsuite目录:测试用例在此目录编写,pytest默认约定test开头的文件和方法为测试用例,不满足条件的不会被执行&#x…...
题海拾贝:力扣 138.随机链表的复制
Hello大家好!很高兴我们又见面啦!给生活添点passion,开始今天的编程之路! 我的博客:<但凡. 我的专栏:《编程之路》、《数据结构与算法之美》、《题海拾贝》 欢迎点赞,关注! 1、题…...
第7章:Python TDD测试Franc对象乘法功能
写在前面 这本书是我们老板推荐过的,我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后,我突然思考,对于测试开发工程师来说,什么才更有价值呢?如何让 AI 工具更好地辅助自己写代码,或许…...
PyTorch基本功能与实现代码
PyTorch是一个开源的深度学习框架,提供了丰富的函数和工具,以下为其主要功能的归纳: 核心数据结构: • 张量(Tensor):类似于Numpy的ndarray,是PyTorch中基本的数据结构,…...