Introduction : By combining the Flask lightweight web framework with A-Frame 3D and VR technology, an interactive panorama display function is realized, and users can freely watch, rotate and zoom panorama pictures in the browser. The core of the project is to use Flask to build a web application, which is responsible for rendering HTML pages related to panoramas. By introducing the A-Frame library into the page, we can achieve 3D panorama rendering and interactive functions, including image rotation, translation and zooming. This enables users to explore every detail of the panorama more deeply. It is suitable for various scenarios, such as tourist attraction display, real estate project promotion, virtual reality application, etc. It provides a simple and efficient solution to make the display of panoramic images on the website more attractive.
History Raiders:
sanic + A-Frame / Three.js to build a virtual reality VR scene
Steps:
1. Install Flask:
pip install Flask
2. Create a file called app.py that contains the Flask application:
# -*- coding: utf-8 -*-
# time: 2023/5/7 11:33
# file: app.py
# 公众号: 玩转测试开发
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
3. In the template folder of the Flask application (templates by default), create a file named 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>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('zoom-controls', {
schema: {
speed: {
type: 'number', default: 1}
},
init: function () {
this.zoom = 1;
this.el.sceneEl.canvas.addEventListener('wheel', this.onWheel.bind(this));
},
onWheel: function (event) {
event.preventDefault();
const delta = Math.sign(event.deltaY) * this.data.speed;
this.zoom = Math.max(1, this.zoom + delta);
this.el.setAttribute('camera', 'zoom', this.zoom);
}
});
</script>
</head>
<body>
<a-scene>
<a-assets>
<img id="panorama" src="/static/panorama.jpg">
</a-assets>
<a-sky src="#panorama"></a-sky>
<a-camera zoom-controls="speed: 3">
<a-cursor
color="white"
max="100"
fuse="false"
fuseTimeout="1500"
scale="2 2 2"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: white; shader: flat"
></a-cursor>
</a-camera>
</a-scene>
</body>
</html>
4. Put the panorama image into the static folder of the Flask application (the default is static). In this example, we use a panorama named panorama.jpg. ()
5. Run the Flask application:
python app.py
6. Operation effect:
7. Online experience: http://36.40.91.202:5005/ The opening is relatively slow, and it is only open until 2023/05/31.
