ไฟล์ประกอบการรียน

วิชา COMP281 เทอม 1/2568

Week05

3D Model Download https://www.sketchfab.com

• ให้เลือก format glTF หรือ glb

Blender Download https://www.blender.org

• ใช้สร้างหรือแก้ไข Model / Scene สามารถประหยัดเวลาในการเตรียม Scene สำหรับ Three.js ได้

Basic workshop

HTML File	JavaScript File	เนื้อหา
01-loader.html	01-loader.js	การใช้ Loader โหลดไฟล์ 3D
02-scene-management.html	02-scene-management.js	เทคนิคการจัดการ Scene
03-fetch-backend.html	03-fetch-backend.js	การดึงข้อมูลด้วย fetch()
	week05-module.js	module สำหรับใช้ใน Week05

Introduction to Frontend/Backend

• Install python form https://www.python.org/downloads/
• สร้าง Visual Environment

python -m venv cg-env

• activate Visual Environment ที่สร้าง

<path>/cg-env/Scripts/activate.bat

เมื่อทำแล้วจะมี (cg-env) ที่ Command Prompt

• ติดตั้ง flask (web server library)

pip install flask python-dotenv

flask template ใน Week05

flask
├──	static
|	└── app.js
├── templates
|	└── index.html
└── app.py

• รัน flask app (ต้อง activate venv "cg-env" ก่อน)

cd <path>/flask/
python app.py

แล้วไปที่ Web Browser พิมพ์ http://127.0.0.1:5000