diff --git a/hw-ui/src/views/board/model/index.vue b/hw-ui/src/views/board/model/index.vue index 2d3874d..9c33b73 100644 --- a/hw-ui/src/views/board/model/index.vue +++ b/hw-ui/src/views/board/model/index.vue @@ -8,7 +8,7 @@ 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"; +import {CSS2DObject, CSS2DRenderer} from "three/examples/jsm/renderers/CSS2DRenderer"; const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100 @@ -89,38 +89,27 @@ export default { } // loadF(['quanzidongchaobaojizhaungpeixian']) // loadF(['1-1']) - loadF(['1-1', '1-2', '1-3', '1-4', '2-1-1', '2-2-1', '2-2-2', '2-3-1', '3-3', '3-4', '3-5', '3-6', '3-7', '3-8']) + loadF(['1-1', '1-2', '1-3']) + // loadF(['1-1', '1-2', '1-3', '1-4', '2-1-1', '2-2-1', '2-2-2', '2-3-1', '3-3', '3-4', '3-5', '3-6', '3-7', '3-8']) // loadF(['1-1','1-2','1-3','1-4','1changfang','2-1-1','2-2-1','2-2-2','2-3-1','3-1','3-2','3-2-1 200','3-3','3-4','3-5','3-6','3-7','3-8',]) -// 渲染循环 - function animate() { - requestAnimationFrame(animate); - renderer.render(scene, camera); - } - - setInterval(() => { - // console.log(camera) - }, 1000) - - animate(); - const labelRenderer = new CSS2DRenderer(); labelRenderer.setSize(window.innerWidth, window.innerHeight); labelRenderer.domElement.style.position = 'absolute'; labelRenderer.domElement.style.top = 0; + labelRenderer.domElement.style.pointerEvents = 'none'; document.body.appendChild(labelRenderer.domElement); // 创建CSS2DObject const label = document.createElement('div'); - label.style.color = 'red'; + label.style.color = '#fff'; label.innerHTML = '这是提示窗口'; const labelObject = new CSS2DObject(label); - labelObject.position.set(0, 1, 0); // 根据需要调整位置 + labelObject.position.set(289, 1559, 1298); // 根据需要调整位置 scene.add(labelObject); - // 创建一个raycaster实例 var raycaster = new THREE.Raycaster(); @@ -154,6 +143,20 @@ export default { } }, false); + +// 渲染循环 + function animate() { + requestAnimationFrame(animate); + renderer.render(scene, camera); + labelRenderer.render(scene, camera); + } + + setInterval(() => { + // console.log(camera) + }, 1000) + + animate(); + }, methods: {} }