diff --git a/src/views/board/model/AirportModel.vue b/src/views/board/model/AirportModel.vue index 8fb44c3..3d97c29 100644 --- a/src/views/board/model/AirportModel.vue +++ b/src/views/board/model/AirportModel.vue @@ -6,6 +6,10 @@ import * as THREE from 'three'; 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场景中 export default { name: 'AirportModel', @@ -25,7 +29,7 @@ export default { // 创建一个新的 Three.js 场景 const scene = new THREE.Scene(); // 创建一个透视相机,参数为视角、宽高比、近裁剪面和远裁剪面 - const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000); + const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 100000000); // 创建一个 WebGL 渲染器并启用抗锯齿 const renderer = new THREE.WebGLRenderer({ antialias: true }); // 设置渲染器的尺寸为容器的宽度和高度 @@ -33,38 +37,54 @@ export default { // 将渲染器的 DOM 元素添加到容器中 container.appendChild(renderer.domElement); - // 设置光源 + // 创建一个新的平行光源,颜色为白色(0xffffff),强度为1 const light = new THREE.DirectionalLight(0xffffff, 1); + // 创建一个新的环境光,颜色为白色(0xffffff),强度为1 + const ambient = new THREE.AmbientLight(0xffffff, 1); // 设置光源位置并归一化 light.position.set(5, 3, 5); // 将光源添加到场景中 scene.add(light); + scene.add(ambient); + // 创建OrbitControls对象,用于控制相机的旋转、缩放和平移 + const controls = new OrbitControls(camera, renderer.domElement); + // 设置OrbitControls的目标点,即相机围绕的中心点 + controls.target = new THREE.Vector3(-433, 300, -217); + // 更新OrbitControls的状态,使其生效 + controls.update(); // 加载 MTL 文件 const mtlLoader = new MTLLoader(); - mtlLoader.load('/model/jiaodongjichang.mtl', (materials) => { + // 加载MTL文件,并设置材质 + mtlLoader.load('/model/daxingjichang.mtl', (materials) => { + // 预加载材质 materials.preload(); + // 创建OBJLoader实例 const objLoader = new OBJLoader(); + // 设置OBJLoader的材质 objLoader.setMaterials(materials); - objLoader.load('/model/jiaodongjichang.obj', (object) => { + // 加载OBJ模型文件 + objLoader.load('/model/daxingjichang.obj', (object) => { + // 设置模型在场景中的Y轴位置 object.position.y = -1; + // 将模型添加到场景中 scene.add(object); }); } ); + + camera.position.set(-379.67901969707856, 1591.6047450835238, -1302.6577410405184);// 设置相机位置 + camera.rotation.set(-1302.6577410405184,-1302.6577410405184,3.104032443868015);// 设置相机旋转角度 - // 设置相机位置 - camera.position.z = 5; // 渲染循环 const animate = () => { // 请求下一帧动画 requestAnimationFrame(animate); // 渲染场景和相机 + console.log(camera); renderer.render(scene, camera); }; // 开始渲染循环 animate(); - - } } };