当前位置： 首页 > article >正文

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

article 2026/3/6 8:29:47

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

相关文章：

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

1. 安装依赖 pip install flask 2. 创建Flask应用 创建一个基本的Flask应用&#xff0c;并设置路由来处理不同的文件类型。 from flask import Flask, render_template, send_from_directory app Flask(__name__) # 设置静态文件路径 app.static_folder static app.r…...

编程日记 2026/2/15 4:03:32

IntelliJ 配置文件plugin.xml

在 IntelliJ IDEA 插件开发中&#xff0c;plugin.xml 是插件的配置文件&#xff0c;它包含了关于插件的所有基本信息、扩展点、依赖关系等。该文件使用 XML 格式进行定义。以下是 plugin.xml 中常见的元素及其用途&#xff1a; <idea-plugin><!-- 插件的基本信息 --&…...

编程日记 2026/3/4 1:17:23

C# Unity 唐老狮 No.10 模拟面试题

本文章不作任何商业用途 仅作学习与交流 安利唐老狮与其他老师合作的网站,内有大量免费资源和优质付费资源,我入门就是看唐老师的课程 打好坚实的基础非常非常重要: Unity课程 - 游习堂 - 唐老狮创立的游戏开发在线学习平台 - Powered By EduSoho C# 1. 内存中&#xff0c;堆和…...

编程日记 2026/2/26 12:25:43

数据库系统——规范化1NF~BCNF

数据库规范化完全指南&#xff1a;从零到BCNF&#xff0c;中学生也能秒懂&#xff01;&#x1f4da;✨ 一、什么是数据库规范化&#xff1f; 科学定义 &#x1f50d; 数据库规范化是通过一系列规则&#xff08;范式&#xff09;将数据库表结构分解为更小、更高效、无冗余的表…...

编程日记 2026/2/20 5:25:41

第十五届蓝桥杯2024JavaB组省赛试题A：报数游戏

简单的找规律题目。题目给得数列&#xff0c;第奇数项是20的倍数&#xff0c;第偶数项时24的倍数。题目要求第n 202420242024 项是多少。这一项是偶数&#xff0c;所以答案一定是24的倍数&#xff0c;并且偶数项的个数和奇数项的个数各占一半&#xff0c;所以最终的答案ans( n…...

编程日记 2026/2/15 15:47:44

Matlab 汽车二自由度转弯模型

1、内容简介 Matlab 187-汽车二自由度转弯模型 可以交流、咨询、答疑 2、内容说明 略 摘 要 本文前一部分提出了侧偏角和横摆角速度作为参数。描述了车辆运动的运动状态&#xff0c;其中文中使用的参考模型是二自由度汽车模型。汽车速度被认为是建立基于H.B.Pacejka的轮胎模…...

编程日记 2026/2/16 21:28:24

关于 2＞/dev/null 的作用以及机理

每个进程都有三个标准文件描述符&#xff1a;stdin&#xff08;标准输入&#xff09;、stdout&#xff08;标准输出&#xff09;和stderr&#xff08;标准错误&#xff09;。默认情况下&#xff0c;stderr会输出到终端。使用2>可以将stderr重定向到其他地方&#xff0c;比如…...

编程日记 2026/2/23 14:48:19

学c++的人可以几天速通python?

学了俩天啊&#xff0c;文章写纸上了 还是蛮有趣的...

编程日记 2026/2/15 0:41:02

HTML,CSS,JavaScript

