python+flask实现360全景图和stl等多种格式模型浏览

发布于:2025-03-16 ⋅ 阅读:(18) ⋅ 点赞:(0)

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模型。你可以根据需要进一步扩展和美化这个应用。