shanke/vue-model-review
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

打点

Browse Source
This commit is contained in:
cao_yi_min
2026-04-27 11:08:55 +08:00
parent c2e662cbf4
commit 6e0e447fa3
6 changed files with 1062 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/ThreeViewer.vue
View File

@@ -2,6 +2,27 @@
<div class="three-viewer">
<div ref="container" class="canvas-container"></div>
<div class="annotations-container" ref="annotationsContainer"></div>
<!-- 调试面板 -->
<div v-if="debugMode" class="debug-panel">
<h3>调试模式</h3>
<div class="debug-info">
<p>点击模型查看部件信息</p>
<div v-if="selectedMeshInfo">
<p><strong>部件名称:</strong> {{ selectedMeshInfo.name || '未命名' }}</p>
<p><strong>坐标:</strong></p>
<pre>{{ JSON.stringify(selectedMeshInfo.position, null, 2) }}</pre>
<button @click="copyPosition">复制坐标</button>
</div>
</div>
<div class="mesh-list">
<h4>模型部件列表:</h4>
<ul>
<li v-for="(mesh, index) in meshList" :key="index">
{{ mesh.name || `未命名_${index}` }}
</li>
</ul>
</div>
</div>
</div>
</template>
@@ -79,17 +100,17 @@ export default {
pmremGenerator: null,
labelRenderer: null,
annotationObjects: [],
selectedPart: null
selectedPart: null,
};
},
mounted () {
// this.onWindowResize(); // 初始化后立即调用一次
// 添加窗口大小变化监听
// window.addEventListener('resize', this.onWindowResize);
this.resizeObserver = new ResizeObserver(this.onWindowResize);
this.resizeObserver = new ResizeObserver(this.onWindowResize);
this.resizeObserver.observe(this.$refs.container);
// window.addEventListener('click', this.onMouseClick, false);
window.addEventListener('click', this.onMouseClick, false);
this.highlightColor = new THREE.Color(0xff0000); // 高亮颜色为红色
},
beforeDestroy() {
@@ -277,10 +298,10 @@ export default {
this.camera.updateProjectionMatrix();
// 创建一个父对象用于旋转
this.parent = new THREE.Object3D(); // 创建一个新的 Object3D 作为父对象
this.parent.add(this.model); // 将模型添加到父对象
// this.parent = new THREE.Object3D(); // 创建一个新的 Object3D 作为父对象
// this.parent.add(this.model); // 将模型添加到父对象
this.scene.add(this.parent); // 将父对象添加到场景
this.scene.add(this.model); // 将父对象添加到场景
// 让控制器聚焦到模型中心 聚焦中心
this.controls.target.copy(center);
@@ -347,40 +368,7 @@ export default {
// 点击射线
onMouseClick(event) {
console.log('我点击了')
// const raycaster = new THREE.Raycaster();
// const mouse = new THREE.Vector2();
// // 计算鼠标在屏幕上的位置并转换为Normalized device coordinates (NDC)
// console.log(this.sceneDomElement.clientWidth, window.innerWidth)
// mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
// mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// // 更新Raycaster的射线位置和方向
// raycaster.setFromCamera(mouse, this.camera);
if(!this.sceneDomElement) return
let getBoundingClientRect = this.sceneDomElement.getBoundingClientRect()
// 屏幕坐标转标准设备坐标
let x = ((event.clientX - getBoundingClientRect .left) / this.sceneDomElement.offsetWidth) * 2 - 1;// 标准设备横坐标
let y = -((event.clientY - getBoundingClientRect .top) / this.sceneDomElement.offsetHeight) * 2 + 1;// 标准设备纵坐标
let standardVector = new THREE.Vector3(x, y, 1);// 标准设备坐标
// 标准设备坐标转世界坐标
let worldVector = standardVector.unproject(this.camera);
// 射线投射方向单位向量(worldVector坐标减相机位置坐标)
let ray = worldVector.sub(this.camera.position).normalize();
// 创建射线投射器对象
let rayCaster = new THREE.Raycaster(this.camera.position, ray);
// 计算物体和射线的交点
const intersects = rayCaster.intersectObjects(this.model.children, true);
if (intersects.length !== 0 && intersects[0].object instanceof THREE.Mesh) {
// this.controls.target.copy(intersects[0].point);
let selectedObject = intersects[0].object;
let selectedObjects = [];
selectedObjects.push(selectedObject.parent);
this.outlineObj(selectedObjects);
} else {
console.log('没找到', this.composer)
this.composer = null
}
},
outlineObj(selectedObjects) {
let outlinePass;

610
src/components/ThreeViewerDebug copy.vue Normal file
View File

@@ -0,0 +1,610 @@
<template>
<div class="three-viewer">
<div ref="container" class="canvas-container"></div>
<div class="annotations-container" ref="annotationsContainer"></div>
<!-- 调试面板 -->
<div v-if="debugMode" class="debug-panel">
<h3>调试模式</h3>
<div class="debug-info">
<p>点击模型查看部件信息</p>
<div v-if="selectedMeshInfo">
<p><strong>部件名称:</strong> {{ selectedMeshInfo.name || '未命名' }}</p>
<p><strong>坐标:</strong></p>
<pre>{{ JSON.stringify(selectedMeshInfo.position, null, 2) }}</pre>
<button @click="copyPosition">复制坐标</button>
</div>
</div>
<div class="mesh-list">
<h4>模型部件列表:</h4>
<ul>
<li v-for="(mesh, index) in meshList" :key="index">
{{ mesh.name || `未命名_${index}` }}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
export default {
name: 'ThreeViewerDebug',
props: {
modelPath: {
type: String,
required: true
},
annotations: {
type: Array,
default: () => []
},
debugMode: {
type: Boolean,
default: false
}
},
data() {
return {
scene: null,
camera: null,
renderer: null,
labelRenderer: null,
controls: null,
model: null,
composer: null,
outlinePass: null,
frameId: null,
sceneDomElement: null,
annotationObjects: [],
selectedPart: null,
partMeshMap: {},
meshList: [],
selectedMeshInfo: null,
raycaster: new THREE.Raycaster(),
mouse: new THREE.Vector2()
};
},
watch: {
modelPath: {
handler(v) {
if (v) {
this.cleanup();
setTimeout(() => {
this.init();
}, 300);
}
},
immediate: true
}
},
mounted() {
this.resizeObserver = new ResizeObserver(this.onWindowResize);
this.resizeObserver.observe(this.$refs.container);
// 添加点击事件
window.addEventListener('click', this.onMouseClick, false);
},
beforeDestroy() {
this.cleanup();
window.removeEventListener('click', this.onMouseClick, false);
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
},
methods: {
cleanup() {
if (this.frameId) {
cancelAnimationFrame(this.frameId);
}
if (this.scene) {
this.scene.clear();
this.scene = null;
}
if (this.renderer) {
this.renderer.dispose();
this.renderer = null;
}
if (this.labelRenderer) {
this.labelRenderer.domElement.remove();
this.labelRenderer = null;
}
if (this.sceneDomElement) {
this.sceneDomElement.innerHTML = '';
}
},
init() {
this.sceneDomElement = this.$refs.container;
// 创建场景
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0xf0f0f0);
// 创建相机
const width = this.sceneDomElement.clientWidth;
const height = this.sceneDomElement.clientHeight;
this.camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
this.camera.position.set(5, 5, 5);
// WebGL渲染器
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(width, height);
this.renderer.shadowMap.enabled = true;
this.renderer.outputEncoding = THREE.sRGBEncoding;
this.sceneDomElement.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);
// 光照
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 pmremGenerator = new THREE.PMREMGenerator(this.renderer);
const env = pmremGenerator.fromScene(new RoomEnvironment(this.renderer), 0.04).texture;
this.scene.environment = env;
// 控制器
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.enableDamping = true;
this.controls.dampingFactor = 0.05;
// 加载模型
this.loadModel();
// 开始动画
this.animate();
},
loadModel() {
const loader = new GLTFLoader();
loader.load(
this.modelPath,
(gltf) => {
this.model = gltf.scene;
// 收集所有mesh信息
this.partMeshMap = {};
this.meshList = [];
this.model.traverse((child) => {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
// 存储mesh引用
const meshInfo = {
name: child.name,
mesh: child,
parent: child.parent
};
this.meshList.push(meshInfo);
if (child.name) {
this.partMeshMap[child.name] = child;
}
}
});
console.log('模型部件列表:', this.meshList.map(m => m.name || '未命名'));
console.log('部件映射表:', Object.keys(this.partMeshMap));
// 计算模型包围盒并居中
const box = new THREE.Box3().setFromObject(this.model);
const center = box.getCenter(new THREE.Vector3());
const size = box.getSize(new THREE.Vector3());
// 根据模型大小调整相机
const maxDim = Math.max(size.x, size.y, size.z);
this.maxDim = maxDim
this.camera.position.z = this.maxDim * 1;
this.camera.near = maxDim / 100;
this.camera.far = maxDim * 100;
this.camera.updateProjectionMatrix();
// // 计算模型边界并居中
// 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', {
meshList: this.meshList,
partMeshMap: Object.keys(this.partMeshMap)
});
},
(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 = [];
this.annotations.forEach((annotation, index) => {
// 尝试通过名称匹配找到对应的mesh
const mesh = this.findMeshByName(annotation.name);
let position = new THREE.Vector3();
if (mesh) {
// 如果找到对应mesh，使用其位置
mesh.getWorldPosition(position);
// 获取mesh的包围盒，标注放在上方
const box = new THREE.Box3().setFromObject(mesh);
const size = box.getSize(new THREE.Vector3());
position.y += size.y / 2 + 0.3;
console.log(`找到匹配: ${annotation.name} -> ${mesh.name}`, position);
} else {
// 如果没找到，使用圆形分布
const radius = 2;
const angleStep = (Math.PI * 2) / this.annotations.length;
const angle = angleStep * index;
position.set(
Math.cos(angle) * radius,
1 + Math.sin(index) * 0.5,
Math.sin(angle) * radius
);
console.warn(`未找到匹配: ${annotation.name}，使用默认位置`);
}
// 创建标注标签
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;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
`;
labelDiv.addEventListener('click', () => {
this.onAnnotationClick(annotation, index, mesh);
});
const label = new CSS2DObject(labelDiv);
label.position.copy(position);
label.userData = { annotation, index, mesh };
this.scene.add(label);
this.annotationObjects.push(label);
// 创建连接线
if (mesh) {
const meshPos = new THREE.Vector3();
mesh.getWorldPosition(meshPos);
const points = [meshPos, position];
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({
color: 0x409eff,
transparent: true,
opacity: 0.6
});
const line = new THREE.Line(geometry, material);
this.scene.add(line);
this.annotationObjects.push(line);
}
});
},
findMeshByName(annotationName) {
// 精确匹配
if (this.partMeshMap[annotationName]) {
return this.partMeshMap[annotationName];
}
// 模糊匹配
for (let meshName in this.partMeshMap) {
if (meshName.includes(annotationName) || annotationName.includes(meshName)) {
return this.partMeshMap[meshName];
}
}
// 尝试匹配关键词
const keywords = annotationName.split(/[，、\s]+/);
for (let keyword of keywords) {
if (keyword.length > 1) {
for (let meshName in this.partMeshMap) {
if (meshName.includes(keyword)) {
return this.partMeshMap[meshName];
}
}
}
}
return null;
},
onAnnotationClick(annotation, index, mesh) {
this.highlightPart(index, mesh);
this.$emit('annotation-click', annotation, index);
},
highlightPart(index, mesh) {
// 重置之前的高亮
this.annotationObjects.forEach((obj) => {
if (obj.isLine) {
obj.material.opacity = 0.6;
obj.material.color.setHex(0x409eff);
} 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)';
}
}
});
// 高亮3D部件
if (mesh) {
this.highlightMesh(mesh);
}
},
highlightMesh(mesh) {
// 创建高亮效果
if (!this.composer) {
this.composer = new EffectComposer(this.renderer);
const renderPass = new RenderPass(this.scene, this.camera);
this.composer.addPass(renderPass);
this.outlinePass = new OutlinePass(
new THREE.Vector2(this.sceneDomElement.clientWidth, this.sceneDomElement.clientHeight),
this.scene,
this.camera
);
this.outlinePass.edgeStrength = 5.0;
this.outlinePass.edgeGlow = 0.5;
this.outlinePass.edgeThickness = 2.0;
this.outlinePass.pulsePeriod = 2;
this.outlinePass.visibleEdgeColor.set(0xff6b00);
this.composer.addPass(this.outlinePass);
}
this.outlinePass.selectedObjects = [mesh.parent || mesh];
},
onMouseClick(event) {
if (!this.debugMode || !this.sceneDomElement) return;
const rect = this.sceneDomElement.getBoundingClientRect();
this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
this.raycaster.setFromCamera(this.mouse, this.camera);
const intersects = this.raycaster.intersectObjects(this.model.children, true);
if (intersects.length > 0) {
const mesh = intersects[0].object;
const point = intersects[0].point;
this.selectedMeshInfo = {
name: mesh.name,
position: {
x: parseFloat(point.x.toFixed(3)),
y: parseFloat(point.y.toFixed(3)),
z: parseFloat(point.z.toFixed(3))
}
};
console.log('点击的部件:', this.selectedMeshInfo);
}
},
copyPosition() {
if (this.selectedMeshInfo) {
const text = JSON.stringify(this.selectedMeshInfo.position, null, 2);
navigator.clipboard.writeText(text).then(() => {
this.$message.success('坐标已复制到剪贴板');
});
}
},
animate() {
this.frameId = requestAnimationFrame(this.animate);
if (this.controls) {
this.controls.update();
}
if (this.renderer && this.scene && this.camera) {
this.renderer.render(this.scene, this.camera);
}
if (this.composer) {
this.composer.render(this.scene, this.camera);
}
if (this.labelRenderer && this.scene && this.camera) {
this.labelRenderer.render(this.scene, this.camera);
}
},
onWindowResize() {
if (this.camera && this.renderer && this.sceneDomElement) {
const width = this.sceneDomElement.clientWidth;
const height = this.sceneDomElement.clientHeight;
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
this.labelRenderer.setSize(width, height);
if (this.composer) {
this.composer.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;
}
.debug-panel {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.95);
padding: 15px;
border-radius: 8px;
max-width: 300px;
max-height: 80%;
overflow-y: auto;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
pointer-events: auto;
}
.debug-panel h3 {
margin: 0 0 10px 0;
font-size: 16px;
color: #303133;
}
.debug-panel h4 {
margin: 10px 0 5px 0;
font-size: 14px;
color: #606266;
}
.debug-info {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #dcdfe6;
}
.debug-info p {
margin: 5px 0;
font-size: 13px;
color: #606266;
}
.debug-info pre {
background: #f5f7fa;
padding: 8px;
border-radius: 4px;
font-size: 12px;
margin: 5px 0;
}
.debug-info button {
margin-top: 8px;
padding: 5px 12px;
background: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
.debug-info button:hover {
background: #66b1ff;
}
.mesh-list ul {
margin: 0;
padding-left: 20px;
max-height: 300px;
overflow-y: auto;
}
.mesh-list li {
font-size: 12px;
color: #606266;
margin: 3px 0;
word-break: break-all;
}
</style>

659
src/components/ThreeViewerDebug.vue
View File

@@ -29,20 +29,23 @@
<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // 导入 GLTFLoader 用于加载 GLTF 模型
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; // 导入 OrbitControls 用于控制相机
// 高亮
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
import TextureName from '../../public/models/textureName.json'
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js'
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
export default {
name: 'ThreeViewerDebug',
props: {
modelPath: {
type: String,
required: true
type: [String, Number],
default: '',
},
annotations: {
type: Array,
@@ -53,18 +56,55 @@ export default {
default: false
}
},
computed: {
textureObj() {
return this.$store && this.$store.state.textureObj || {}
},
},
watch: {
modelPath: {
handler(v) {
if(v) {
if (this.scene) {
this.scene.clear();
this.scene = null;
}
// 2. 销毁渲染器
if (this.renderer) {
this.renderer.dispose();
this.renderer.forceContextLoss();
this.renderer = null;
}
// 3. 销毁相机
this.camera = null;
// 4. 清空画布DOM容器的内容
if(this.sceneDomElement){
this.sceneDomElement.innerHTML = '';
}
this.cleanup();
setTimeout(() => {
this.init()
}, 300)
}
},
immediate: true
},
},
data() {
return {
scene: null,
camera: null,
renderer: null,
labelRenderer: null,
controls: null,
model: null,
scene: null, // Three.js场景
camera: null, // 相机
renderer: null, // 渲染器
controls: null, // 轨道控制器
model: null, // 加载的3D模型
frameId: null, // 动画帧ID
sceneDomElement: null, // 容器DOM元素
parent: null, // 容器
maxDim: null,
highlightColor: null, //高亮颜色
composer: null,
outlinePass: null,
frameId: null,
sceneDomElement: null,
pmremGenerator: null,
labelRenderer: null,
annotationObjects: [],
selectedPart: null,
partMeshMap: {},
@@ -74,32 +114,40 @@ export default {
mouse: new THREE.Vector2()
};
},
watch: {
modelPath: {
handler(v) {
if (v) {
this.cleanup();
setTimeout(() => {
this.init();
}, 300);
}
},
immediate: true
}
},
mounted() {
mounted () {
// this.onWindowResize(); // 初始化后立即调用一次
// 添加窗口大小变化监听
// window.addEventListener('resize', this.onWindowResize);
this.resizeObserver = new ResizeObserver(this.onWindowResize);
this.resizeObserver.observe(this.$refs.container);
// 添加点击事件
window.addEventListener('click', this.onMouseClick, false);
this.highlightColor = new THREE.Color(0xff0000); // 高亮颜色为红色
},
beforeDestroy() {
this.cleanup();
window.removeEventListener('click', this.onMouseClick, false);
window.removeEventListener('resize', this.onWindowResize);
// 断开ResizeObserver
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
if (this.labelRenderer) {
this.labelRenderer.domElement.remove()
}
},
destroyed() {
cancelAnimationFrame(this.frameId);
if (this.sceneDomElement && this.renderer) {
this.sceneDomElement.removeChild(this.renderer.domElement);
}
if (this.renderer) {
this.renderer.dispose();
}
if (this.scene) {
this.scene.clear();
}
},
methods: {
cleanup() {
@@ -122,79 +170,153 @@ export default {
this.sceneDomElement.innerHTML = '';
}
},
init() {
if (this.sceneDomElement && this.renderer) {
this.sceneDomElement.removeChild(this.renderer.domElement);
}
// 获取容器元素
this.sceneDomElement = this.$refs.container;
// 创建场景
// 1. 创建一个新的场景
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0xf0f0f0);
// 创建相机
// 2. 创建相机
const width = this.sceneDomElement.clientWidth;
const height = this.sceneDomElement.clientHeight;
this.camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
this.camera.position.set(5, 5, 5);
this.camera = new THREE.PerspectiveCamera(55, width / height, 0.1, 1000);
// WebGL渲染器
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
// 3. 创建渲染器
this.renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
});
this.renderer.shadowMap.enabled = true
// 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.renderer.setPixelRatio(window.devicePixelRatio);
// 渲染器开启阴影效果
this.renderer.shadowMap.enabled = true
this.renderer.setSize(width, height);
this.renderer.shadowMap.enabled = true;
this.renderer.outputEncoding = THREE.sRGBEncoding;
// this.renderer.setClearColor(0xcccccc);
this.renderer.outputEncoding = THREE.sRGBEncoding; // 设置颜色编码
this.sceneDomElement.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);
//4. 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); // 创建环境光
this.scene.add(ambientLight); // 将环境光添加到场景中
// 光照
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;
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); // 平行光
directionalLight.position.set(5, 10, 7);
directionalLight.castShadow = true // 让平行光产生阴影
// 配置阴影属性 - 提高质量减少锯齿
directionalLight.shadow.mapSize.width = 4096
directionalLight.shadow.mapSize.height = 4096
directionalLight.shadow.camera.near = 0.5
directionalLight.shadow.camera.far = 50
directionalLight.shadow.camera.left = -10
directionalLight.shadow.camera.right = 10
directionalLight.shadow.camera.top = 10
directionalLight.shadow.camera.bottom = -10
directionalLight.shadow.bias = -0.0001 // 减少阴影失真
directionalLight.shadow.normalBias = 0.02 // 减少阴影痤疮
this.scene.add(directionalLight);
// 环境光
const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
const env = pmremGenerator.fromScene(new RoomEnvironment(this.renderer), 0.04).texture;
this.scene.environment = env;
this.pmremGenerator = new THREE.PMREMGenerator(this.renderer)
this.pmremGenerator.compileEquirectangularShader()
const env = this.pmremGenerator.fromScene(new RoomEnvironment(this.renderer), 0.04).texture
this.scene.environment = env
// 控制器
// 添加地面
this.createGround()
// 5. 添加轨道控制器
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.enableDamping = true;
this.controls.dampingFactor = 0.05;
this.controls.enableDamping = true; // 启用阻尼效果
this.controls.dampingFactor = 0.25; // 阻尼系数
// 加载模型
// 6. 加载3D模型
this.loadModel();
// 开始动画
// 7. 开始动画循环
this.animate();
},
loadModel() {
const loader = new GLTFLoader();
const textureLoader = new THREE.TextureLoader();
loader.load(
this.modelPath,
// 'https://skeps-bucket.oss-cn-shenzhen.aliyuncs.com/2026%2FFile%2F4d3a9525-c415-4ab2-b916-d87b4b86ebcbSK010020001001BLQ_%E4%BA%A4%E6%B5%81%E9%81%BF%E9%9B%B7%E5%99%A8%2C%E5%B8%A6%E6%94%AF%E6%92%91%E4%BB%B6%E5%9B%BA%E5%AE%9A%E9%97%B4%E9%9A%99.glb',
(gltf) => {
// 移除旧模型
if (this.model) {
this.scene.remove(this.model);
}
this.model = gltf.scene;
this.scene.add(this.model);
// 收集所有mesh信息
this.partMeshMap = {};
this.meshList = [];
// 遍历模型所有子元素
this.model.traverse((child) => {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
// console.log(7777)
child.material.emissiveMap = child.material.map;
child.castShadow = true; // 让模型产生阴影
child.receiveShadow = true; // 让模型接受阴影
// child.material.emissive = child.material.color;
let name = child.material.name.split('.')[0]
let path = TextureName[name]
if(path) {
if(this.textureObj[name]) {
child.material = this.textureObj[name]
child.material.needsUpdate = true;
} else {
let texture = textureLoader.load(`/models/texture/${encodeURIComponent(path)}.jpg`)
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1, 1 );
let material = null
if(name.includes('金属')) {
material = new THREE.MeshStandardMaterial({
map: texture,
// color: 0x049EF4,
// emissive: 0x000000,
metalness: 0.55, // 金属感
roughness: 0.05 // 粗糙度，0为镜面反射
})
} else {
material = new THREE.MeshPhongMaterial( {
// ...child.material,
map: texture,
emissiveMap: child.material.map,
shininess: 0,
} );
}
child.material = material
child.material.needsUpdate = true;
this.textureObj[name] = material
// this.$store.commit('set_textureObj', this.textureObj)
}
}
// 存储mesh引用
const meshInfo = {
name: child.name,
@@ -210,88 +332,160 @@ export default {
}
});
console.log('模型部件列表:', this.meshList.map(m => m.name || '未命名'));
console.log('部件映射表:', Object.keys(this.partMeshMap));
// 计算模型边界并居中
// 计算模型包围盒并居中
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', {
meshList: this.meshList,
partMeshMap: Object.keys(this.partMeshMap)
});
this.maxDim = maxDim
this.camera.position.z = this.maxDim * 1;
this.camera.near = maxDim / 100;
this.camera.far = maxDim * 100;
this.camera.updateProjectionMatrix();
// 创建一个父对象用于旋转
// this.parent = new THREE.Object3D(); // 创建一个新的 Object3D 作为父对象
// this.parent.add(this.model); // 将模型添加到父对象
this.scene.add(this.model); // 将父对象添加到场景
// 让控制器聚焦到模型中心 聚焦中心
this.controls.target.copy(center);
this.controls.enableRotate = true;
// this.controls.minPolarAngle = Math.PI / 2; // 限制向下旋转的角度
// this.controls.maxPolarAngle = Math.PI / 2; // 限制向上旋转的角度
this.controls.update();
// 调整地面位置到模型底部
if (this.ground) {
this.ground.position.y = box.min.y - 0.01
}
this.createAnnotations()
this.$emit('model-loaded')
},
(progress) => {
const percent = (progress.loaded / progress.total) * 100;
this.$emit('loading-progress', percent);
const percent = (progress.loaded / progress.total) * 100
this.$emit('loading-progress', percent)
},
(error) => {
console.error('模型加载失败:', error);
this.$emit('model-error', error);
this.$emit('model-error', error)
}
);
},
animate() {
this.frameId = requestAnimationFrame(this.animate);
if(this.parent && this.isPlay) {
this.parent.rotation.y += 0.001; // 沿 Y 轴旋转父对象
}
// 更新控制器
if (this.controls) {
this.controls.update();
}
// 渲染场景
if (this.renderer && this.scene && this.camera) {
this.renderer.render(this.scene, this.camera);
}
if (this.composer) {
this.composer.render(this.scene, this.camera);
}
if(this.labelRenderer && this.scene && this.camera) {
this.labelRenderer.render(this.scene, this.camera)
}
},
// 响应式调整大小
onWindowResize() {
if (this.camera && this.renderer) {
const width = this.sceneDomElement.clientWidth;
const height = this.sceneDomElement.clientHeight;
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
}
},
outlineObj(selectedObjects) {
let outlinePass;
let renderPass;
let unrealBloomPass;
// 创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。
// 用于模型边缘高亮
this.composer = new EffectComposer(this.renderer);
this.composer.renderTarget1.texture.outputColorSpace = THREE.sRGBEncoding;
this.composer.renderTarget2.texture.outputColorSpace = THREE.sRGBEncoding;
this.composer.renderTarget1.texture.encoding = THREE.sRGBEncoding;
this.composer.renderTarget2.texture.encoding = THREE.sRGBEncoding;
// 新建一个场景通道 为了覆盖到原来的场景上
renderPass = new RenderPass(this.scene, this.camera);
this.composer.addPass(renderPass);
// 物体边缘发光通道
outlinePass = new OutlinePass(
new THREE.Vector2(this.sceneDomElement.clientWidth, this.sceneDomElement.clientHeight),
this.scene,
this.camera,
selectedObjects
);
outlinePass.selectedObjects = selectedObjects;
outlinePass.edgeStrength = 10.0; // 边框的亮度
outlinePass.edgeGlow = 0.5; // 光晕[0,1]
outlinePass.usePatternTexture = false; // 是否使用父级的材质
outlinePass.edgeThickness = 1.0; // 边框宽度
outlinePass.downSampleRatio = 1; // 边框弯曲度
outlinePass.pulsePeriod = 5; // 呼吸闪烁的速度
outlinePass.visibleEdgeColor.set(parseInt(0x00ff00)); // 呼吸显示的颜色
outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 0); // 呼吸消失的颜色
outlinePass.clear = true;
this.composer.addPass(outlinePass);
// 自定义的着色器通道 作为参数
// effectFXAA = new ShaderPass(FXAAShader);
// effectFXAA.uniforms.resolution.value.set(
// 1 / window.innerWidth,
// 1 / window.innerHeight
// );
// effectFXAA.renderToScreen = true;
// composer.addPass(effectFXAA);
// // 抗锯齿
// smaaPass = new SMAAPass();
// composer.addPass(smaaPass);
// // 发光效果
unrealBloomPass = new UnrealBloomPass();
unrealBloomPass.strength = 0.1;
unrealBloomPass.radius = 0;
unrealBloomPass.threshold = 1;
this.composer.addPass(unrealBloomPass);
// this.scene.background = new THREE.Color(0x1b1824);
},
// 创建标签
createAnnotations() {
// 清除旧标注
this.annotationObjects.forEach(obj => {
this.scene.remove(obj);
});
this.annotationObjects = [];
this.scene.remove(obj)
})
this.annotationObjects = []
// 创建标注点的预设位置（圆形分布）
const radius = 2
const angleStep = (Math.PI * 2) / this.annotations.length
this.annotations.forEach((annotation, index) => {
// 尝试通过名称匹配找到对应的mesh
const mesh = this.findMeshByName(annotation.name);
let position = new THREE.Vector3();
if (mesh) {
// 如果找到对应mesh，使用其位置
mesh.getWorldPosition(position);
// 获取mesh的包围盒，标注放在上方
const box = new THREE.Box3().setFromObject(mesh);
const size = box.getSize(new THREE.Vector3());
position.y += size.y / 2 + 0.3;
console.log(`找到匹配: ${annotation.name} -> ${mesh.name}`, position);
} else {
// 如果没找到，使用圆形分布
const radius = 2;
const angleStep = (Math.PI * 2) / this.annotations.length;
const angle = angleStep * index;
position.set(
Math.cos(angle) * radius,
1 + Math.sin(index) * 0.5,
Math.sin(angle) * radius
);
console.warn(`未找到匹配: ${annotation.name}，使用默认位置`);
}
let position = annotation.position && annotation.position[0] ? annotation.position[0] : { x: 0, y: 0, z: 0 }
let position2 = { x: position.x + 0.1, y: position.y + 0.05, z: position.z }
// 创建标注标签
const labelDiv = document.createElement('div');
labelDiv.className = 'annotation-label';
labelDiv.textContent = `${index + 1} ${annotation.name}`;
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;
@@ -301,128 +495,88 @@ export default {
cursor: pointer;
white-space: nowrap;
pointer-events: auto;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
`;
`
labelDiv.addEventListener('click', () => {
this.onAnnotationClick(annotation, index, mesh);
});
this.onAnnotationClick(annotation, index)
})
const label = new CSS2DObject(labelDiv);
label.position.copy(position);
label.userData = { annotation, index, mesh };
const label = new CSS2DObject(labelDiv)
label.position.set(position2.x, position2.y, position2.z)
label.userData = { annotation, index }
this.scene.add(label);
this.annotationObjects.push(label);
this.scene.add(label)
this.annotationObjects.push(label)
// 创建连接线
if (mesh) {
const meshPos = new THREE.Vector3();
mesh.getWorldPosition(meshPos);
const points = [meshPos, position];
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({
color: 0x409eff,
transparent: true,
opacity: 0.6
});
const line = new THREE.Line(geometry, material);
this.scene.add(line);
this.annotationObjects.push(line);
}
});
const points = [
new THREE.Vector3(position.x, position.y, position.z),
new THREE.Vector3(position2.x, position2.y, position2.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)
},
findMeshByName(annotationName) {
// 精确匹配
if (this.partMeshMap[annotationName]) {
return this.partMeshMap[annotationName];
}
// 创建地面
createGround() {
// 创建圆形地面几何体，避免菱形格子
const groundGeometry = new THREE.CircleGeometry(25, 64)
// 模糊匹配
for (let meshName in this.partMeshMap) {
if (meshName.includes(annotationName) || annotationName.includes(meshName)) {
return this.partMeshMap[meshName];
}
}
// 创建地面材质 - 使用 ShadowMaterial 只显示阴影
const groundMaterial = new THREE.ShadowMaterial({
opacity: 0.25,
color: 0x000000
})
// 尝试匹配关键词
const keywords = annotationName.split(/[，、\s]+/);
for (let keyword of keywords) {
if (keyword.length > 1) {
for (let meshName in this.partMeshMap) {
if (meshName.includes(keyword)) {
return this.partMeshMap[meshName];
}
}
}
}
// 创建地面网格
this.ground = new THREE.Mesh(groundGeometry, groundMaterial)
this.ground.rotation.x = -Math.PI / 2 // 旋转地面使其水平
this.ground.position.y = 0
this.ground.receiveShadow = true // 地面接收阴影
return null;
this.scene.add(this.ground)
},
onAnnotationClick(annotation, index, mesh) {
this.highlightPart(index, mesh);
this.$emit('annotation-click', annotation, index);
},
highlightPart(index, mesh) {
highlightPart(index) {
// 重置之前的高亮
this.annotationObjects.forEach((obj) => {
if (obj.isLine) {
obj.material.opacity = 0.6;
obj.material.color.setHex(0x409eff);
} else if (obj.element) {
obj.element.style.background = 'rgba(64, 158, 255, 0.9)';
obj.element.style.transform = 'scale(1)';
}
});
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.selectedPart = index
this.annotationObjects.forEach((obj, i) => {
const objIndex = Math.floor(i / 2);
const objIndex = Math.floor(i / 2)
if (objIndex === index) {
if (obj.isLine) {
obj.material.opacity = 1;
obj.material.color.setHex(0xff6b00);
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)';
obj.element.style.background = 'rgba(255, 107, 0, 0.95)'
obj.element.style.transform = 'scale(1.1)'
}
}
});
// 高亮3D部件
if (mesh) {
this.highlightMesh(mesh);
}
})
},
highlightMesh(mesh) {
// 创建高亮效果
if (!this.composer) {
this.composer = new EffectComposer(this.renderer);
const renderPass = new RenderPass(this.scene, this.camera);
this.composer.addPass(renderPass);
this.outlinePass = new OutlinePass(
new THREE.Vector2(this.sceneDomElement.clientWidth, this.sceneDomElement.clientHeight),
this.scene,
this.camera
);
this.outlinePass.edgeStrength = 5.0;
this.outlinePass.edgeGlow = 0.5;
this.outlinePass.edgeThickness = 2.0;
this.outlinePass.pulsePeriod = 2;
this.outlinePass.visibleEdgeColor.set(0xff6b00);
this.composer.addPass(this.outlinePass);
}
this.outlinePass.selectedObjects = [mesh.parent || mesh];
},
onMouseClick(event) {
if (!this.debugMode || !this.sceneDomElement) return;
@@ -458,43 +612,6 @@ export default {
});
}
},
animate() {
this.frameId = requestAnimationFrame(this.animate);
if (this.controls) {
this.controls.update();
}
if (this.renderer && this.scene && this.camera) {
if (this.composer && this.outlinePass && this.outlinePass.selectedObjects.length > 0) {
this.composer.render();
} else {
this.renderer.render(this.scene, this.camera);
}
}
if (this.labelRenderer && this.scene && this.camera) {
this.labelRenderer.render(this.scene, this.camera);
}
},
onWindowResize() {
if (this.camera && this.renderer && this.sceneDomElement) {
const width = this.sceneDomElement.clientWidth;
const height = this.sceneDomElement.clientHeight;
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
this.labelRenderer.setSize(width, height);
if (this.composer) {
this.composer.setSize(width, height);
}
}
}
}
}
</script>

21
src/data/data.json
View File

@@ -145,6 +145,13 @@
"content": [
"护套与芯棒之间以及伞裙与护套之间的界面应是永久性粘接",
"粘接部分应牢固密实，没有气泡和缝隙，防止污秽物和水汽进入"
],
"position": [
{
"x": 0,
"y": 0.245,
"z": 0.015
}
]
},
{
@@ -152,12 +159,26 @@
"content": [
"采用锡青铜、黄铜、奥氏体不锈钢或其他耐锈蚀性材料制作，不采用有防腐蚀表层而本身不耐锈蚀的材料，与绝缘子成套供应",
"销腿末端弯曲部分尺寸严格满足标准规定，末端分开到 180° 再扳回原位无裂纹"
],
"position": [
{
"x": 0.019,
"y": -0.055,
"z": 0.019
}
]
},
{
"name": "铭牌",
"content": [
"标记制造厂名或商标、制造日期、额定电压、额定机械负荷、结构高度和产品编号"
],
"position": [
{
"x": 0.019,
"y": -0.055,
"z": 0.019
}
]
}
]

20
src/views/ModelDetail.vue
View File

@@ -17,21 +17,21 @@
<!-- PC端布局：左右分栏 -->
<template v-if="!isMobile">
<div class="viewer-section">
<three-viewer
<!-- <three-viewer
v-if="modelPath"
:model-path="modelPath"
:annotations="modelData.componentCheck"
@annotation-click="handleAnnotationClick"
@model-loaded="handleModelLoaded"
@model-error="handleModelError"
/> -->
<three-viewer-debug
:model-path="modelPath"
:annotations="modelData.componentCheck"
:debug-mode="pageTyep == 'show' ? false : true"
@annotation-click="handleAnnotationClick"
@model-loaded="handleModelLoaded"
/>
<!-- <three-viewer-debug
:model-path="modelPath"
:annotations="modelData.componentCheck"
:debug-mode="true"
@annotation-click="handleAnnotationClick"
@model-loaded="handleModelLoaded"
/> -->
<div v-if="loading" class="loading-overlay">
<el-progress
type="circle"
@@ -125,13 +125,15 @@ export default {
selectedComponentIndex: -1,
selectedComponent: null,
drawerVisible: false,
isMobile: false
isMobile: false,
pageTyep: 'show'
}
},
created() {
this.checkDevice()
this.loadModelData()
window.addEventListener('resize', this.checkDevice)
this.pageTyep = this.$route.query.pageTyep || 'show'
},
beforeDestroy() {
window.removeEventListener('resize', this.checkDevice)

8
src/views/ModelList.vue
View File

@@ -9,12 +9,12 @@
:key="index"
class="model-card"
shadow="hover"
@click.native="goToDetail(index)"
>
<div class="card-content">
<i class="el-icon-box"></i>
<h3>{{ item.modelName }}</h3>
<p>点击查看详情</p>
<p @click="goToDetail(index, 'show')">点击查看详情</p>
<p @click="goToDetail(index, 'edit')">编辑</p>
</div>
</el-card>
</div>
@@ -32,8 +32,8 @@ export default {
}
},
methods: {
goToDetail(id) {
this.$router.push({ name: 'ModelDetail', params: { id } })
goToDetail(id, pageTyep) {
this.$router.push({ name: 'ModelDetail', params: { id }, query: { pageTyep: pageTyep } })
}
}
}