1. 安装依赖
pip install flask
2. 创建Flask应用
创建一个基本的Flask应用，并设置路由来处理不同的文件类型。
from flask import Flask, render_template, send_from_directory
app = Flask(__name__)
# 设置静态文件路径
app.static_folder = 'static'
@app.route('/')
def index():
return render_template('index.html')
@app.route('/view/360')
def view_360():
return render_template('360_viewer.html')
@app.route('/view/stl')
def view_stl():
return render_template('stl_viewer.html')
@app.route('/static/<path:filename>')
def static_files(filename):
return send_from_directory(app.static_folder, filename)
if __name__ == '__main__':
app.run(debug=True)
3. 创建HTML模板
在`templates`文件夹中创建HTML模板文件。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模型浏览</title>
</head>
<body>
<h1>选择浏览模式</h1>
<ul>
<li><a href="/view/360">360全景图</a></li>
<li><a href="/view/stl">STL模型</a></li>
</ul>
</body>
</html>
360_viewer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>360全景图浏览</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/panolens.js/0.11.0/panolens.min.js"></script>
</head>
<body>
<div id="panorama" style="width: 100%; height: 100vh;"></div>
<script>
const panorama = new PANOLENS.ImagePanorama('/static/360_image.jpg');
const viewer = new PANOLENS.Viewer({ container: document.getElementById('panorama') });
viewer.add(panorama);
</script>
</body>
</html>
stl_viewer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STL模型浏览</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/STLLoader/2.0.0/STLLoader.js"></script>
</head>
<body>
<div id="model" style="width: 100%; height: 100vh;"></div>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('model').appendChild(renderer.domElement);
const loader = new THREE.STLLoader();
loader.load('/static/model.stl', function (geometry) {
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00, specular: 0x111111, shininess: 200 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
camera.position.z = 100;
const animate = function () {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
});
</script>
</body>
</html>
4. 放置静态文件
在static文件夹中放置你的360全景图和STL模型文件。例如：
- static/360_image.jpg：360全景图
- static/model.stl：STL模型文件
5. 运行应用
在终端中运行你的Flask应用：
python app.py
6. 访问应用
打开浏览器，访问http://127.0.0.1:5000/，你将看到选择浏览模式的页面。点击链接即可查看360全景图或STL模型。
总结
通过以上步骤，你可以使用Flask实现一个简单的Web应用，用于浏览360全景图和STL模型。你可以根据需要进一步扩展和美化这个应用。
