{"id":26894611,"url":"https://github.com/brianoy/minecraft-head-viewer","last_synced_at":"2025-04-01T00:49:02.430Z","repository":{"id":285243393,"uuid":"957400785","full_name":"brianoy/minecraft-head-viewer","owner":"brianoy","description":"Minecraft 3D Head Viewer with Textures - Three.js","archived":false,"fork":false,"pushed_at":"2025-03-30T15:05:43.000Z","size":30,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T15:24:37.344Z","etag":null,"topics":["minecraft","minecraft-skin","minecraft-texture","skin-viewer","three-js","threejs","vibe-coding","web3d"],"latest_commit_sha":null,"homepage":"https://brianoy.github.io/minecraft-head-viewer/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brianoy.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":"2025-03-30T09:22:13.000Z","updated_at":"2025-03-30T15:05:46.000Z","dependencies_parsed_at":"2025-03-30T15:34:46.887Z","dependency_job_id":null,"html_url":"https://github.com/brianoy/minecraft-head-viewer","commit_stats":null,"previous_names":["brianoy/minecraft-head-viewer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianoy%2Fminecraft-head-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianoy%2Fminecraft-head-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianoy%2Fminecraft-head-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianoy%2Fminecraft-head-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brianoy","download_url":"https://codeload.github.com/brianoy/minecraft-head-viewer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246563376,"owners_count":20797446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["minecraft","minecraft-skin","minecraft-texture","skin-viewer","three-js","threejs","vibe-coding","web3d"],"created_at":"2025-04-01T00:49:01.787Z","updated_at":"2025-04-01T00:49:02.424Z","avatar_url":"https://github.com/brianoy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# minecraft-head-viewer\nA simple Minecraft head texture viewer built using Three.js! Display and interact with Minecraft-style head textures in 3D, rotate smoothly, and explore how texture mapping works in real-time.\n\n![270x270 (2)](https://github.com/user-attachments/assets/eb446fec-8ce8-48d3-92d3-df1db1bc73ec)\n\n**This demo was recorded from a browser using screen recording. Afterward, I edited it in Premiere to remove the background and exported it as a 270x270 GIF at 50 FPS using the optical flow frame interpolation method.**\n\n# ✨ Features\n3D Rendering: View Minecraft skin textures mapped onto a 3D model (cube).\n\nSmooth Animation: Textured head rotates smoothly on the Y and Z axes with an oscillating effect.\n\nAnti-aliasing: Ensures smooth edges and clean rendering even during fast rotations.\n\nInteractive: Supports future features accelerometer\n\n| 功能            | Android Chrome | Apple Safari | Apple Chrome |\n|---------------|:--------------:|:------------:|:------------:|\n| 加速計轉動    | ✅ \u003echrome 67 支援        | ❌ 不支援    | ❌ 不支援    |\n\n# 🔧 Usage\n### Clone the repository\n\n`git clone https://github.com/your-username/minecraft-head-textures-viewer.git`\n\n### Open the project\n\nImportant: To run this project, you must serve it through a local or remote server. Simply opening the index.html file directly in your browser may cause certain features (like three.js) to not work.\n\nYou can use VS Code Live Server, http-server, or any other local server tool to serve the project.\n\n\n### Mobile Device Functionality\n\nIf you intend to use mobile features like device orientation (for rotation), make sure the website is served over HTTPS.\n\nHTTP will prevent access to device orientation APIs on most mobile devices due to security restrictions.\n\nFor local testing, use tools like ngrok to create an HTTPS tunnel for your local server or you can use Python code to start an HTTPS server locally.\n\nGenerate the certificate in the cmd, and fill in the information according to the steps to generate the server.pem file\n```bash\nopenssl req -new -x509 -keyout server.pem -out server.pem -days 365 -nodes\n```\n\nRun this python code to host a https server locally\n```python\nimport http.server\nimport ssl\n\nPORT = 4443\nHandler = http.server.SimpleHTTPRequestHandler\n\nhttpd = http.server.HTTPServer((\"0.0.0.0\", PORT), Handler)\n\n# 使用 SSLContext\ncontext = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)\ncontext.load_cert_chain(certfile=\"server.pem\")\n\nhttpd.socket = context.wrap_socket(httpd.socket, server_side=True)\n\nprint(f\"Serving HTTPS on port {PORT}\")\nhttpd.serve_forever()\n```\n\nThen, Browse `https://localhost:4443/index.html`.\n\n### Modify Skin Textures\n\nTo use your custom textures, replace the texture path in `head_viewer_script.js` at `defaultSkinUrl`, or just read the file in your computer.\n\n# ⚙️ How It Works\nThree.js handles rendering and texture mapping of a cube with Minecraft-style head textures.\n\nThe cube rotates on the Y and Z axes, oscillating between 0 and 0.2 radians, giving it a dynamic, smooth animation.\n\nAnti-aliasing and anisotropic filtering improve the overall visual quality.\n\n# 🎨 Customize\n\nBackground color: Modify the scene.background or renderer.setClearColor() to set a custom background.\n\n# 📄 License\nThis project is open-source under GPL-3.0 license.\n\n# 👾 Contribute\nFeel free to open issues, and submit pull requests for enhancements and fixes. Contributions are welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianoy%2Fminecraft-head-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrianoy%2Fminecraft-head-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianoy%2Fminecraft-head-viewer/lists"}