diff --git a/src/views/board/model/AirportModel.vue b/src/views/board/model/AirportModel.vue
index d591f99..85339e9 100644
--- a/src/views/board/model/AirportModel.vue
+++ b/src/views/board/model/AirportModel.vue
@@ -1,5 +1,8 @@
-
+
+
-->
-
-
-
-
+ }
+}
+
+-->
+ //.item1F, .item2F, .item3F, .item4F, .item5F {
+ // position: absolute;
+ // top: 45%;
+ // transform: translate(-50%, -50%);
+ // background-size: 100% 100%;
+ // background-repeat: no-repeat;
+ // width: 4.6vw;
+ // height: 1.32vw;
+ // line-height: 1.32vw;
+ // text-align: center;
+ // color: #fff;
+ //}
+ //
+ //.item1F {
+ // left: 39%;
+ // background-image: url("~@/assets/model/unselected.png");
+ //}
+ //
+ //.item2F {
+ // left: 44.5%;
+ // background-image: url("~@/assets/model/unselected.png");
+ //}
+ //
+ //.item3F {
+ // left: 50%;
+ // background-image: url("~@/assets/model/unselected.png");
+ //}
+ //
+ //.item4F {
+ // left: 55.5%;
+ // background-image: url("~@/assets/model/unselected.png");
+ //}
+ //
+ //.item5F {
+ // left: 61%;
+ // background-image: url("~@/assets/model/unselected.png");
+ //}
+}
+
+-->
diff --git a/src/views/board/参考/setThree.js b/src/views/board/参考/setThree.js
index 8afd123..3a45486 100644
--- a/src/views/board/参考/setThree.js
+++ b/src/views/board/参考/setThree.js
@@ -7,55 +7,75 @@ import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
// 定义一些全局变量
-let isLoading = false
-let isAnimation = false
-let animationLine = []
-let keyidongModel
-let tuopanModel
-const scene = new THREE.Scene()
-const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000000000)
+let isLoading = false // 是否正在加载
+let isAnimation = false // 是否正在进行动画
+let animationLine = [] // 存储动画路径的数组
+let keyidongModel // 关键帧动画模型
+let tuopanModel // 拖盘模型
+const scene = new THREE.Scene() // 创建一个新的Three.js场景
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000000000) // 创建一个透视相机，参数为视角、宽高比、近裁剪面和远裁剪面
const renderer = new THREE.WebGLRenderer({
- antialias: true
-})
-const controls = new OrbitControls(camera, renderer.domElement)
-const pointLight = new THREE.PointLight(0xffffff, 1) //光源颜色 光照强度
-const ambient = new THREE.AmbientLight(0xffffff, 1)
-const light = new THREE.DirectionalLight(0xffffff, 1)
-const labelRenderer = new CSS2DRenderer()
-let raycaster = new THREE.Raycaster()
+ antialias: true // 开启抗锯齿
+}) // 创建一个WebGL渲染器
+const controls = new OrbitControls(camera, renderer.domElement) // 添加轨道控制器，允许用户通过鼠标操作旋转、缩放和平移场景
+const pointLight = new THREE.PointLight(0xffffff, 1) // 创建一个点光源，颜色为白色，强度为1
+const ambient = new THREE.AmbientLight(0xffffff, 1) // 创建一个环境光，颜色为白色，强度为1
+const light = new THREE.DirectionalLight(0xffffff, 1) // 创建一个平行光，颜色为白色，强度为1
+const labelRenderer = new CSS2DRenderer() // 创建一个CSS2D渲染器，用于在3D场景中渲染HTML标签
+let raycaster = new THREE.Raycaster() // 创建一个射线投射器，用于进行鼠标点击检测
// 创建一个二维空间的向量用于存储鼠标点击的屏幕位置
let mouse = new THREE.Vector2()
+// 设置场景背景颜色为黑色
scene.background = new THREE.Color(0x000000)
+// 设置相机位置
camera.position.set(-435, 940, -1377)
+// 更新相机投影矩阵
camera.updateProjectionMatrix()
+// 设置渲染器大小为窗口大小
renderer.setSize(window.innerWidth, window.innerHeight)
+// 设置控制器目标点
controls.target = new THREE.Vector3(-433, 300, -217)
+// 更新控制器
controls.update()
+// 设置点光源不随距离衰减
pointLight.decay = 0.0 //设置光源不随距离衰减 默认2.0
+// 设置点光源位置
pointLight.position.set(66, 66, 66) // 点光源位置
+// 设置点光源投射阴影
pointLight.castShadow = true
+// 将点光源添加到场景中
scene.add(pointLight)
+// 将环境光添加到场景中
scene.add(ambient)
+// 设置光源位置
light.position.set(66, 66, 66)
+// 设置光源目标点
light.target.position.set(0, 0, 0)
+// 将光源添加到场景中
scene.add(light)
+// 设置标签渲染器大小为窗口大小
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)
// 根据ID获取模型
function getModelById(id) {
- // 遍历场景中的所有对象
+ // 遍历场景中的所有对象，筛选出类型为'Group'或'Object3D'的对象
const objects = scene.children.filter(obj => obj.type === 'Group' || obj.type === 'Object3D')
for (const obj of objects) {
+ // 如果对象的ID与传入的ID匹配，则返回该对象
if (obj.id === id) {
- // 返回匹配ID的模型
return obj
}
}
+ // 如果没有找到匹配的对象，返回null
return null
}
@@ -74,53 +94,83 @@ document.addEventListener('dblclick', function(event) {
// 如果有交点
if (intersects.length > 0) {
let obj = intersects[0]
+ // 使用Tween.js库实现相机位置平滑过渡
new TWEEN.Tween(camera.position).to(new THREE.Vector3((intersects[0].point.x + 0), (intersects[0].point.y + 500), (intersects[0].point.z - 500)), 500).start()
+ // 设置相机位置
camera.position.set((intersects[0].point.x + 0), (intersects[0].point.y + 500), (intersects[0].point.z - 500))
+ // 更新相机投影矩阵
camera.updateProjectionMatrix()
+ // 设置相机朝向
camera.lookAt((intersects[0].point.x + 0), (intersects[0].point.y + 500), (intersects[0].point.z - 500));
+ // 设置控制器目标点
controls.target = new THREE.Vector3(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z)
+ // 更新控制器
controls.update()
+ // 渲染场景
renderer.render(scene, camera)
}
}, false)
// 动画函数
+/!**
+ * 异步动画函数，用于依次执行动画队列中的动画。
+ * @returns {Promise} 返回一个Promise对象，表示动画执行的完成状态。
+ *!/
const animation = async() => {
try {
+ // 如果动画队列中有动画
if (animationLine.length > 0) {
+ // 等待并执行队列中的第一个动画
await animationLine[0]()
+ // 移除已执行的动画
animationLine.shift()
+ // 如果队列中还有剩余动画
if (animationLine.length > 0) {
+ // 递归调用自身继续执行下一个动画
animation(animationLine)
} else {
+ // 如果队列为空，设置动画状态为false
isAnimation = false
}
}
} catch (e) {
+ // 捕获并打印异常信息
console.log(e)
}
}
// 动画循环
+/!**
+ * 动画函数，用于更新和渲染场景。
+ *!/
function animate() {
+ // 如果动画队列不为空且当前没有进行动画
if (animationLine.length > 0 && isAnimation === false) {
+ // 设置动画状态为进行中
isAnimation = true
+ // 开始执行动画
animation(animationLine)
}
+ // 请求下一帧的动画
requestAnimationFrame(animate)
+ // 更新TWEEN库中的动画状态
TWEEN.update()
+ // 渲染场景和相机
renderer.render(scene, camera)
+ // 渲染标签
labelRenderer.render(scene, camera)
}
animate()
+// 初始化变量a为0
let a = 0
-// 加载管理器
+// 加载管理器，用于管理资源加载过程
const loadingManager = new THREE.LoadingManager()
loadingManager.onLoad = function() {
+ // 当所有资源加载完成时，将isLoading设置为true
isLoading = true
}
@@ -142,33 +192,45 @@ scene.add(otherModel)
// 加载楼层1的模型
const loadF1 = (e) => {
+ // 遍历传入的模型名称数组
e.forEach(v => {
+ // 创建MTLLoader实例，用于加载材质文件
let mtlLoader = new MTLLoader()
- mtlLoader.load(`/model/${v}/${v}.mtl`,
+ // 加载材质文件
+ mtlLoader.load(`/model//.mtl`,
materials => {
+ // 预加载材质
materials.preload()
+ // 创建OBJLoader实例，并设置加载管理器和材质
let loader = new OBJLoader(loadingManager)
loader.setMaterials(materials)
+ // 加载OBJ模型文件
loader.load(
- `/model/${v}/${v}.obj`,
+ `/model//.obj`,
object => {
+ // 设置模型的名称
object.name = v
+ // 将模型添加到场景中
scene.add(object)
+ // 将模型添加到floor1Model对象中
floor1Model.add(object)
+ // 如果模型名称为'tishengji_keyidongbufen'，则将其赋值给keyidongModel变量
if (v === 'tishengji_keyidongbufen') {
keyidongModel = object
}
+ // 如果模型名称为'tishengji_tuopan'，则将其赋值给tuopanModel变量
if (v === 'tishengji_tuopan') {
tuopanModel = object
}
- // 更新渲染器
+ // 更新渲染器以显示新添加的模型
renderer.render(scene, camera)
},
xhr => {
-
+ // 处理加载过程中的进度事件（此处未实现）
},
(err) => {
+ // 如果加载出错，重新尝试加载模型
loadF([e])
}
)