278 lines
7.8 KiB
Vue
278 lines
7.8 KiB
Vue
<template>
|
||
<div class="three-viewer">
|
||
<div ref="container" class="canvas-container"></div>
|
||
<div class="annotations-container" ref="annotationsContainer"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as THREE from 'three'
|
||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
|
||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
|
||
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
|
||
|
||
export default {
|
||
name: 'ThreeViewer',
|
||
props: {
|
||
modelPath: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
annotations: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
scene: null,
|
||
camera: null,
|
||
renderer: null,
|
||
labelRenderer: null,
|
||
controls: null,
|
||
model: null,
|
||
annotationObjects: [],
|
||
selectedPart: null
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initThree()
|
||
this.loadModel()
|
||
this.animate()
|
||
window.addEventListener('resize', this.onWindowResize)
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener('resize', this.onWindowResize)
|
||
if (this.renderer) {
|
||
this.renderer.dispose()
|
||
}
|
||
if (this.labelRenderer) {
|
||
this.labelRenderer.domElement.remove()
|
||
}
|
||
},
|
||
methods: {
|
||
initThree() {
|
||
// 场景
|
||
this.scene = new THREE.Scene()
|
||
this.scene.background = new THREE.Color(0xf0f0f0)
|
||
|
||
// 相机
|
||
const container = this.$refs.container
|
||
const width = container.clientWidth
|
||
const height = container.clientHeight
|
||
this.camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000)
|
||
this.camera.position.set(5, 5, 5)
|
||
|
||
// 渲染器
|
||
this.renderer = new THREE.WebGLRenderer({ antialias: true })
|
||
this.renderer.setSize(width, height)
|
||
this.renderer.setPixelRatio(window.devicePixelRatio)
|
||
this.renderer.shadowMap.enabled = true
|
||
container.appendChild(this.renderer.domElement)
|
||
|
||
// CSS2D渲染器（用于标注）
|
||
this.labelRenderer = new CSS2DRenderer()
|
||
this.labelRenderer.setSize(width, height)
|
||
this.labelRenderer.domElement.style.position = 'absolute'
|
||
this.labelRenderer.domElement.style.top = '0'
|
||
this.labelRenderer.domElement.style.pointerEvents = 'none'
|
||
this.$refs.annotationsContainer.appendChild(this.labelRenderer.domElement)
|
||
|
||
// 控制器
|
||
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
|
||
this.controls.enableDamping = true
|
||
this.controls.dampingFactor = 0.05
|
||
|
||
// 光照
|
||
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6)
|
||
this.scene.add(ambientLight)
|
||
|
||
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8)
|
||
directionalLight.position.set(5, 10, 5)
|
||
directionalLight.castShadow = true
|
||
this.scene.add(directionalLight)
|
||
|
||
// 网格地面
|
||
// const gridHelper = new THREE.GridHelper(10, 10)
|
||
// this.scene.add(gridHelper)
|
||
},
|
||
|
||
loadModel() {
|
||
const loader = new GLTFLoader()
|
||
console.log(this.modelPath)
|
||
loader.load(
|
||
this.modelPath,
|
||
(gltf) => {
|
||
this.model = gltf.scene
|
||
|
||
// 计算模型边界并居中
|
||
const box = new THREE.Box3().setFromObject(this.model)
|
||
const center = box.getCenter(new THREE.Vector3())
|
||
const size = box.getSize(new THREE.Vector3())
|
||
|
||
this.model.position.sub(center)
|
||
|
||
// 调整相机位置
|
||
const maxDim = Math.max(size.x, size.y, size.z)
|
||
const fov = this.camera.fov * (Math.PI / 180)
|
||
let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2))
|
||
cameraZ *= 2.5
|
||
|
||
this.camera.position.set(cameraZ, cameraZ, cameraZ)
|
||
this.camera.lookAt(0, 0, 0)
|
||
this.controls.target.set(0, 0, 0)
|
||
|
||
this.scene.add(this.model)
|
||
this.createAnnotations()
|
||
|
||
this.$emit('model-loaded')
|
||
},
|
||
(progress) => {
|
||
const percent = (progress.loaded / progress.total) * 100
|
||
this.$emit('loading-progress', percent)
|
||
},
|
||
(error) => {
|
||
console.error('模型加载失败:', error)
|
||
this.$emit('model-error', error)
|
||
}
|
||
)
|
||
},
|
||
|
||
createAnnotations() {
|
||
// 清除旧标注
|
||
this.annotationObjects.forEach(obj => {
|
||
this.scene.remove(obj)
|
||
})
|
||
this.annotationObjects = []
|
||
|
||
// 创建标注点的预设位置（圆形分布）
|
||
const radius = 2
|
||
const angleStep = (Math.PI * 2) / this.annotations.length
|
||
|
||
this.annotations.forEach((annotation, index) => {
|
||
const angle = angleStep * index
|
||
const x = Math.cos(angle) * radius
|
||
const z = Math.sin(angle) * radius
|
||
const y = 1 + Math.sin(index) * 0.5
|
||
|
||
// 创建标注标签
|
||
const labelDiv = document.createElement('div')
|
||
labelDiv.className = 'annotation-label'
|
||
labelDiv.textContent = `${index + 1} ${annotation.name}`
|
||
labelDiv.style.cssText = `
|
||
background: rgba(64, 158, 255, 0.9);
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
pointer-events: auto;
|
||
`
|
||
|
||
labelDiv.addEventListener('click', () => {
|
||
this.onAnnotationClick(annotation, index)
|
||
})
|
||
|
||
const label = new CSS2DObject(labelDiv)
|
||
label.position.set(x, y, z)
|
||
label.userData = { annotation, index }
|
||
|
||
this.scene.add(label)
|
||
this.annotationObjects.push(label)
|
||
|
||
// 创建连接线
|
||
const points = [
|
||
new THREE.Vector3(0, 0, 0),
|
||
new THREE.Vector3(x, y, z)
|
||
]
|
||
const geometry = new THREE.BufferGeometry().setFromPoints(points)
|
||
const material = new THREE.LineBasicMaterial({
|
||
color: 0x409eff,
|
||
transparent: true,
|
||
opacity: 0.5
|
||
})
|
||
const line = new THREE.Line(geometry, material)
|
||
this.scene.add(line)
|
||
this.annotationObjects.push(line)
|
||
})
|
||
},
|
||
|
||
onAnnotationClick(annotation, index) {
|
||
this.highlightPart(index)
|
||
this.$emit('annotation-click', annotation, index)
|
||
},
|
||
|
||
highlightPart(index) {
|
||
// 重置之前的高亮
|
||
if (this.selectedPart !== null) {
|
||
this.annotationObjects.forEach((obj, i) => {
|
||
if (obj.isLine) {
|
||
obj.material.opacity = 0.5
|
||
} else if (obj.element) {
|
||
obj.element.style.background = 'rgba(64, 158, 255, 0.9)'
|
||
obj.element.style.transform = 'scale(1)'
|
||
}
|
||
})
|
||
}
|
||
|
||
// 高亮选中的部件
|
||
this.selectedPart = index
|
||
this.annotationObjects.forEach((obj, i) => {
|
||
const objIndex = Math.floor(i / 2)
|
||
if (objIndex === index) {
|
||
if (obj.isLine) {
|
||
obj.material.opacity = 1
|
||
obj.material.color.setHex(0xff6b00)
|
||
} else if (obj.element) {
|
||
obj.element.style.background = 'rgba(255, 107, 0, 0.95)'
|
||
obj.element.style.transform = 'scale(1.1)'
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
animate() {
|
||
requestAnimationFrame(this.animate)
|
||
this.controls.update()
|
||
this.renderer.render(this.scene, this.camera)
|
||
this.labelRenderer.render(this.scene, this.camera)
|
||
},
|
||
|
||
onWindowResize() {
|
||
const container = this.$refs.container
|
||
const width = container.clientWidth
|
||
const height = container.clientHeight
|
||
|
||
this.camera.aspect = width / height
|
||
this.camera.updateProjectionMatrix()
|
||
|
||
this.renderer.setSize(width, height)
|
||
this.labelRenderer.setSize(width, height)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.three-viewer {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.canvas-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.annotations-container {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
}
|
||
</style>
|