{"id":19199058,"url":"https://github.com/leungll/baymax-penaltykick","last_synced_at":"2026-04-14T06:33:50.308Z","repository":{"id":105367035,"uuid":"279468230","full_name":"leungll/Baymax-PenaltyKick","owner":"leungll","description":"Baymax-PenaltyKick, Software Development Based on Graphics Engine course, Spring 2020, NENU ","archived":false,"fork":false,"pushed_at":"2024-05-12T14:01:10.000Z","size":7533,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-29T13:45:30.266Z","etag":null,"topics":["apache24","graphics-engine","nenu","three-js","vscode","windows10"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leungll.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-14T03:09:27.000Z","updated_at":"2024-11-13T20:05:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"7ffc03d1-a88b-4dd8-b042-ae58938784b4","html_url":"https://github.com/leungll/Baymax-PenaltyKick","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/leungll/Baymax-PenaltyKick","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leungll%2FBaymax-PenaltyKick","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leungll%2FBaymax-PenaltyKick/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leungll%2FBaymax-PenaltyKick/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leungll%2FBaymax-PenaltyKick/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leungll","download_url":"https://codeload.github.com/leungll/Baymax-PenaltyKick/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leungll%2FBaymax-PenaltyKick/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31785677,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apache24","graphics-engine","nenu","three-js","vscode","windows10"],"created_at":"2024-11-09T12:25:29.363Z","updated_at":"2026-04-14T06:33:50.293Z","avatar_url":"https://github.com/leungll.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 基于图形引擎的软件开发-期末课设\n**Baymax-PenaltyKick**, Software Development Based on Graphics Engine course, 2020 Spring, NENU \n\n![Passing](https://img.shields.io/badge/JavaScript-passing-red)\n![Server](https://img.shields.io/badge/Server-Apache24-success)\n![IDE](https://img.shields.io/badge/IDE-Microsoft%20VS%20Code%20x64-yellow)\n![Version](https://img.shields.io/badge/version-v2.0-orange)\n![License](https://img.shields.io/badge/License-Apache%202.0-blue)\n\n## 基本需求\n\u003e部署一个场景，场景内有物体运动，可以切换视角\n\n## 实现功能\n- 使用 `WebGL` 搭建三维场景\n- 视角切换：相机控件 `OrbitControls`，对场景进行缩放、旋转操作\n- 纹理贴图：给场景内的物体、人物贴上纹理，呈现立体感\n- `Group` 组件：使用 `Group` 组装 `BayMax` ，实现整体运动\n- 键盘事件\n    - `addEventListener` 监听键盘按键\n    - `Enter` 键：控制大门开关\n    - `UP`、`DOWN` 键：`BayMax` 绕 `Z` 轴平移\n    - `LEFT`、`RIGHT` 键：`BayMax` 绕 `X` 轴平移\n- 鼠标事件\n    - 视角切换：\n        - 按住 `鼠标左键` ，拖动场景旋转，实现观察视角切换\n        - `鼠标中键滚轮`，对场景进行缩放操作\n    - 画面右方面板\n        - 控制足球 `自动旋转`，`停止旋转`\n        - 控制 `BayMax` 移动\n\n## 开发环境\n* System: Win10\n* IDE: Microsoft VS Code x64 1.44.2\n* Server: Apache24\n* 3D-Engine: Three.js\n\n## 相关资源\n- Three.js库：路径 `Baymax-PenaltyKick/js`\n    - 完整的 `Three.js库`：https://github.com/mrdoob/three.js\n- 服务器配置：见文档 `Apache安装及配置.docx`\n\n## 编译 \u0026 运行\n- 将项目 `Baymax-PenaltyKick` 放在本地服务器下\n- 浏览器访问端口：`localhost:你的本地端口号/Baymax-PenaltyKick/index.html`\n\n## 设计思路\n\u003e 程序的设计灵感来源于在自学 `WebGL` 编程时，偶然在网上看到一些 [博主](https://blog.csdn.net/u014529917/article/details/82801737) 搭建的 `3D` 室内场景，觉得效果很酷炫，于是照葫芦画瓢，参照网上的代码框架，自己尝试搭建一个室内场景。\n- 框架搭建：首先在场景中建立基本模型，添加房间、墙等基本元素，并调整位置\n- 添加物体：使用 `Group` 组件绘制 `Baymax`，绘制足球\n- 纹理贴图：在墙面上添加大门、海报等带有足球元素的图片\n- 加入视角切换、键盘控制、鼠标控制，实现对物体的运动操作\n\n## 页面截图\n- 初始页面\n\n    ![baymax-penalty-01](https://cdn.jsdelivr.net/gh/leungll/MyImgHosting/img/baymax-penalty-01.jpg)\n  \n- 俯瞰场景\n\n    ![baymax-penalty-02](https://cdn.jsdelivr.net/gh/leungll/MyImgHosting/img/baymax-penalty-02.jpg)\n  \n- `Baymax` 罚点球\n\n    ![baymax-penalty-03](https://cdn.jsdelivr.net/gh/leungll/MyImgHosting/img/baymax-penalty-03.jpg)\n  \n- 进门视角\n\n    ![baymax-penalty-04](https://cdn.jsdelivr.net/gh/leungll/MyImgHosting/img/baymax-penalty-04.jpg)\n  \n- 进门视角2\n\n    ![baymax-penalty-05](https://cdn.jsdelivr.net/gh/leungll/MyImgHosting/img/baymax-penalty-05.jpg)\n\n## 待改善之处\n- 键盘事件存在瑕疵：当按下 `UP`、`DOWN`、`LEFT`、`RIGHT` 键控制 `Baymax` 移动时，页面也会上下左右移动，影响体验。\n- 无法引进 `3D模型` ：尝试在场景中加载 `东京小屋` 模型，经过几天尝试，会出现黑屏、无法加载等 bug，未果。希望有时间能继续改善。\n\n    ![baymax-penalty-06](https://cdn.jsdelivr.net/gh/leungll/MyImgHosting/img/baymax-penalty-06.jpg)\n\n## References\n- [WebGL中文网](http://www.hewebgl.com)\n- [three.js Github库](https://github.com/mrdoob/three.js)\n- [jiym. 使用three.js搭建室内场景. 2018. CSDN](https://blog.csdn.net/u014529917/article/details/82801737)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleungll%2Fbaymax-penaltykick","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleungll%2Fbaymax-penaltykick","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleungll%2Fbaymax-penaltykick/lists"}