<think>
根据之前的
问题，我们需要修复photo
-wall.html中的两个主要
问题：
1. 修复`getUrlParameter`未定义的错误：我们将使用`URLSearchParams`来替代，因为它是现代浏览器内置的，不需要额外定义函数。
2. 修正API请求的URL：之前我们提到将API_BASE_URL改为指向后端服务（如：'
http://localhost:5001/api/team_activities'），但
根据用户最初的启动命令，后端端口是5001，而前端服务是8000，所以需要跨域请求。
此外，我们还需要注意：
- 在loadPhotos函数中，使用URLSearchParams获取topic参数。
- 确保Three.js部分代码正确，特别是光线投射（raycaster）的设置。
由于代码较长，我将提供一个完整的photo
-wall.html代码，包含上述修复。同时，为了简化，我们假设共享路径的访问已经由后端处理，前端只需通过API获取图片URL。
注意：以下代码假设后端API返回的图片URL是完整的（包括主机
和端口），或者使用相对路径（如果同源）。由于前端
和后端端口不同，我们使用绝对URL（带端口5001）来请求API。
完整代码：</think>以下是
根据您的要求修复后的完整 `photo
-wall.html` 文件代码。修复了 `getUrlParameter` 未定义的
问题，并优化了整体实现：
```html
<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<title>3D照片墙</title>
<style>
body {
margin: 0;
overflow: hidden;
font
-family: 'Microsoft YaHei', sans
-serif;
background: linear
-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
color: white;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
box
-sizing: border
-box;
z
-index: 100;
display: flex;
justify
-content: space
-between;
align
-items: center;
background: rgba(0, 0, 0, 0.5);
backdrop
-filter: blur(5px);
}
#topic
-title {
font
-size: 24px;
font
-weight: bold;
text
-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
#theme
-filter {
padding: 8px 15px;
border
-radius: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
background: rgba(0, 0, 0, 0.3);
color: white;
font
-size: 16px;
outline: none;
cursor: pointer;
transition: all 0.3s ease;
}
#theme
-filter:hover {
background: rgba(0, 0, 0, 0.5);
border
-color: rgba(255, 255, 255, 0.7);
}
#theme
-filter option {
background: rgba(0, 0, 0, 0.8);
}
#back
-button {
padding: 8px 20px;
border
-radius: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
background: rgba(0, 0, 0, 0.3);
color: white;
font
-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
#back
-button:hover {
background: rgba(0, 0, 0, 0.5);
border
-color: rgba(255, 255, 255, 0.7);
transform: translateY(
-2px);
}
#loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(
-50%,
-50%);
font
-size: 24px;
text
-align: center;
z
-index: 10;
}
#loading
-spinner {
border: 5px solid rgba(255, 255, 255, 0.3);
border
-top: 5px solid #ffffff;
border
-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#gallery
-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#info
-panel {
position: absolute;
bottom: 20px;
left: 20px;
background: rgba(0, 0, 0, 0.7);
padding: 15px;
border
-radius: 10px;
max
-width: 400px;
z
-index: 100;
backdrop
-filter: blur(5px);
display: none;
}
#info
-title {
font
-size: 20px;
margin
-bottom: 10px;
color: #ffcc00;
}
#info
-description {
font
-size: 16px;
line
-height: 1.5;
}
.close
-button {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
color: white;
font
-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="header">
<h1 id="topic
-title">主题照片墙</h1>
<select id="theme
-filter">
<option value="">全部主题</option>
<!
-- 主题选项将通过JavaScript动态添加
-->
</select>
<button id="back
-button">返回首页</button>
</div>
<div id="loading">
<div id="loading
-spinner"></div>
<p>加载照片中，请稍候...</p>
</div>
<div id="gallery
-container"></div>
<div id="info
-panel">
<button class="close
-button">×</button>
<h2 id="info
-title"></h2>
<p id="info
-description"></p>
</div>
<!
-- 引入Three.js库
-->
<script src="
https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
<script>
// 基础API路径
- 根据实际后端地址修改
const API_BASE_URL = '
http://localhost:5001/api/team_activities';
// 全局变量
let scene, camera, renderer, controls;
let particles = [];
let raycaster, mouse;
let currentTopic = '';
let availableThemes = [];
let photoData = [];
// DOM元素引用
const topicTitle = document.getElementById('topic
-title');
const themeFilter = document.getElementById('theme
-filter');
const backButton = document.getElementById('back
-button');
const loadingElement = document.getElementById('loading');
const galleryContainer = document.getElementById('gallery
-container');
const infoPanel = document.getElementById('info
-panel');
const infoTitle = document.getElementById('info
-title');
const infoDescription = document.getElementById('info
-description');
const closeButton = document.querySelector('.close
-button');
// 获取URL参数
function getUrlParam(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name) || '';
}
// 加载照片数据
async function loadPhotos() {
try {
// 显示加载状态
loadingElement.style.display = 'block';
// 获取当前主题
currentTopic = getUrlParam('topic') || '';
// 设置主题标题
if (currentTopic) {
topicTitle.textContent = `主题: ${decodeURIComponent(currentTopic)}`;
} else {
topicTitle.textContent = '全部照片';
}
// 构建API请求URL
let apiUrl = API_BASE_URL;
if (currentTopic) {
apiUrl += `?topic=${encodeURIComponent(currentTopic)}`;
}
// 发送API请求
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error(`API请求失败: ${response.status}`);
}
// 解析响应数据
photoData = await response.json();
// 获取所有
可用主题
availableThemes = [...new Set(photoData.map(photo => photo.topic))];
// 填充主题
过滤器
populateThemeFilter();
// 初始化3D画廊
initGallery();
// 隐藏加载状态
loadingElement.style.display = 'none';
} catch (error) {
console.error('加载照片失败:', error);
loadingElement.innerHTML = `
<div style="color: #ff6b6b; font
-size: 18px;">
<p>加载照片失败: ${error.message}</p>
<p>请检查网络连接或后端服务是否正常运行</p>
<button onclick="location.reload()" style="margin
-top: 20px; padding: 10px 20px; background: #ff6b6b; border: none; border
-radius: 5px; color: white; cursor: pointer;">重新加载</button>
</div>
`;
}
}
// 填充主题
过滤器
function populateThemeFilter() {
// 清空现有选项
themeFilter.innerHTML = '<option value="">全部主题</option>';
// 添加主题选项
availableThemes.forEach(theme => {
const option = document.createElement('option');
option.value = theme;
option.textContent = theme;
// 如果当前主题匹配，则选中
if (theme === currentTopic) {
option.selected = true;
}
themeFilter.appendChild(option);
});
}
// 初始化3D画廊
function initGallery() {
// 创建场景
scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0a2a);
// 创建相机
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.z = 500;
// 创建渲染器
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
galleryContainer.appendChild(renderer.domElement);
// 添加轨道控制器
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed = 0.5;
// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// 添加方向光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
// 添加点光源
const pointLight = new THREE.PointLight(0xffcc00, 1, 1000);
pointLight.position.set(0, 200, 0);
scene.add(pointLight);
// 创建粒子系统
createParticleSystem();
// 设置光线投射器
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
// 添加事件监听器
window.addEventListener('resize', onWindowResize);
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('click', onMouseClick);
// 启动动画循环
animate();
}
// 创建粒子系统
function createParticleSystem() {
// 创建几何体
const geometry = new THREE.BufferGeometry();
// 创建顶点
和UV坐标
const vertices = [];
const uvs = [];
//
根据照片数据创建顶点
photoData.forEach((photo, index) => {
// 球面坐标
const phi = Math.acos(
-1 + (2 * index) / photoData.length);
const theta = Math.sqrt(photoData.length * Math.PI) * phi;
//
转换为笛卡尔坐标
const x = 300 * Math.sin(phi) * Math.cos(theta);
const y = 300 * Math.sin(phi) * Math.sin(theta);
const z = 300 * Math.cos(phi);
vertices.push(x, y, z);
uvs.push(0, 0); // 简化处理
});
// 设置几何体属性
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
// 创建材质
const material = new THREE.PointsMaterial({
size: 20,
vertexColors: false,
transparent: true,
opacity: 0.9,
map: createTextureAtlas(),
alphaTest: 0.5
});
// 创建点云系统
const particleSystem = new THREE.Points(geometry, material);
scene.add(particleSystem);
// 存储粒子引用
particles = particleSystem;
}
// 创建纹理图集（简化版）
function createTextureAtlas() {
// 创建临时纹理
const canvas = document.createElement('canvas');
canvas.width = 2048;
canvas.height = 2048;
const context = canvas.getContext('2d');
// 填充背景
context.fillStyle = 'rgba(0, 0, 0, 0)';
context.fillRect(0, 0, canvas.width, canvas.height);
// 绘制占位符
context.fillStyle = '#3498db';
context.font = 'bold 100px Arial';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('照片墙', canvas.width/2, canvas.height/2);
// 创建纹理
const texture = new THREE.CanvasTexture(canvas);
return texture;
}
// 窗口大小调整处理
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// 鼠标移动处理
function onMouseMove(event) {
// 计算标准化设备坐标
mouse.x = (event.clientX / window.innerWidth) * 2
- 1;
mouse.y =
-(event.clientY / window.innerHeight) * 2 + 1;
}
// 鼠标点击处理
function onMouseClick() {
// 更新射线投射器
raycaster.setFromCamera(mouse, camera);
// 计算与粒子的交点
const intersects = raycaster.intersectObjects([particles]);
if (intersects.length > 0) {
// 获取点击的粒子索引
const index = Math.floor(intersects[0].index);
// 显示照片信息
if (index >= 0 && index < photoData.length) {
const photo = photoData[index];
showPhotoInfo(photo);
}
}
}
// 显示照片信息
function showPhotoInfo(photo) {
infoTitle.textContent = photo.title || '未命名照片';
infoDescription.textContent = photo.description || '暂无描述';
infoPanel.style.display = 'block';
}
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 更新控制器
if (controls) controls.update();
// 旋转粒子系统
if (particles) {
particles.rotation.x += 0.001;
particles.rotation.y += 0.002;
}
// 渲染场景
renderer.render(scene, camera);
}
// 事件监听器设置
function setupEventListeners() {
// 主题
过滤器变更事件
themeFilter.addEventListener('change', (e) => {
const selectedTopic = e.target.value;
if (selectedTopic) {
window.location.href = `photo
-wall.html?topic=${encodeURIComponent(selectedTopic)}`;
} else {
window.location.href = 'photo
-wall.html';
}
});
// 返回按钮点击事件
backButton.addEventListener('click', () => {
window.location.href = 'chat
-worker.html';
});
// 关闭按钮点击事件
closeButton.addEventListener('click', () => {
infoPanel.style.display = 'none';
});
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
setupEventListeners();
loadPhotos();
});
</script>
</body>
</html>
```
### 代码解释
1. **URL参数处理**：
```javascript
function getUrlParam(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name) || '';
}
```
使用现代浏览器的 `URLSearchParams API安全地获取URL参数，避免XSS攻击。
2. **照片加载流程**：
```javascript
async function loadPhotos() {
// 获取当前主题
currentTopic = getUrlParam('topic') || '';
// 构建API请求URL
let apiUrl = API_BASE_URL;
if (currentTopic) {
apiUrl += `?topic=${encodeURIComponent(currentTopic)}`;
}
// 发送API请求并处理响应
const response = await fetch(apiUrl);
photoData = await response.json();
// 初始化3D画廊
initGallery();
}
```
使用异步函数从后端API加载照片数据，并
根据URL主题参数过滤结果。
3. **3D照片墙实现**：
```javascript
function createParticleSystem() {
// 创建几何体
和材质
const geometry = new THREE.BufferGeometry();
const material = new THREE.PointsMaterial({...});
//
根据球面坐标排列照片
photoData.forEach((photo, index) => {
const phi = Math.acos(
-1 + (2 * index) / photoData.length);
const theta = Math.sqrt(photoData.length * Math.PI) * phi;
// ...
});
// 创建点云系统
const particleSystem = new THREE.Points(geometry, material);
scene.add(particleSystem);
}
```
使用Three.js创建3D粒子系统，将照片排列在球面上形成3D照片墙。
4. **交互
功能**：
```javascript
function onMouseClick() {
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects([particles]);
if (intersects.length > 0) {
const index = Math.floor(intersects[0].index);
const photo = photoData[index];
showPhotoInfo(photo);
}
}
```
实现鼠标点击交互，当用户点击照片时显示详细信息面板。
5. **主题过滤
功能**：
```javascript
function populateThemeFilter() {
themeFilter.innerHTML = '<option value="">全部主题</option>';
availableThemes.forEach(theme => {
const option = document.createElement('option');
option.value = theme;
option.textContent = theme;
themeFilter.appendChild(option);
});
}
```
动态生成主题
过滤器，允许用户按主题筛选照片。
### 使用说明
1. **启动后端服务**：
```bash
python get.py
```
2. **启动前端服务**：
```bash
python
-m
http.server 8000
```
3. **访问照片墙**：
- 默认视图：`
http://localhost:8000/photo
-wall.html`
- 按主题查看：`
http://localhost:8000/photo
-wall.html?topic=员工关爱`
4. **交互操作**：
- 鼠标拖动：旋转3D照片墙
- 滚轮缩放：调整视图距离
- 点击照片：查看详细信息
- 主题筛选：通过顶部下拉菜单
切换主题
- 返回按钮：回到聊天界面
本文探讨了在Tomcat服务器上如何配置从HTTPS到HTTP的自动跳转问题。通过修改server.xml启用HTTPS端口并创建密钥文件，同时在web.xml中配置安全约束来指定哪些URL需要使用HTTPS。此外，还讨论了如何实现仅在特定URL模式下启用HTTPS，并在离开该范围时返回HTTP的问题。
扫一扫
751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