HTML:负责网页的结构(页面元素和内容)。 CSS:负责网页的表现(页面元素的外观、位置等页面样式&#xff0c;如:颜色、大小等)。 Javascript:负责网页的行为(交互效果)。 MDN前端开发文档(MDN Web Docs) HTML HTML(HyperText Markup Language):超文本标记语言超文本:超越了文本的…...

编程日记 2026/2/27 9:43:40

微信小程序面试内容整理-图片优化

在微信小程序中，图片优化是提升加载速度、节省网络带宽和提高用户体验的重要步骤。图片通常是小程序页面中的主要资源，合理的图片优化能显著提高小程序的性能，尤其是在用户网络状况较差的情况下。 1. 选择合适的图片格式 不同的图片格式有不同的特点，选择合适的格式能够有效…...

编程日记 2026/2/23 6:56:29

Rocky Linux 9.x 基于 kubeadm部署k8s 1.32

一、部署说明 1、主机操作系统说明 序号操作系统及版本备注1Rocky Linux release 9下载链接&#xff1a;https://mirrors.163.com/rocky/9.5/isos/x86_64/Rocky-9.5-x86_64-minimal.iso 2、主机硬件配置说明 作用IP地址操作系统配置关键组件k8s-master01192.168.234.51Rocky…...

编程日记 2026/3/5 22:05:58

【每日学点HarmonyOS Next知识】上下拉列表、停止无限循环动画、页面列表跟随列表滑动、otf字体、日期选择

1、HarmonyOS 实现只需要保留上拉加载更多&#xff0c;但是不需要下拉刷新&#xff1f; Refresh通过参数refreshing判断当前组件是否正在刷新&#xff0c;可以控制该参数变化来触发下拉刷新&#xff1a;https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5…...

编程日记 2025/8/27 0:49:08

解决git init 命令不显示.git

首先在自己的项目代码右击 打开git bash here 输入git init 之后自己的项目没有.git文件&#xff0c;有可能是因为.git文件隐藏了&#xff0c;下面是解决办法...

编程日记 2026/2/23 16:48:52

利用AI让数据可视化

1. 从问卷星上下载一份答题结果。 序号用户ID提交答卷时间所用时间来源来源详情来自IP总分1、《中华人民共和国电子商务法》正式实施的时间是&#xff08;&#xff09;。2、&#xff08;&#xff09;可以判断企业在行业中所处的地位。3、&#xff08;&#xff09;是指店铺内有…...

编程日记 2026/2/14 21:37:45

神经网络微调技术解析

神经网络微调技术 微调&#xff08;Fine-tuning&#xff09;是迁移学习的核心技术&#xff0c;通过在预训练模型基础上调整参数&#xff0c;使其适应特定任务或领域。以下从传统方法、参数高效微调&#xff08;PEFT&#xff09;、新兴技术三个维度展开&#xff0c;覆盖主流技术…...

编程日记 2026/2/23 6:56:27

WebLogic XMLDecoder反序列化漏洞（CVE-2017-10271）深度解析与实战复现

0x00 漏洞概述 CVE-2017-10271 是Oracle WebLogic Server WLS Security组件中的远程代码执行漏洞。攻击者通过构造恶意XML请求&#xff0c;利用XMLDecoder反序列化机制绕过安全验证&#xff0c;最终实现服务器权限接管。 影响版本 WebLogic 10.3.6.0WebLogic 12.1.3.0WebLog…...

编程日记 2026/2/15 4:31:48

解决qt中自定插件加载失败，不显示问题。

这个问题断断续续搞了一天多&#xff0c;主要是版本不匹配问题。 我们先来看下 Based on Qt 6.6.0 → 说明 Qt Creator 本身 是基于 Qt 6.6.0 框架构建的。MSVC 2019, 64-bit → 说明 Qt Creator 是使用 Microsoft Visual C 2019 编译器&#xff08;64 位&#xff09; 编译的。…...

编程日记 2026/3/5 12:54:54

Git 面试问题，解决冲突

1.问题描述 在多人协作开发中&#xff0c;当多个开发者在同一文件的同一部分进行修改并提交时&#xff0c;Git 无法自动合并这些更改&#xff0c;从而产生代码冲突&#xff08;Conflict&#xff09;。冲突的代码会被 Git 标记出来&#xff0c;需要开发者手动解决。 冲突原因 多…...

编程日记 2026/2/16 12:39:12

Apache Shiro 使用教程

Apache Shiro 使用教程 Apache Shiro是一个强大且灵活的开源安全框架&#xff0c;主要用于处理身份验证&#xff08;Authentication&#xff09;、授权&#xff08;Authorization&#xff09;、加密&#xff08;Cryptography&#xff09;和会话管理&#xff08;Session Manage…...

编程日记 2026/2/20 16:55:24

用maven生成springboot多模块项目

用Maven生成Spring Boot多模块项目&#xff0c;可以按照以下步骤操作&#xff1a; 1. 创建父项目 首先&#xff0c;使用Maven的archetype插件创建一个空的Maven项目作为父项目。打开终端&#xff0c;执行以下命令&#xff1a; mvn archetype:generate -DgroupIdcom.example -…...

编程日记 2026/2/27 10:03:44

【最佳实践】Go 状态模式

设计思路 状态模式的核心在于将对象的行为封装在特定的状态类中&#xff0c;使得对象在不同的状态下表现出不同的行为。每个状态实现同一个接口&#xff0c;允许对象在运行时通过改变其内部状态对象来改变其行为。状态模式使得状态转换更加明确&#xff0c;并且易于扩展新的状…...

编程日记 2026/2/19 13:12:36

智慧社区3.0

项目介绍&#xff1a; 此项目旨在推动成都市探索**超大城市社区发展治理新路**&#xff0c;由三个实验室负责三大内容 1、**研发社区阵地空间管理模块**&#xff1a;AI算法实现态势感知&#xff08;如通过社区图片和视频、文本&#xff0c;对环境 空间质量、绿视率、安全感分…...

编程日记 2026/3/1 20:52:29

C#语法基础总结

输入和输出 输入 Console.Read(); 从屏幕读取一个字符&#xff0c;并返回该字符所对应的整型数字 Console.ReadLine(); 从屏幕读取一串字符&#xff0c;并返回该字符串 输出 Console.WriteLine(); 输出内容&#xff0c;并换行 Console.Write(); 输出内容&#xff0c;不换行…...

编程日记 2026/2/23 0:22:39

Springboot+Vue登录、注册功能（含验证码）（后端！）

我们首先写一个接口&#xff0c;叫login&#xff01;然后对传入一个user&#xff0c;因为我们前端肯定是要传过来一个user&#xff0c;然后我们后端返回一个user&#xff0c;因为我们要根据这个去校验&#xff01;我们还引入了一个hutool的一个东西&#xff0c;在pom文件里面引…...

编程日记 2026/3/6 7:34:51

深入理解 HTML 中的＜div＞和元素：构建网页结构与样式的基石

一、引言 在 HTML 的世界里&#xff0c;<div>和元素虽看似普通&#xff0c;却扮演着极为关键的角色。它们就像网页搭建过程中的万能积木&#xff0c;能够将各种 HTML 元素巧妙地组合起来&#xff0c;无论是构建页面布局&#xff0c;还是对局部内容进行样式调整&#xff…...

编程日记 2026/1/27 6:50:45

搞定python之八----操作mysql

本文是《搞定python》系列文章的第八篇&#xff0c;讲述利用python操作mysql数据库。相对来说&#xff0c;本文的综合性比较强&#xff0c;包含了操作数据库、异常处理、元组等内容&#xff0c;需要结合前面的知识点。 1、安装mysql模块 PyMySql模块相当于数据库的驱动&#…...

编程日记 2026/2/27 12:43:05

游戏立项时期随笔记录(1)

模拟经营的项目还没有完全结束&#xff0c;这几天又有可能涉及到一个新项目。感想随笔记录一下&#xff0c;防止忘记。今天一天整理这个&#xff0c;搞得今天没时间看数学和AI。 在 Unity3D 游戏前端主程序的立项时期&#xff0c;核心目标是明确技术方向、评估可行性、搭建基础…...

编程日记 2026/2/22 3:40:24

LVGL 中设置 UI 层局部透明，显示下方视频层

LVGL层次 LVGL自上而下分别是layer_sys > layer_top > lv_sreen_active > layer_bottom 即 系统层、顶层、活动屏幕、底层 原理 如果将UI设置为局部透明&#xff0c;显示下方的视频层&#xff0c;不仅仅需要将当前活动屏幕的背景设置为透明&#xff0c;还需要将底层…...

编程日记 2026/3/5 20:54:52

Debezium日常分享系列之：Debezium 3.1.0.Beta1发布

Debezium日常分享系列之&#xff1a;Debezium 3.1.0.Beta1发布 新特性和改进Debezium 平台的首次发布Percona 的最小锁定新的 Oracle 源信息 SCN 和时间戳字段Vitess Epoch/零日期列解析的变化Vitess 二进制排序的 tiny、medium 和 long 文本列的变化CloudEvent traceparent 支…...

编程日记 2026/2/14 20:14:56

21.多态

一、多态概念 多种形态。 静态多态&#xff1a;编译时多态。&#xff08;函数重载&#xff09; 动态多态&#xff1a;运行时多态。&#xff08;继承关系下&#xff0c;调用父类指针或引用&#xff0c;对于不同的对象有不同的行为&#xff09; 二、多态的定义及实现 1&#xff…...

编程日记 2026/3/2 5:10:20