模型更改
This commit is contained in:
@@ -111,7 +111,7 @@ export default {
|
||||
meshList: [],
|
||||
selectedMeshInfo: null,
|
||||
raycaster: new THREE.Raycaster(),
|
||||
mouse: new THREE.Vector2()
|
||||
mouse: new THREE.Vector2(),
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
@@ -264,7 +264,6 @@ export default {
|
||||
// 遍历模型所有子元素
|
||||
this.model.traverse((child) => {
|
||||
if (child.isMesh) {
|
||||
console.log(7777, child)
|
||||
child.material.emissiveMap = child.material.map;
|
||||
child.castShadow = true; // 让模型产生阴影
|
||||
child.receiveShadow = true; // 让模型接受阴影
|
||||
@@ -274,6 +273,7 @@ export default {
|
||||
let path = TextureName[name]
|
||||
|
||||
if(path) {
|
||||
console.log(7777, child, name, path)
|
||||
if(this.textureObj[name]) {
|
||||
child.material = this.textureObj[name]
|
||||
child.material.needsUpdate = true;
|
||||
@@ -426,7 +426,7 @@ export default {
|
||||
selectedObjects
|
||||
);
|
||||
outlinePass.selectedObjects = selectedObjects;
|
||||
outlinePass.edgeStrength = 10.0; // 边框的亮度
|
||||
outlinePass.edgeStrength = 2.0; // 边框的亮度
|
||||
outlinePass.edgeGlow = 0.5; // 光晕[0,1]
|
||||
outlinePass.usePatternTexture = false; // 是否使用父级的材质
|
||||
outlinePass.edgeThickness = 1.0; // 边框宽度
|
||||
@@ -469,47 +469,53 @@ export default {
|
||||
const angleStep = (Math.PI * 2) / this.annotations.length
|
||||
|
||||
this.annotations.forEach((annotation, index) => {
|
||||
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}`
|
||||
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)
|
||||
})
|
||||
if(annotation.position) {
|
||||
let position = annotation.position && annotation.position[0] ? annotation.position[0] : { x: 0, y: 0, z: 0 }
|
||||
let position2 = annotation.position && annotation.position[1] ? annotation.position[1] : { x: 0, y: 0, z: 0 }
|
||||
// 创建标注标签
|
||||
const labelDiv = document.createElement('div')
|
||||
labelDiv.className = 'annotation-label'
|
||||
labelDiv.textContent = `${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(position2.x, position2.y, position2.z)
|
||||
label.userData = { annotation, index }
|
||||
|
||||
this.scene.add(label)
|
||||
this.annotationObjects.push(label)
|
||||
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)
|
||||
|
||||
// 创建连接线
|
||||
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)
|
||||
// 创建连接线
|
||||
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)
|
||||
|
||||
}else {
|
||||
this.annotationObjects.push('')
|
||||
this.annotationObjects.push('')
|
||||
}
|
||||
})
|
||||
},
|
||||
onAnnotationClick(annotation, index) {
|
||||
@@ -553,6 +559,8 @@ export default {
|
||||
}
|
||||
|
||||
// 高亮选中的部件
|
||||
|
||||
console.log(8888, this.annotationObjects, index)
|
||||
this.selectedPart = index
|
||||
this.annotationObjects.forEach((obj, i) => {
|
||||
const objIndex = Math.floor(i / 2)
|
||||
@@ -593,6 +601,42 @@ export default {
|
||||
|
||||
console.log('点击的部件:', this.selectedMeshInfo);
|
||||
}
|
||||
|
||||
// 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
|
||||
// }
|
||||
},
|
||||
|
||||
copyPosition() {
|
||||
|
||||
Reference in New Issue
Block a user