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

ThreeJS能力演示——界面点选交互能力

news 文章来源：https://blog.csdn.net/u010595191/article/details/145211048 2025/2/6 23:37:35

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、支持界面点选 点选模型整体思路是&#xff1a;根据camera位置作为起始点&#xff0c;叠加鼠标相对位置作为偏置&#xff0c;摄像头方向作为射线方向。 根据射线方向中的遇到的3D物体列表&#xff0c;第一个遇到的物体作为被点选的物体。 // 鼠标事件处理let selectedObjec…...

编程日记 2025/1/19 8:15:24

flutter的web页面

有几个服务器 有几个后台 直接通过web端进去虽然说很方便&#xff0c;但… 于是把web页面镶嵌到应用里面去&#xff0c; 这样就换了个方式打开web页面了 比如这里有有个列表 这里是写死了&#xff0c;活的列表可以通过io去获取 import package:flutter/material.dart; imp…...

编程日记 2025/1/19 8:13:17

2025.1.17——三、SQLi regexp正则表达式|

题目来源&#xff1a;buuctf [NCTF2019]SQLi1 目录 一、打开靶机&#xff0c;整理信息 二、解题思路 step 1&#xff1a;正常注入 step 2&#xff1a;弄清关键字黑名单 1.目录扫描 2.bp爆破 step 3&#xff1a;根据过滤名单构造payload step 4&#xff1a;regexp正则注…...

编程日记 2025/1/19 8:10:08

虚幻基础2：gameplay框架

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 ue框架&#xff1a;gameplay组成game modeactorcomponent player controllergame state 工作流程 ue框架&#xff1a;gameplay 组成 game mode 游戏类型和规则。可以控制游戏的开始与结束以及一些其他功能。 ac…...

编程日记 2025/1/19 8:09:05

使用 Go 语言生成样式美观的 PDF 文件

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…...

编程日记 2025/1/19 8:07:59

鸿蒙-点击Notification通知并打开App的具体页面

意图通知 获取router事件中传递参数并跳转 目前点击通知消息打开应用的指定页面&#xff0c;通过为通知添加行为意图的方式。也就是在wants的parameters中设置自定义参数&#xff0c;然后在UIAbility的onNewWant或者onCreate方法中 解析配置的自定义参数信息判断跳转不同页面&a…...

编程日记 2025/1/19 8:02:51

非科班转码第5年零241天

文章目录 非科班转码第5年零241天第一份工作鸭梨山大同事的帮助第二份工作新公司学到很多出海计划 非科班转码第5年零241天 第一份工作 2019年5月24日&#xff0c;我从机械工程转码后找到第一份工作——图像算法工程师&#xff0c;能得到这份工作纯属偶然&#xff0c;当时公司…...

编程日记 2025/1/19 7:56:45

数据库：MongoDB命令行帮助解释

MongoDB命令&#xff1a; mongodmongosmongoperrormongoexportmongofilesmongoimportmongorestoreMongostat MongoDB包中的核心组件包括: mongod 是 MongoDB 的核心服务器进程&#xff0c;负责数据存储和管理。mongos 是分片集群的路由进程&#xff0c;负责将请求路由到正确…...

编程日记 2025/1/19 7:55:44

MongoDB单机版安装

MongoDB单机版安装 在CentOS Linux release 7.9.2009 (Core)下安装MongoDB的步骤如下&#xff1a; 1 创建用户和组&#xff08;可选&#xff0c;根据需要&#xff09; 如果您希望以非root用户运行MongoDB服务&#xff0c;可以创建一个专用的用户和组。 groupadd mongodb us…...

编程日记 2025/1/19 7:52:34

Azure面试

文章目录 项目地址一、Azure Storage1. What are the benefits of Azure Storage&#xff1f; 二、汇总 项目地址 教程作者&#xff1a;教程地址&#xff1a; 代码仓库地址&#xff1a; 所用到的框架和插件&#xff1a; dbt airflow一、Azure Storage 1. What are the bene…...

