实现人体模型可点击
简化需求:实现项目内嵌人体模型,实现点击不同部位弹出部位名称
一:优先3d,
方案:基于three.js,.gltf格式模型,vue3
缺点:合适且免费的3d模型找不到,因为项目对部位有要求。
注意:模型地址请使用绝对路径。
效果图:

代码:
<template><div ref="canvasContainer" class="canvas-container"></div>
</template><script setup>
import * as THREE from 'three'
import { onMounted, ref } from 'vue'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'const canvasContainer = ref(null)onMounted(() => {let scene, camera, renderer, modellet raycaster = new THREE.Raycaster()let mouse = new THREE.Vector2()let selectedPart = nulllet isDragging = falselet previousMousePosition = { x: 0, y: 0 }const init = () => {// 创建场景scene = new THREE.Scene()scene.background = new THREE.Color(0xeeeeee)// 创建相机camera = new THREE.PerspectiveCamera(45, 500 / 500, 0.1, 1000)camera.position.set(0, 1.6, 3) // 相机位置// 创建渲染器,并设置大小为500px × 500pxrenderer = new THREE.WebGLRenderer({ antialias: true })renderer.setSize(500, 500)canvasContainer.value.appendChild(renderer.domElement)// 添加光源const light = new THREE.DirectionalLight(0xffffff, 1)light.position.set(5, 10, 7.5)scene.add(light)// 加载3D模型const loader = new GLTFLoader()loader.load('src/assets/models/b1_battle_droid/scene.gltf', (gltf) => {model = gltf.scenescene.add(model)})// 鼠标事件监听window.addEventListener('mousemove', onMouseMove)window.addEventListener('click', onClick)window.addEventListener('mousedown', onMouseDown)window.addEventListener('mouseup', onMouseUp)window.addEventListener('mousemove', onMouseMoveRotation)}const onMouseMove = (event) => {// 将鼠标位置标准化为Three.js坐标const rect = renderer.domElement.getBoundingClientRect()mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1raycaster.setFromCamera(mouse, camera)const intersects = raycaster.intersectObjects(scene.children, true)if (intersects.length > 0) {if (selectedPart) {// 恢复之前选中的部件颜色selectedPart.material.emissive.setHex(selectedPart.currentHex)}selectedPart = intersects[0].objectselectedPart.currentHex = selectedPart.material.emissive.getHex()selectedPart.material.emissive.setHex(0xff0000) // 悬浮变色} else if (selectedPart) {// 鼠标离开时恢复颜色selectedPart.material.emissive.setHex(selectedPart.currentHex)selectedPart = null}}const onClick = (event) => {if (selectedPart) {alert(`你点击了: ${selectedPart.name}`)}}const onMouseDown = () => {isDragging = true}const onMouseUp = () => {isDragging = false}const onMouseMoveRotation = (event) => {if (isDragging) {const deltaMove = {x: event.clientX - previousMousePosition.x,y: event.clientY - previousMousePosition.y,}const rotationSpeed = 0.005model.rotation.y += deltaMove.x * rotationSpeedmodel.rotation.x += deltaMove.y * rotationSpeed}previousMousePosition = {x: event.clientX,y: event.clientY,}}const animate = () => {requestAnimationFrame(animate)renderer.render(scene, camera)}init()animate()
})
</script><style>
.canvas-container {width: 500px;height: 500px;overflow: hidden;margin: 0 auto;/* 居中对齐 */
}
</style>
方案二:差强人意选2d
方案:基于canvas,.png格式图片,vue3
缺点:效果差一些,旋转没有了,身体部位区分做不到很细致。
注意:图片地址import引入,再引用。
效果图:

