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

  1. 安装依赖

pip install flask

  1. 创建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)

  1. 创建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>

  1. 放置静态文件

在static文件夹中放置你的360全景图和STL模型文件。例如:

  • static/360_image.jpg:360全景图

  • static/model.stl:STL模型文件

  1. 运行应用

在终端中运行你的Flask应用:

python app.py

  1. 访问应用

打开浏览器,访问http://127.0.0.1:5000/,你将看到选择浏览模式的页面。点击链接即可查看360全景图或STL模型。

总结

通过以上步骤,你可以使用Flask实现一个简单的Web应用,用于浏览360全景图和STL模型。你可以根据需要进一步扩展和美化这个应用。

相关推荐
Tipriest_1 小时前
Python关键字梳理
python·关键字·keyword
im_AMBER2 小时前
学习日志05 python
python·学习
大虫小呓2 小时前
Python 处理 Excel 数据 pandas 和 openpyxl 哪家强?
python·pandas
哪 吒2 小时前
2025B卷 - 华为OD机试七日集训第5期 - 按算法分类,由易到难,循序渐进,玩转OD(Python/JS/C/C++)
python·算法·华为od·华为od机试·2025b卷
摸爬滚打李上进4 小时前
重生学AI第十六集:线性层nn.Linear
人工智能·pytorch·python·神经网络·机器学习
凛铄linshuo5 小时前
爬虫简单实操2——以贴吧为例爬取“某吧”前10页的网页代码
爬虫·python·学习
牛客企业服务5 小时前
2025年AI面试推荐榜单,数字化招聘转型优选
人工智能·python·算法·面试·职场和发展·金融·求职招聘
胡斌附体5 小时前
linux测试端口是否可被外部访问
linux·运维·服务器·python·测试·端口测试·临时服务器
likeGhee6 小时前
python缓存装饰器实现方案
开发语言·python·缓存
项目題供诗6 小时前
黑马python(二十五)
开发语言·python