编程日记 2025/1/19 7:51:32

在.NET用C#将Word文档转换为HTML格式

将Word文档转换为HTML格式尤其具有显著的优势&#xff0c;它不仅能够确保文档内容在多种设备和平台上保持一致灵活的显示&#xff0c;还便于通过网络进行传播和集成到各种Web应用中。随着越来越多的企业和开发者寻求更灵活、更具兼容性的文件处理方式&#xff0c;.NET框架下的C…...

编程日记 2025/1/19 7:45:24

macOS 安装JDK17

文章目录 前言介绍新特性下载安装1.下载完成后打开downloads 双击进行安装2.配置环境变量3.测试快速切换JDK 小结 前言 近期找开源软件&#xff0c;发现很多都已经使用JDK17springboot3 了&#xff0c;之前的JDK8已经被替换下场&#xff0c;所以今天就在本机安装了JDK17&#…...

编程日记 2025/1/19 7:43:21

Django SimpleUI 自定义功能实战

1. 引言 Django SimpleUI 是一个基于 Django 的后台管理界面美化工具，旨在帮助开发者快速构建现代化的后台管理系统。除了默认的功能外，SimpleUI 还支持高度自定义，开发者可以根据需求添加各种实用功能。本文将详细介绍如何在 Django SimpleUI 中实现自定义功能，包括数据同…...

编程日记 2025/1/19 7:42:19

C语言/C++自然序列重排列——相邻序号不相邻问题⭐

同类题目&#xff1a;C语言自然序列重排——相邻元素的差值集合恰好有 k 个不同的值。⭐⭐-CSDN博客 题目描述&#xff08;难度⭐&#xff09; 一场针对 n 学生的考试将在一个又长又窄的房间里举行&#xff0c;因此学生们将按某种顺序排成一行。老师怀疑相邻编号的学生&#xf…...

编程日记 2025/1/19 7:41:16

Spring boot面试题---- Spring boot项目运行原理

1.启动流程概述 Spring Boot 的启动是从一个带有main方法的主类开始的。这个主类通常会有一个@SpringBootApplication注解。这个注解是一个组合注解，它包含了@Configuration、@EnableAutoConfiguration和@ComponentScan。@Configuration注解表明这个类是一个配置类，它可以定义…...

编程日记 2025/1/19 7:40:14

Qt/C++ 基于 QGraphicsView 的绘图软件 （附源码下载链接）

基于 Qt 的 QGraphicsView 绘图软件项目进行深入讲解&#xff0c;分析其核心代码与功能实现&#xff0c;帮助开发者理解 QGraphicsView 的用法。 项目概览 该项目实现了一个简单的绘图应用&#xff0c;用户可以在界面中创建和编辑矩形、椭圆、直线、多边形和文本等图形对象。功…...

编程日记 2025/1/19 7:39:13

如何使用 useMemo 和 memo 优化 React 应用性能？

使用 useMemo 和 memo 优化 React 应用性能 在构建复杂的 React 应用时&#xff0c;性能优化是确保应用流畅运行的关键。React 提供了多种工具来帮助开发者优化组件的渲染和计算逻辑&#xff0c;其中 useMemo 和 memo 是两个非常有用的 Hook。本文将详细介绍这两个工具的使用方…...

编程日记 2025/1/19 7:35:05

数据结构(链表 哈希表)

在Python中&#xff0c;链表和哈希表都是常见的数据结构&#xff0c;可以用来存储和处理数据。 链表是一种线性数据结构&#xff0c;由一系列节点组成&#xff0c;每个节点包含一个数据元素和一个指向下一个节点的指针。链表可以用来实现栈、队列以及其他数据结构。Python中可…...

编程日记 2025/1/19 7:34:02

人工智能之深度学习_[4]-神经网络入门

