|
@@ -12,7 +12,6 @@ const mouse = new THREE.Vector2();
|
|
const fontLoader = new FontLoader();
|
|
const fontLoader = new FontLoader();
|
|
const container = ref<HTMLDivElement | null>(null);
|
|
const container = ref<HTMLDivElement | null>(null);
|
|
const width = 600;
|
|
const width = 600;
|
|
-const height = 400;
|
|
|
|
const clickableBuildings: any = []; // 存储所有可点击建筑物
|
|
const clickableBuildings: any = []; // 存储所有可点击建筑物
|
|
|
|
|
|
// 场景变量
|
|
// 场景变量
|
|
@@ -23,7 +22,7 @@ let controls: any = null;
|
|
let animateId: any = null;
|
|
let animateId: any = null;
|
|
|
|
|
|
// 初始化场景
|
|
// 初始化场景
|
|
-const initScene = (width: number, height: number) => {
|
|
|
|
|
|
+const initScene = (width: number) => {
|
|
// 设置渲染器
|
|
// 设置渲染器
|
|
renderer.setSize(width, width * 2 / 3);
|
|
renderer.setSize(width, width * 2 / 3);
|
|
renderer.setClearColor(0x87ceeb); // 天空蓝色背景
|
|
renderer.setClearColor(0x87ceeb); // 天空蓝色背景
|
|
@@ -535,24 +534,24 @@ const createEnvironment = () => {
|
|
};
|
|
};
|
|
|
|
|
|
// 创建树木
|
|
// 创建树木
|
|
-const createTree = (x: any, y: any, z: any) => {
|
|
|
|
- // 树干
|
|
|
|
- const trunkGeometry = new THREE.CylinderGeometry(0.3, 0.5, 2, 8);
|
|
|
|
- const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 });
|
|
|
|
- const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
|
|
|
|
- trunk.position.set(x, y + 1, z);
|
|
|
|
- trunk.castShadow = true;
|
|
|
|
-
|
|
|
|
- // 树冠
|
|
|
|
- const leavesGeometry = new THREE.SphereGeometry(2, 8, 8);
|
|
|
|
- const leavesMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 });
|
|
|
|
- const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial);
|
|
|
|
- leaves.position.set(x, y + 3, z);
|
|
|
|
- leaves.castShadow = true;
|
|
|
|
-
|
|
|
|
- scene.add(trunk);
|
|
|
|
- scene.add(leaves);
|
|
|
|
-};
|
|
|
|
|
|
+// const createTree = (x: any, y: any, z: any) => {
|
|
|
|
+// // 树干
|
|
|
|
+// const trunkGeometry = new THREE.CylinderGeometry(0.3, 0.5, 2, 8);
|
|
|
|
+// const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 });
|
|
|
|
+// const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
|
|
|
|
+// trunk.position.set(x, y + 1, z);
|
|
|
|
+// trunk.castShadow = true;
|
|
|
|
+
|
|
|
|
+// // 树冠
|
|
|
|
+// const leavesGeometry = new THREE.SphereGeometry(2, 8, 8);
|
|
|
|
+// const leavesMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 });
|
|
|
|
+// const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial);
|
|
|
|
+// leaves.position.set(x, y + 3, z);
|
|
|
|
+// leaves.castShadow = true;
|
|
|
|
+
|
|
|
|
+// scene.add(trunk);
|
|
|
|
+// scene.add(leaves);
|
|
|
|
+// };
|
|
// 创建椭圆操场
|
|
// 创建椭圆操场
|
|
const createEllipticalPlayground = (x: any, y: any, z: any) => {
|
|
const createEllipticalPlayground = (x: any, y: any, z: any) => {
|
|
|
|
|
|
@@ -597,7 +596,7 @@ const createEllipticalPlayground = (x: any, y: any, z: any) => {
|
|
const innerTrackPoints = innerTrackGeometry.getPoints(100);
|
|
const innerTrackPoints = innerTrackGeometry.getPoints(100);
|
|
|
|
|
|
// 合并点集形成跑道形状
|
|
// 合并点集形成跑道形状
|
|
- const allPoints = trackPoints.concat(innerTrackPoints.reverse());
|
|
|
|
|
|
+ // const allPoints = trackPoints.concat(innerTrackPoints.reverse());
|
|
|
|
|
|
// 创建跑道形状
|
|
// 创建跑道形状
|
|
const trackShape = new THREE.Shape();
|
|
const trackShape = new THREE.Shape();
|
|
@@ -674,7 +673,6 @@ const createBasketballCourt = (x: any, y: any, z: any, rotationY = 0) => {
|
|
// 篮球场尺寸 (调整为20x10)
|
|
// 篮球场尺寸 (调整为20x10)
|
|
const courtLength = 20;
|
|
const courtLength = 20;
|
|
const courtWidth = 10;
|
|
const courtWidth = 10;
|
|
- const lineWidth = 0.2;
|
|
|
|
|
|
|
|
// 创建篮球场地板
|
|
// 创建篮球场地板
|
|
const courtGeometry = new THREE.PlaneGeometry(courtLength, courtWidth);
|
|
const courtGeometry = new THREE.PlaneGeometry(courtLength, courtWidth);
|
|
@@ -838,70 +836,66 @@ const onWindowResize = () => {
|
|
camera.updateProjectionMatrix();
|
|
camera.updateProjectionMatrix();
|
|
|
|
|
|
let containerWidth = width;
|
|
let containerWidth = width;
|
|
- let containerHeight = height;
|
|
|
|
if (container.value) {
|
|
if (container.value) {
|
|
containerWidth = container.value.clientWidth || width;
|
|
containerWidth = container.value.clientWidth || width;
|
|
- containerHeight = container.value.clientHeight || height;
|
|
|
|
}
|
|
}
|
|
renderer.setSize(containerWidth, containerWidth * (2 / 3));
|
|
renderer.setSize(containerWidth, containerWidth * (2 / 3));
|
|
};
|
|
};
|
|
// 添加鼠标移动事件处理
|
|
// 添加鼠标移动事件处理
|
|
-const onDocumentMouseMove = (event: any) => {
|
|
|
|
- mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
|
|
|
- mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
|
|
|
-
|
|
|
|
- raycaster.setFromCamera(mouse, camera);
|
|
|
|
- const intersects = raycaster.intersectObjects(scene.children, true);
|
|
|
|
-
|
|
|
|
- // 重置所有建筑物的悬停状态
|
|
|
|
- scene.traverse((obj: any) => {
|
|
|
|
- if (obj.userData.isBuilding && obj.userData.originalColor) {
|
|
|
|
- obj.material.color.setHex(obj.userData.originalColor);
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- if (intersects.length > 0) {
|
|
|
|
- const hoveredObject = intersects[0].object;
|
|
|
|
- if (hoveredObject.userData.isBuilding) {
|
|
|
|
- // 存储原始颜色
|
|
|
|
- if (!hoveredObject.userData.originalColor) {
|
|
|
|
- hoveredObject.userData.originalColor = hoveredObject.material.color.getHex();
|
|
|
|
- }
|
|
|
|
- // 设置悬停颜色
|
|
|
|
- hoveredObject.material.color.setHex(0xaaaaaa);
|
|
|
|
-
|
|
|
|
- // 更改鼠标指针
|
|
|
|
- if (container.value) {
|
|
|
|
- container.value.style.cursor = 'pointer';
|
|
|
|
- }
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- if (container.value) {
|
|
|
|
- container.value.style.cursor = 'default';
|
|
|
|
- }
|
|
|
|
-};
|
|
|
|
|
|
+// const onDocumentMouseMove = (event: any) => {
|
|
|
|
+// mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
|
|
|
+// mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
|
|
|
+
|
|
|
|
+// raycaster.setFromCamera(mouse, camera);
|
|
|
|
+// const intersects = raycaster.intersectObjects(scene.children, true);
|
|
|
|
+
|
|
|
|
+// // 重置所有建筑物的悬停状态
|
|
|
|
+// scene.traverse((obj: any) => {
|
|
|
|
+// if (obj.userData.isBuilding && obj.userData.originalColor) {
|
|
|
|
+// obj.material.color.setHex(obj.userData.originalColor);
|
|
|
|
+// }
|
|
|
|
+// });
|
|
|
|
+
|
|
|
|
+// if (intersects.length > 0) {
|
|
|
|
+// const hoveredObject = intersects[0].object;
|
|
|
|
+// if (hoveredObject.userData.isBuilding) {
|
|
|
|
+// // 存储原始颜色
|
|
|
|
+// if (!hoveredObject.userData.originalColor) {
|
|
|
|
+// hoveredObject.userData.originalColor = hoveredObject.material.color.getHex();
|
|
|
|
+// }
|
|
|
|
+// // 设置悬停颜色
|
|
|
|
+// hoveredObject.material.color.setHex(0xaaaaaa);
|
|
|
|
+
|
|
|
|
+// // 更改鼠标指针
|
|
|
|
+// if (container.value) {
|
|
|
|
+// container.value.style.cursor = 'pointer';
|
|
|
|
+// }
|
|
|
|
+// return;
|
|
|
|
+// }
|
|
|
|
+// }
|
|
|
|
+// if (container.value) {
|
|
|
|
+// container.value.style.cursor = 'default';
|
|
|
|
+// }
|
|
|
|
+// };
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
|
|
|
// 获取容器宽高
|
|
// 获取容器宽高
|
|
let containerWidth = width;
|
|
let containerWidth = width;
|
|
- let containerHeight = height;
|
|
|
|
if (container.value) {
|
|
if (container.value) {
|
|
containerWidth = container.value.clientWidth || width;
|
|
containerWidth = container.value.clientWidth || width;
|
|
- containerHeight = container.value.clientHeight || height;
|
|
|
|
- initScene(containerWidth, containerHeight);
|
|
|
|
|
|
+ initScene(containerWidth);
|
|
animate();
|
|
animate();
|
|
}
|
|
}
|
|
|
|
|
|
window.addEventListener('resize', onWindowResize);
|
|
window.addEventListener('resize', onWindowResize);
|
|
window.addEventListener('click', handleClick, false);
|
|
window.addEventListener('click', handleClick, false);
|
|
- window.addEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
|
|
|
+ // window.addEventListener('mousemove', onDocumentMouseMove, false);
|
|
});
|
|
});
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', onWindowResize);
|
|
window.removeEventListener('resize', onWindowResize);
|
|
- window.removeEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
|
|
|
+ // window.removeEventListener('mousemove', onDocumentMouseMove, false);
|
|
window.removeEventListener('click', handleClick, false);
|
|
window.removeEventListener('click', handleClick, false);
|
|
cancelAnimationFrame(animateId);
|
|
cancelAnimationFrame(animateId);
|
|
if (container.value && container.value.contains(renderer.domElement)) {
|
|
if (container.value && container.value.contains(renderer.domElement)) {
|