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模型。你可以根據需要進一步擴展和美化這個應用。