神经网络基础 1 神经网络 深度学习神经网络就是大脑仿生&#xff0c;数据从输入到输出经过一层一层的神经元产生预测值的过程就是前向传播&#xff08;也叫正向传播&#xff09;。 前向传播涉及到人工神经元是如何工作的&#xff08;也就是神经元的初始化、激活函数&#xf…...

编程日记 2025/1/19 7:33:01

STM32之CubeMX图形化工具开发介绍（十七）

STM32F407 系列文章 - STM32CubeMX&#xff08;十七&#xff09; 目录 前言 一、CubeMX 二、下载安装 1.下载 2.安装 3.图解步骤 三、用户界面 1.项目配置 2.项目生成 3.项目文件解释 4.新建工程 5.查看原工程 四、FAQ 总结 前言 STMCube源自意法半导体&#xf…...

编程日记 2025/1/19 7:31:56

css3过渡总结

一、过渡的定义与作用 CSS3 过渡&#xff08;Transitions&#xff09;允许 CSS 属性在一定的时间区间内平滑地过渡&#xff0c;从一个值转变为另一个值。它能够让网页元素的状态变化更加自然、流畅&#xff0c;给用户带来更好的视觉体验。例如&#xff0c;当一个元素从隐藏状态…...

编程日记 2025/1/19 7:30:54

latin1_swedish_ci（latin1 不支持存储中文、日文、韩文等多字节字符）

文章目录 1、SHOW TABLE STATUS WHERE Name batch_version;2、latin1_swedish_ci使用场景注意事项修改字符集和排序规则修改表的字符集和排序规则修改列的字符集和排序规则修改数据库的默认字符集和排序规则 3、ALTER TABLE batch_version CONVERT TO CHARACTER SET utf8mb4 C…...

编程日记 2025/1/19 7:26:46

C语言编程笔记：文件处理的艺术

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 本文目录 引言正文一、为什么要用文件二、文件的分…...

编程日记 2025/1/19 7:25:46

[创业之路-255]：《华为数字化转型之道》-1-主要章节、核心内容、核心思想

目录 前言&#xff1a;数字化转型对于企业而言&#xff0c;是一种全方位的变革 一、主要章节 1、认知篇&#xff08;第1~2章&#xff09;- Why 2、方法篇&#xff08;第3~5章&#xff09;- How 3、实践篇&#xff08;第6~10章&#xff09;- 实践 4、平台篇&#xff08;第…...

编程日记 2025/1/19 7:24:45

《汽车维修技师》是什么级别的期刊？是正规期刊吗？能评职称吗？

​问题解答&#xff1a; 问&#xff1a;《汽车维修技师》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的正规学术期刊。 问&#xff1a;《汽车维修技师》级别&#xff1f; 答&#xff1a;省级。主管单位&#xff1a;北方联合出版传媒&#xff08;…...

编程日记 2025/1/19 7:22:43

2024 京东零售技术年度总结

每一次回望&#xff0c;都为了更好地前行。 2024 年&#xff0c;京东零售技术在全面助力业务发展的同时&#xff0c;在大模型应用、智能供应链、端技术、XR 体验等多个方向深入探索。京东 APP 完成阶段性重要改版&#xff0c;打造“又好又便宜”的优质体验&#xff1b;国补专区…...

编程日记 2025/1/19 7:21:42

PyTorch使用教程(8)-一文了解torchvision

一、什么是torchvision torchvision提供了丰富的功能&#xff0c;主要包括数据集、模型、转换工具和实用方法四大模块。数据集模块内置了多种广泛使用的图像和视频数据集&#xff0c;如ImageNet、CIFAR-10、MNIST等&#xff0c;方便开发者进行训练和评估。模型模块封装了大量经…...

编程日记 2025/1/19 7:07:30

如何在不暴露MinIO地址的情况下，用Spring Boot与KKFileView实现文件预览

