如何在Django项目中集成Marzipano 360媒体查看器？

Hey there! Let's walk through how to migrate your Marzipano example into a Django project, with a focus on getting those tile images loading correctly. Here's a step-by-step breakdown:

1. First, Organize Your Static Files in Django #

Django relies on a static/ directory for serving static assets. Here's how to structure your Marzipano files:

• Create a subdirectory like static/marzipano/ in your Django app (or project-level static folder if you prefer).
• Copy your entire tiles/ folder into static/marzipano/tiles/ (keep all subfolders and image files exactly as they are).
• Also move vendor/, img/, data.js, index.js, and styles.css into static/marzipano/ so the structure mirrors your original example.

2. Find Where Marzipano References Tile Paths #

You're right that the tile paths are defined in JavaScript—usually in either data.js or index.js. Marzipano uses an ImageUrlSource to point to tile image templates, so look for code that looks like this:

// Common pattern in index.js
var source = new Marzipano.ImageUrlSource.fromString(
  "tiles/{z}/{f}/{y}/{x}.jpg"
);

Or if your example uses a pre-defined scene config (often in data.js):

// Example from data.js
var scenes = {
  my360scene: {
    source: {
      url: "tiles/{z}/{f}/{y}/{x}.png" // This is your tile path template
    },
    // Other scene settings...
  }
};

The {z}/{f}/{y}/{x} part is Marzipano's placeholder for zoom level, face, y-coordinate, and x-coordinate—don't change that part! You just need to update the base path leading to your tiles.

3. Update the Tile Path for Django's Static System #

Django doesn't let you use template tags directly in .js files, so here are two reliable ways to fix the path:

Option 1: Pass the Static URL via a Global Variable (Recommended) #

In your Django template (rename your original index.html to something like marzipano_viewer.html), add this at the top (after loading static tags):

{% load static %}

<script>
  // Define a global variable with the base path to your tiles
  window.MARZIPANO_TILES_BASE = "{% static 'marzipano/tiles/' %}";
</script>

Then update the path in your JS file to use this global variable:

// Updated in index.js or data.js
var source = new Marzipano.ImageUrlSource.fromString(
  window.MARZIPANO_TILES_BASE + "{z}/{f}/{y}/{x}.jpg"
);

Option 2: Hardcode the Full Static Path (Less Flexible) #

If your Django STATIC_URL is set to /static/ (the default), you can directly replace the tile path with the full static URL:

var source = new Marzipano.ImageUrlSource.fromString(
  "/static/marzipano/tiles/{z}/{f}/{y}/{x}.jpg"
);

Note: This works but isn't ideal if you ever change your STATIC_URL later.

4. Update All Other Static References in Your Template #

Don't forget to update links to your CSS, JS, and other assets in the template using Django's {% static %} tag:

<link rel="stylesheet" href="{% static 'marzipano/styles.css' %}">
<script src="{% static 'marzipano/vendor/marzipano.js' %}"></script>
<script src="{% static 'marzipano/data.js' %}"></script>
<script src="{% static 'marzipano/index.js' %}"></script>

5. Test and Troubleshoot #

• Run your Django server and load the template. Open your browser's Network tab in DevTools to check if tile images are loading (look for 200 status codes, not 404s).
• If you get 404s: Double-check the tile path in your JS, ensure the tiles/ folder structure matches exactly, and confirm you've run python manage.py collectstatic if you're in production mode.

内容的提问来源于stack exchange，提问作者Negotiare