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…...
flutter的web页面
有几个服务器 有几个后台 直接通过web端进去虽然说很方便，但… 于是把web页面镶嵌到应用里面去， 这样就换了个方式打开web页面了 比如这里有有个列表 这里是写死了，活的列表可以通过io去获取 import package:flutter/material.dart; imp…...
2025.1.17——三、SQLi regexp正则表达式|
题目来源：buuctf [NCTF2019]SQLi1 目录 一、打开靶机，整理信息 二、解题思路 step 1：正常注入 step 2：弄清关键字黑名单 1.目录扫描 2.bp爆破 step 3：根据过滤名单构造payload step 4：regexp正则注…...
虚幻基础2：gameplay框架
能帮到你的话，就给个赞吧 😘 文章目录 ue框架：gameplay组成game modeactorcomponent player controllergame state 工作流程 ue框架：gameplay 组成 game mode 游戏类型和规则。可以控制游戏的开始与结束以及一些其他功能。 ac…...
使用 Go 语言生成样式美观的 PDF 文件
文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons：JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram，自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 ？ 5 IDEA必装的插件&…...
鸿蒙-点击Notification通知并打开App的具体页面
意图通知 获取router事件中传递参数并跳转 目前点击通知消息打开应用的指定页面，通过为通知添加行为意图的方式。也就是在wants的parameters中设置自定义参数，然后在UIAbility的onNewWant或者onCreate方法中 解析配置的自定义参数信息判断跳转不同页面&a…...
非科班转码第5年零241天
文章目录 非科班转码第5年零241天第一份工作鸭梨山大同事的帮助第二份工作新公司学到很多出海计划 非科班转码第5年零241天 第一份工作 2019年5月24日，我从机械工程转码后找到第一份工作——图像算法工程师，能得到这份工作纯属偶然，当时公司…...
数据库：MongoDB命令行帮助解释
MongoDB命令： mongodmongosmongoperrormongoexportmongofilesmongoimportmongorestoreMongostat MongoDB包中的核心组件包括: mongod 是 MongoDB 的核心服务器进程，负责数据存储和管理。mongos 是分片集群的路由进程，负责将请求路由到正确…...
MongoDB单机版安装
MongoDB单机版安装 在CentOS Linux release 7.9.2009 (Core)下安装MongoDB的步骤如下： 1 创建用户和组（可选，根据需要） 如果您希望以非root用户运行MongoDB服务，可以创建一个专用的用户和组。 groupadd mongodb us…...
Azure面试
文章目录 项目地址一、Azure Storage1. What are the benefits of Azure Storage？ 二、汇总 项目地址 教程作者：教程地址： 代码仓库地址： 所用到的框架和插件： dbt airflow一、Azure Storage 1. What are the bene…...
在.NET用C#将Word文档转换为HTML格式
将Word文档转换为HTML格式尤其具有显著的优势，它不仅能够确保文档内容在多种设备和平台上保持一致灵活的显示，还便于通过网络进行传播和集成到各种Web应用中。随着越来越多的企业和开发者寻求更灵活、更具兼容性的文件处理方式，.NET框架下的C…...
macOS 安装JDK17
文章目录 前言介绍新特性下载安装1.下载完成后打开downloads 双击进行安装2.配置环境变量3.测试快速切换JDK 小结 前言 近期找开源软件，发现很多都已经使用JDK17springboot3 了，之前的JDK8已经被替换下场，所以今天就在本机安装了JDK17&#…...
Django SimpleUI 自定义功能实战
1. 引言 Django SimpleUI 是一个基于 Django 的后台管理界面美化工具，旨在帮助开发者快速构建现代化的后台管理系统。除了默认的功能外，SimpleUI 还支持高度自定义，开发者可以根据需求添加各种实用功能。本文将详细介绍如何在 Django SimpleUI 中实现自定义功能，包括数据同…...
C语言/C++自然序列重排列——相邻序号不相邻问题⭐
同类题目：C语言自然序列重排——相邻元素的差值集合恰好有 k 个不同的值。⭐⭐-CSDN博客 题目描述（难度⭐） 一场针对 n 学生的考试将在一个又长又窄的房间里举行，因此学生们将按某种顺序排成一行。老师怀疑相邻编号的学生…...
Spring boot面试题---- Spring boot项目运行原理
1.启动流程概述 Spring Boot 的启动是从一个带有main方法的主类开始的。这个主类通常会有一个@SpringBootApplication注解。这个注解是一个组合注解，它包含了@Configuration、@EnableAutoConfiguration和@ComponentScan。@Configuration注解表明这个类是一个配置类，它可以定义…...
Qt/C++ 基于 QGraphicsView 的绘图软件 （附源码下载链接）
基于 Qt 的 QGraphicsView 绘图软件项目进行深入讲解，分析其核心代码与功能实现，帮助开发者理解 QGraphicsView 的用法。 项目概览 该项目实现了一个简单的绘图应用，用户可以在界面中创建和编辑矩形、椭圆、直线、多边形和文本等图形对象。功…...
如何使用 useMemo 和 memo 优化 React 应用性能？
使用 useMemo 和 memo 优化 React 应用性能 在构建复杂的 React 应用时，性能优化是确保应用流畅运行的关键。React 提供了多种工具来帮助开发者优化组件的渲染和计算逻辑，其中 useMemo 和 memo 是两个非常有用的 Hook。本文将详细介绍这两个工具的使用方…...
数据结构(链表 哈希表)
在Python中，链表和哈希表都是常见的数据结构，可以用来存储和处理数据。 链表是一种线性数据结构，由一系列节点组成，每个节点包含一个数据元素和一个指向下一个节点的指针。链表可以用来实现栈、队列以及其他数据结构。Python中可…...
人工智能之深度学习_[4]-神经网络入门
神经网络基础 1 神经网络 深度学习神经网络就是大脑仿生，数据从输入到输出经过一层一层的神经元产生预测值的过程就是前向传播（也叫正向传播）。 前向传播涉及到人工神经元是如何工作的（也就是神经元的初始化、激活函数…...
STM32之CubeMX图形化工具开发介绍（十七）
STM32F407 系列文章 - STM32CubeMX（十七） 目录 前言 一、CubeMX 二、下载安装 1.下载 2.安装 3.图解步骤 三、用户界面 1.项目配置 2.项目生成 3.项目文件解释 4.新建工程 5.查看原工程 四、FAQ 总结 前言 STMCube源自意法半导体…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...
19c补丁后oracle属主变化，导致不能识别磁盘组
补丁后服务器重启，数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后，存在与用户组权限相关的问题。具体表现为，Oracle 实例的运行用户（oracle）和集…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中，我们已经大致实现了rpc服务端的各项功能代…...
【杂谈】-递归进化：人工智能的自我改进与监管挑战
递归进化：人工智能的自我改进与监管挑战 文章目录 递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘
美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...
docker详细操作--未完待续
docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时，你可能需要保留重要的数据，例如通讯录。好在，将通讯录从 iPhone 转移到 Android 手机非常简单，你可以从本文中学习 6 种可靠的方法，确保随时保持连接，不错过任何信息。 第 1…...