diff --git a/hw-ui/src/views/board/model/index.vue b/hw-ui/src/views/board/model/index.vue index a71c4b9..2d3874d 100644 --- a/hw-ui/src/views/board/model/index.vue +++ b/hw-ui/src/views/board/model/index.vue @@ -8,11 +8,12 @@ import * as THREE from 'three'; import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader.js'; import {MTLLoader} from 'three/examples/jsm/loaders/MTLLoader.js'; import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'; +import {CSS2DRenderer} from "three/examples/jsm/renderers/CSS2DRenderer"; const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100 let a = 0 -let aa = true +let lastModel = null export default { name: 'Model', components: {}, @@ -104,6 +105,21 @@ export default { animate(); + const labelRenderer = new CSS2DRenderer(); + labelRenderer.setSize(window.innerWidth, window.innerHeight); + labelRenderer.domElement.style.position = 'absolute'; + labelRenderer.domElement.style.top = 0; + document.body.appendChild(labelRenderer.domElement); + +// 创建CSS2DObject + const label = document.createElement('div'); + label.style.color = 'red'; + label.innerHTML = '这是提示窗口'; + const labelObject = new CSS2DObject(label); + labelObject.position.set(0, 1, 0); // 根据需要调整位置 + scene.add(labelObject); + + // 创建一个raycaster实例 var raycaster = new THREE.Raycaster(); @@ -112,7 +128,7 @@ export default { var mouse = new THREE.Vector2(); // 监听鼠标点击事件 - document.addEventListener('click', function (event) { + document.addEventListener('dblclick', function (event) { // 将鼠标位置转换为二维向量 mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; @@ -128,6 +144,11 @@ export default { // 获取第一个交点的对象 var obj = intersects[0].object; console.log('Clicked object:', obj); + outlineObj(obj.parent) + // obj.parent.children.forEach(e => { + // e.material.color.set(0xff0000); + // }) + // obj.material.color.set(0xff0000); alert(obj.parent?.name || obj.name) // 你可以在这里添加你想要的逻辑,比如高亮被点击的模型等 }