实现人体模型可点击

简化需求：实现项目内嵌人体模型，实现点击不同部位弹出部位名称

一：优先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>