在现代Web应用中&#xff0c;文件预览是一项常见且重要的功能。它允许用户在不上传或下载文件的情况下&#xff0c;直接在浏览器中查看文件内容。然而&#xff0c;直接将文件存储服务&#xff08;如MinIO&#xff09;暴露给前端可能会带来安全风险。本文将介绍如何在不暴露MinI…...

编程日记 2025/1/19 7:03:26

ICMP协议和ICMP重定向攻击

✍作者&#xff1a;柒烨带你飞 &#x1f4aa;格言&#xff1a;生活的情况越艰难&#xff0c;我越感到自己更坚强&#xff1b;我这个人走得很慢&#xff0c;但我从不后退。 &#x1f4dc;系列专栏&#xff1a;网络安全从菜鸟到飞鸟的逆袭 目录 一&#xff0c;ICMP基本概念二&…...

编程日记 2025/1/19 6:57:21

leetcode203-移除链表元素

leetcode203 什么是链表 之前不懂链表的数据结构&#xff0c;一看到链表的题目就看不明白 链表是通过next指针来将每个节点连接起来的&#xff0c;题目中给的链表是单向链表&#xff0c;有两个值&#xff0c;一个val表示值&#xff0c;一个next&#xff1a;表示连接的下一个…...

编程日记 2025/1/19 6:56:19

做飞象金服的网站/湖南seo优化

我有一个溢出&#xff1a;跨越400&#xff05;文档窗口宽度的自动容器。因此&#xff0c;我的页面上有一个水平滚动条。我在这个容器中也有多个div&#xff0c;它们有不同的左边位置。当我点击它们时&#xff0c;我需要获得每个容器的左侧位置。我使用$(this).offset()。left&a…...

编程日记 2025/2/6 22:26:51

手机网站制作得多少钱啊/寄生虫seo教程

以下测试例子以SQL 2008备份&#xff0c;在SQL2014还原,造成索引被禁用. --备份环境&#xff08;SQL Server 2008 R2&#xff09; /* MicrosoftSQL Server 2008 R2 (RTM) - 10.50.1600.1 (X64) Apr 2 2010 15:48:46 Copyright (c) Microsoft Corporation Data Center Edition…...

编程日记 2025/2/6 21:15:05

做网站为什么要投资钱/重大新闻事件

所谓spring对hibernate的集成&#xff0c;其实它就做了两方面的工作&#xff1a;1.提供了可以在配置文件中进行配置的完成了对数据源和SessionFactory信息进行封装的bean类。比如&#xff1a;对数据源进行封装的类BasicDataSource&#xff0c;对SessionFactory进行封装的类Loca…...

编程日记 2025/2/6 19:38:05

镇江专业网站建设/app拉新接单平台

资源下载&#xff1a;https://download.csdn.net/download/weixin_44893902/33163160 一、语言和环境 实现语言&#xff1a;JAVA语言环境要求&#xff1a;IDEA/Eclipse Tomcat MySql使用技术&#xff1a;Spring Boot 或 SSM 二、实现功能 随着公司业务的发展&#xff0c;需…...

编程日记 2025/2/6 17:32:39

微信上做网站/免费产品推广网站

&#xff11;&#xff0e;程序结构采用主程序和中断服务子程序结构&#xff12;&#xff0e;定时中断程序&#xff0c;并行口输出&#xff0c;控制彩灯移动定时器0于方式1&#xff0c;16位&#xff0c;10ms中断一次40H10ms计数单元41H初值为01101101B位地址00H1定时方式1为10MS…...

编程日记 2025/2/6 16:23:55

沈阳网站建设费用/制作网页教程

SLIC与目前最优超像素算法的比较 Radhakrishna Achanta, Appu Shaji, Kevin Smith, Aurelien Lucchi, Pascal Fua, and Sabine Susstrunk 摘要 近年来&#xff0c;计算机视觉应用越来越依赖超像素&#xff0c;但并不总是清楚什么是良好的超像素算法。为了解现有方法的优点和…...

编程日记 2025/2/6 16:19:53