From 74bcc37ad5a27fdccf310f690a3e87cd8eb73ad3 Mon Sep 17 00:00:00 2001 From: zch Date: Wed, 23 Oct 2024 17:02:30 +0800 Subject: [PATCH] =?UTF-8?q?feat(board):=20=E6=B7=BB=E5=8A=A0=E6=9C=BA?= =?UTF-8?q?=E5=9C=BA=E6=A8=A1=E5=9E=8B=E6=A0=87=E7=AD=BE=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 AirportModel 组件中添加了 CSS2DRenderer用于渲染 HTML 标签 - 创建了 CSS2DObject 对象并添加到场景中，用于显示模型信息 - 调整了标签的位置并设置了相关样式- 在渲染循环中添加了标签渲染逻辑 --- src/views/board/model/AirportModel.vue | 34 +++++++++++++++++++------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/src/views/board/model/AirportModel.vue b/src/views/board/model/AirportModel.vue index 85339e9..04d47bf 100644 --- a/src/views/board/model/AirportModel.vue +++ b/src/views/board/model/AirportModel.vue @@ -1,7 +1,9 @@ @@ -11,8 +13,8 @@ import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'; import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'; import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"; -import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer'// 导入CSS2DRenderer类，用于在Three.js场景中渲染CSS元素 -import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'// 导入CSS2DObject类，用于将CSS元素作为对象添加到Three.js场景中 +import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';// 导入CSS2DRenderer类，用于在Three.js场景中渲染CSS元素 +import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';// 导入CSS2DObject类，用于将CSS元素作为对象添加到Three.js场景中 export default { name: 'AirportModel', @@ -28,7 +30,6 @@ export default { initThree() { // 获取模型容器的引用 const container = this.$refs.modelContainer; - // 创建一个新的 Three.js 场景 const scene = new THREE.Scene(); // 创建一个透视相机，参数为视角、宽高比、近裁剪面和远裁剪面 @@ -39,7 +40,7 @@ export default { renderer.setSize(container.clientWidth, container.clientHeight); // 将渲染器的 DOM 元素添加到容器中 container.appendChild(renderer.domElement); - + const labelRenderer = new CSS2DRenderer() // 创建一个CSS2D渲染器，用于在3D场景中渲染HTML标签 // 创建一个新的平行光源，颜色为白色（0xffffff），强度为1 const light = new THREE.DirectionalLight(0xffffff, 1); // 创建一个新的环境光，颜色为白色（0xffffff），强度为1 @@ -50,9 +51,23 @@ export default { scene.add(light); scene.add(ambient); + // 设置标签渲染器大小为窗口大小 + labelRenderer.setSize(window.innerWidth, window.innerHeight) + // 设置标签渲染器元素位置为绝对定位 + labelRenderer.domElement.style.position = 'absolute' + // 设置标签渲染器元素顶部位置为0 + labelRenderer.domElement.style.top = '0' + // 设置标签渲染器元素指针事件为无 + labelRenderer.domElement.style.pointerEvents = 'none' + // 将标签渲染器元素添加到文档中 + document.body.appendChild(labelRenderer.domElement); + let css2DObject = new CSS2DObject(this.$refs.modelInfo); + //TODO: 模型位置需要调整 + css2DObject.position.set(-430.7033258028898, 302.2550016498,-220.19044239352576); + scene.add(css2DObject); + // 创建OrbitControls对象，用于控制相机的旋转、缩放和平移 const controls = new OrbitControls(camera, renderer.domElement); - //是否开启右键拖拽 controls.enablePan = true; /* //是否自动旋转 @@ -61,7 +76,6 @@ export default { controls.enableZoom = true; /* // 使动画循环使用时阻尼或自转 意思是否有惯性 controls.enableDamping = true;*/ - // 设置OrbitControls的目标点，即相机围绕的中心点 controls.target = new THREE.Vector3(-433, 300, -217); // 更新OrbitControls的状态，使其生效 @@ -99,6 +113,8 @@ export default { console.log(camera);*/ // 渲染场景和相机 renderer.render(scene, camera); + // 渲染标签 + labelRenderer.render(scene, camera); }; // 开始渲染循环 animate();