2026年3月26日 星期四

[水井USR] 在Pythonanaywhere上用Django網站顯示3D模型

 


原始網站：https://aframe.io/examples/showcase/modelviewer/
成果網址：https://armodelviewer.pythonanywhere.com/

1. 先用Pythonanywhere建立一個Django的專案-名稱：ARmodelViewer

2. 利用console建立app



3.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
"""
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",
]

4. 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
"""
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'),
]

6. ARmodelViewer/myapp/views.py
1
2
3
4
from django.shortcuts import render

def model_viewer(request):
    return render(request, 'ar_model_viewer.html')

7.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
{% 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 主程式庫（使用官方最新穩定版 CDN） -->
  <script src="https://aframe.io/releases/1.7.1/aframe.min.js"></script>

  <!-- 自訂的 A-Frame components（請放到您的 static 資料夾） -->
  <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: #triceratops; title: Triceratops"
    xr-mode-ui="XRMode: xr">

    <a-assets timeout="10000">
      <!--
        Model source: https://sketchfab.com/3d-models/triceratops-d16aabe33dc24f8ab37e3df50c068265
        Model author: https://sketchfab.com/VapTor
        Model license: Sketchfab Standard
      -->
      <a-asset-item id="triceratops"
        src="https://cdn.aframe.io/examples/ar/models/triceratops/scene.gltf"
        response-type="arraybuffer"></a-asset-item>

      <img id="shadow" src="{% static 'images/shadow.png' %}">

    </a-assets>

  </a-scene>
</body>
</html>

8.從A-Frame網站上下載js檔案，先按View Source，從Github上下載。


9.把js上傳到網站
ARmodelViewer/static/js


10.重新整理(Reload)，開啟網站，就可以看到模型如文章剛開始的第一張圖。


張貼者： 於
標籤： , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)