代码:
<template><div><canvas ref="canvas" @click="handleClick"></canvas></div>
</template><script setup>
import { onMounted, ref } from 'vue'
import imgsrc from '@/assets/models/person.png'
const canvas = ref(null)
const bodyParts = [{ name: 'Head', x: 50, y: 30, width: 100, height: 100 },{ name: 'Chest', x: 50, y: 150, width: 100, height: 100 },{ name: 'Abdomen', x: 50, y: 270, width: 100, height: 100 },{ name: 'Legs', x: 50, y: 390, width: 100, height: 100 },
]onMounted(() => {handleImage()
})
const handleImage = () => {const ctx = canvas.value.getContext('2d')canvas.value.width = 200 // 设置 canvas 的宽度canvas.value.height = 500 // 设置 canvas 的高度const img = new Image()img.src = imgsrc // 使用 Vue 项目中的图片路径img.onload = function () {// 确保图片加载完成后绘制到 canvas 上ctx.clearRect(0, 0, canvas.value.width, canvas.value.height) // 清空 canvasctx.drawImage(img, 0, 0, canvas.value.width, canvas.value.height) // 绘制图片// 调试用:绘制点击区域的边框bodyParts.forEach((part) => {ctx.strokeStyle = 'red' // 用红色边框标记部位ctx.strokeRect(part.x, part.y, part.width, part.height)})}console.log('path is ' + img.src)
}
const handleClick = (event) => {const rect = canvas.value.getBoundingClientRect()const x = event.clientX - rect.leftconst y = event.clientY - rect.topconst clickedPart = bodyParts.find((part) => {return (x >= part.x &&x <= part.x + part.width &&y >= part.y &&y <= part.y + part.height)})if (clickedPart) {alert(`You clicked on: ${clickedPart.name}`)}
}
</script><style scoped>
canvas {border: 1px solid black;
}
</style>
三:蹲蹲更好的解决方法。
相关文章:
实现人体模型可点击
简化需求:实现项目内嵌人体模型,实现点击不同部位弹出部位名称 一:优先3d, 方案:基于three.js,.gltf格式模型,vue3 缺点:合适且免费的3d模型找不到,因为项目对部位有要…...
C++ | Leetcode C++题解之第429题N叉树的层序遍历
题目: 题解: class Solution { public:vector<vector<int>> levelOrder(Node* root) {if (!root) {return {};}vector<vector<int>> ans;queue<Node*> q;q.push(root);while (!q.empty()) {int cnt q.size();vector<…...
Pandas简介
Pandas 是一个流行的开源数据分析库,它是基于 NumPy 构建的,为 Python 编程语言提供了高性能、易用的数据结构和数据分析工具。Pandas 主要用于数据清洗、数据转换、数据分析等任务,使得数据处理工作变得更加高效和便捷。 Pandas 的两个主要…...
Python | Leetcode Python题解之第430题扁平化多级双向链表
题目: 题解: class Solution:def flatten(self, head: "Node") -> "Node":def dfs(node: "Node") -> "Node":cur node# 记录链表的最后一个节点last Nonewhile cur:nxt cur.next# 如果有子节点&#…...
机器人机构、制造
简单整理一下,在学习了一些运动学和动力学之类的东西,简单的整合了一些常用的机械结构和图片。 1.电机: 市面上的电机有:直流电机,交流电机,舵机,步进电机,电缸,无刷电…...
《拿下奇怪的前端报错》:nvm不可用报错`GLIBC_2.27‘‘GLIBCXX_3.4.20‘not Found?+ 使用docker构建多个前端项目实践
有些前端的小伙伴可能会好奇,nvm是什么?这里接简单介绍下,它是一个Nodejs版本管理工具。为什么需要它呢?当然是需要多个Nodejs版本的时候,那什么时候需要多个Nodejs版本?那肯定是在有点年头的公司了&#x…...
5.《DevOps》系列K8S部署CICD流水线之K8S通过Yaml部署GitLab
架构 服务器IP服务名称硬件配置192.168.1.100k8s-master8核、16G、120G192.168.1.101k8s-node18核、16G、120G192.168.1.102k8s-node28核、16G、120G192.168.1.103nfs2核、4G、500G操作系统:Rocky9.3 后续通过K8S部署Jenkins NFS的SC创建参考:2.《DevOps》系列K8S部署CICD流…...
[SAP ABAP] 创建数据库视图和维护视图
数据准备 学校表(ZDBT_SCH_437) 学生表(ZDBT_STU_437) 学校表(ZDBT_SCH_437)与学生表(ZDBT_STU_437)字段 学校表(ZDBT_SCH_437)与学生表(ZDBT_STU_437)行数据明细 1.创建数据库视图 使用SE11创建数据库视图 填写视图名称ZV_DATABASEV_437,点击创建按钮 选择数据库视…...
【最快最简单的排序 —— 桶排序算法】
最快最简单的排序 —— 桶排序算法 桶排序是一种排序算法,其工作原理是将数据分到有限数量的桶子里,然后对每个桶内的元素进行单独排序,最后依次把各个桶中的记录列出来。桶排序的效率取决于映射函数的选择和桶的数量。 桶排序适用于数据分…...
AI时代,服务器厂商能否打破薄利的命运?
文|刘俊宏 编|王一粟 AI大模型正在引发新一轮的“算力焦渴”。 近日,OpenAI刚发布的o1大模型再次刷新了大模型能力的上限。对比上一次迭代的版本,o1的推理能力全方位“吊打”了GPT-4o。更优秀的能力,来自与o1将思维…...
2024年9月python二级易错题和难题大全(附详细解析)(二)
2024年9月python二级易错题和难题大全(附详细解析)(二) 第1题第2题第3题第4题第5题第6题第7题第8题第9题第10题第11题第12题第13题第14题第15题第16题第17题第18题第19题第20题第1题 1、以下代码的输出结果是() x = 12 + 3 * ((5 * 8) - 14) // 6 print(x) A、25.0 B、6…...
4.结构型设计模式 - 第1回:引言与适配器模式 (Adapter Pattern) ——设计模式入门系列
一、引言 在现代软件开发中,设计模式是帮助我们解决复杂问题的工具,它们提供了在常见场景下重用已验证解决方案的途径。而结构型设计模式主要关注类与对象之间的组合方式,旨在通过增强灵活性和降低耦合度来改进代码的结构。 本次讨论的是结…...
解决mybatis plus 中 FastjsonTypeHandler无法正确反序列化List类型的问题
由于是根据自动映射类型,我们设置的字段类型是List 也就是反序列化的时候也只是用 FastjsonTypeHandler中的 Override protected Object parse(String json) { return JSON.parseObject(json, type); } 反序列化方法,这是type为List 反序列后我们并没…...
MacOS安装homebrew,jEnv,多版本JDK
1 安装homebrew homebrew官网 根据官网提示,运行安装命令 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"安装后,bash会提示执行两条命令 (echo; echo eval "$(/opt/homebrew/b…...
【HTTP】认识 URL 和 URL encode
文章目录 认识 URLURL 基本格式**带层次的文件路径****查询字符串****片段标识符** URL encode 认识 URL 计算机中非常重要的概念,并不仅仅是在 HTTP 中使用。用来描述一个网络资源所处的位置,全称“唯一资源定位符” URI 是“唯一资源标识符“严格的说…...
【AI学习笔记】初学机器学习西瓜书概要记录(二)常用的机器学习方法篇
初学机器学习西瓜书的概要记录(一)机器学习基础知识篇(已完结) 初学机器学习西瓜书的概要记录(二)常用的机器学习方法篇(持续更新) 初学机器学习西瓜书的概要记录(三)进阶知识篇(待更) 文字公式撰写不易&am…...
[SDX35+WCN6856]SDX35 + WCN6856 默认增加打包wifi配置hostapd_24g.conf和hostapd_5g.conf操作方法
SDX35 SDX35介绍 SDX35设备是一种多模调制解调器芯片,支持 4G/5G sub-6 技术。它是一个4nm芯片专为实现卓越的性能和能效而设计。它包括一个 1.9 GHz Cortex-A7 应用处理器。 SDX35主要特性 ■ 3GPP Rel. 17 with 5G Reduced Capability (RedCap) support. Backward compati…...
【iOS】OC高级编程 iOS多线程与内存管理阅读笔记——自动引用计数
文章目录 什么是自动引用计数 内存管理/引用计数 概要 内存管理的思考方式 自己生成的对象,自己所持有 非自己生成的对象,自己也能持有 不再需要自己持有的对象时释放 无法释放非自己持有的对象 什么是自动引用计数 自动引用计数(AR…...
网络安全-LD_PRELOAD,请求劫持
目录 一、环境 二、开始做题 三、总结原理 四、如何防护 一、环境 我们这里用蚁剑自带的靶场第一关来解释 docker制作一下即可 二、开始做题 首先环境内很明显给我们已经写好了webshell 同样我们也可以访问到 我们使用这个蚁剑把这个webshell连上 我们发现命令不能执行&am…...
GO入门之值传递于引用(指针、内存地址)传递扫盲
GO入门之值传递于引用(指针、内存地址)传递扫盲 Go 语言中,值传递和引用(指针)传递是两个关键的概念。通过案例可以很好地展示两者的区别。 值传递与引用传递的区别: 值传递:传递的是变量的副…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域,高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表,以及基于它们实现的 Reactor 模式,为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
