前一篇文章：在Pythonanaywhere上用Django網站顯示3D模型
本篇文章成果網站：
1.ARmodelViewer/ARmodelViewer/urls.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | """
URL configuration for ARmodelViewer project.
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/5.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
path("admin/", admin.site.urls),
path('', views.model_viewer, name='ar_model_viewer'),
path('ar-model-viewer/', views.model_viewer, name='ar_model_viewer'),
path('ar-model-viewer/<int:model_id>/', views.model_viewer, name='ar_model_viewer'),
]
|
2.ARmodelViewer/ARmodelViewer/settings.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | """
Django settings for ARmodelViewer project.
Generated by 'django-admin startproject' using Django 5.1.3.
For more information on this file, see
https://docs.djangoproject.com/en/5.1/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/5.1/ref/settings/
"""
from pathlib import Path
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/5.1/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = "django-insecure-*bq*cvi-kt)h@l4yi2mto%h($^_n5rl^6q4udiyu==j###sgaz"
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = ['ARmodelViewer.pythonanywhere.com']
# Application definition
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"myapp",
]
MIDDLEWARE = [
"django.middleware.security.SecurityMiddleware",
"django.contrib.sessions.middleware.SessionMiddleware",
"django.middleware.common.CommonMiddleware",
"django.middleware.csrf.CsrfViewMiddleware",
"django.contrib.auth.middleware.AuthenticationMiddleware",
"django.contrib.messages.middleware.MessageMiddleware",
"django.middleware.clickjacking.XFrameOptionsMiddleware",
]
ROOT_URLCONF = "ARmodelViewer.urls"
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [BASE_DIR / 'templates'],
"APP_DIRS": True,
"OPTIONS": {
"context_processors": [
"django.template.context_processors.debug",
"django.template.context_processors.request",
"django.contrib.auth.context_processors.auth",
"django.contrib.messages.context_processors.messages",
],
},
},
]
WSGI_APPLICATION = "ARmodelViewer.wsgi.application"
# Database
# https://docs.djangoproject.com/en/5.1/ref/settings/#databases
DATABASES = {
"default": {
"ENGINE": "django.db.backends.sqlite3",
"NAME": BASE_DIR / "db.sqlite3",
}
}
# Password validation
# https://docs.djangoproject.com/en/5.1/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
"NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
},
{
"NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
},
{
"NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
},
{
"NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
},
]
# Internationalization
# https://docs.djangoproject.com/en/5.1/topics/i18n/
LANGUAGE_CODE = "en-us"
TIME_ZONE = "UTC"
USE_I18N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.1/howto/static-files/
STATIC_URL = "static/"
# Default primary key field type
# https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
# default static files settings for PythonAnywhere.
# see https://help.pythonanywhere.com/pages/DjangoStaticFiles for more info
MEDIA_ROOT = '/home/ARmodelViewer/ARmodelViewer/media'
MEDIA_URL = '/media/'
STATIC_ROOT = '/home/ARmodelViewer/ARmodelViewer/static'
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "static",
]
STATIC_ROOT = BASE_DIR / 'staticfiles'
|
3.ARmodelViewer/myapp/views.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | from django.shortcuts import render, get_object_or_404 from .models import ARModel def model_viewer(request, model_id=None): if model_id: ar_model = get_object_or_404(ARModel, id=model_id, is_active=True) else: # 預設取第一個啟用的模型，或根據需求調整 ar_model = ARModel.objects.filter(is_active=True).first() if not ar_model: # 可處理無模型的情況 return render(request, 'ar_no_model.html') context = { 'ar_model': ar_model, } return render(request, 'ar_model_viewer.html', context) |
4.ARmodelViewer/myapp/models.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | from django.db import models
class ARModel(models.Model):
title = models.CharField(max_length=200, verbose_name="模型標題")
gltf_url = models.URLField(verbose_name="GLTF 模型 URL", help_text="例如：https://cdn.aframe.io/.../scene.gltf")
asset_id = models.SlugField(max_length=100, default="model", verbose_name="Asset ID")
description = models.TextField(blank=True, verbose_name="模型描述")
shadow_image = models.ImageField(upload_to='ar_shadows/', blank=True, null=True, verbose_name="陰影圖片")
is_active = models.BooleanField(default=True, verbose_name="啟用")
def __str__(self):
return self.title
class Meta:
verbose_name = "AR/VR 模型"
verbose_name_plural = "AR/VR 模型"
|
5.ARmodelViewer/myapp/admin.py
1 2 3 4 | from django.contrib import admin
from .models import ARModel
admin.site.register(ARModel)
|
6.ARmodelViewer/templates/ar_model_viewer.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | {% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Model Viewer AR - VR</title>
<meta name="description" content="Model Viewer (VR / AR) • A-Frame">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- A-Frame 主程式庫 -->
<script src="https://aframe.io/releases/1.7.1/aframe.min.js"></script>
<!-- 自訂 components -->
<script src="{% static 'js/animation-mixer.js' %}"></script>
<script src="{% static 'js/ar-shadows.js' %}"></script>
<script src="{% static 'js/model-viewer.js' %}"></script>
<script src="{% static 'js/background-gradient.js' %}"></script>
</head>
<body>
<a-scene
renderer="colorManagement: true;"
info-message="htmlSrc: #messageText"
model-viewer="gltfModel: #{{ ar_model.asset_id }}; title: {{ ar_model.title|escapejs }}"
xr-mode-ui="XRMode: xr">
<a-assets timeout="10000">
<!-- 由後台指定的模型 -->
<a-asset-item id="{{ ar_model.asset_id }}"
src="{{ ar_model.gltf_url }}"
response-type="arraybuffer"></a-asset-item>
{% if ar_model.shadow_image %}
<img id="shadow" src="{{ ar_model.shadow_image.url }}">
{% else %}
<img id="shadow" src="{% static 'images/shadow.png' %}">
{% endif %}
</a-assets>
</a-scene>
<!-- 可選：顯示模型描述 -->
{% if ar_model.description %}
<div style="position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.6); color: white; padding: 10px; border-radius: 5px;">
{{ ar_model.description }}
</div>
{% endif %}
</body>
</html>
|
7.ARmodelViewer/templates/ar_no_model.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | {% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>沒有可顯示的模型</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 100px; background: #f8f9fa; }
h1 { color: #dc3545; }
</style>
</head>
<body>
<h1>目前沒有可顯示的 AR/VR 模型</h1>
<p>請先登入 Django Admin 後台，新增至少一個 ARModel 並勾選「啟用」。</p>
<p><a href="/admin/">前往後台管理</a></p>
</body>
</html>
|
