{"id":13602373,"url":"https://github.com/sanyuered/WeChat-MiniProgram-AR-3D","last_synced_at":"2025-04-11T08:32:26.550Z","repository":{"id":41271388,"uuid":"208857237","full_name":"sanyuered/WeChat-MiniProgram-AR-3D","owner":"sanyuered","description":"A WeChat MiniProgram 3D that includes a Panorama Viewer and a 3D Viewer using the device orientation control.","archived":false,"fork":false,"pushed_at":"2022-01-03T03:58:32.000Z","size":3288,"stargazers_count":201,"open_issues_count":2,"forks_count":45,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-07T05:39:08.841Z","etag":null,"topics":["3d-viewer","ar","augumented-reality","device-orientation-control","panorama-viewer","threejs","wechat","wechat-app","wechat-mini-program"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sanyuered.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}},"created_at":"2019-09-16T17:23:35.000Z","updated_at":"2024-10-31T16:42:27.000Z","dependencies_parsed_at":"2022-09-19T18:42:32.132Z","dependency_job_id":null,"html_url":"https://github.com/sanyuered/WeChat-MiniProgram-AR-3D","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanyuered%2FWeChat-MiniProgram-AR-3D","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanyuered%2FWeChat-MiniProgram-AR-3D/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanyuered%2FWeChat-MiniProgram-AR-3D/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanyuered%2FWeChat-MiniProgram-AR-3D/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sanyuered","download_url":"https://codeload.github.com/sanyuered/WeChat-MiniProgram-AR-3D/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248361625,"owners_count":21090944,"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":["3d-viewer","ar","augumented-reality","device-orientation-control","panorama-viewer","threejs","wechat","wechat-app","wechat-mini-program"],"created_at":"2024-08-01T18:01:21.536Z","updated_at":"2025-04-11T08:32:21.538Z","avatar_url":"https://github.com/sanyuered.png","language":"JavaScript","readme":"[Chinese README](https://zhuanlan.zhihu.com/p/82773324)  \r\n\r\n## Updated\r\n\r\n| Date　　　| Update |\r\n| -- | -- |\r\n| 2022-01-02 | New: Gamma color space correction. |\r\n| 2021-09-07 | New: Added a compass and map demo. Update: Fixed the value of the Device Orientation Control on Android is opposite to iOS. |\r\n| 2021-02-25 | New: Scan a QR code to update the url of the gltf model. Update: 1. add a directional light for the model viewer to make the model have shadows. 2. add the device pixel ratio for the panorama viewer to make the picture clear. |\r\n| 2019-10-31 | Updated: Use a new Gltf loader modified by \"wechat-miniprogram\". Support .glb format without textures and .gltf format. |\r\n| 2019-09-17 | New: A WeChat MiniProgram 3D that includes a Panorama Viewer and a 3D Viewer using the device orientation control. |\r\n\r\n## Introduction on WeChat MiniProgram 3D\r\n\r\nThree.js is a JavaScript 3D library.\r\n\r\n[Three.js](https://github.com/mrdoob/three.js)\r\n\r\nThere is a WeChat MiniProgram adapted version of Three.js.\r\n\r\n[threejs-miniprogram](https://github.com/wechat-miniprogram/threejs-miniprogram)\r\n \r\nIndex Page\r\n\r\n![avatar](screenshot/1.jpg)\r\n\r\n## 3D Viewer\r\n\r\n![avatar](screenshot/4.gif)\r\n\r\nWhen click the \"Model Viewer\" button, a 3D viewer will be showed.\r\n\r\n![avatar](screenshot/5.jpg)\r\n\r\nWe can rotate the screen by a device orientation control or using guestures.\r\n\r\n![avatar](screenshot/6.jpg)\r\n\r\n## Panorama Viewer\r\n\r\nWhen click the \"Panorama Viewer\" button, a panorama viewer will be showed.\r\n\r\nportrait screen\r\n\r\n![avatar](screenshot/2.jpg)\r\n\r\nlandscape screen\r\n\r\n![avatar](screenshot/3.jpg)\r\n\r\nWhen start a device motion, the device orientation control will rotate the screen.\r\n\r\nWhen stop a device motion, use guestures to rotate the screen.\r\n\r\n## Compass and Map Viewer\r\n\r\nWhen click the \"Compass Viewer\" button, a Compass and Map will be showed.\r\n\r\n![avatar](screenshot/7.jpg)\r\n\r\nClicking on the map control will search for buildings near the clicked position. \r\n\r\nEntering tickets, roads and landmarks in the input box will locate the search position on the map control.\r\n\r\n## How to build\r\n\r\nThe Mini-program depends on a \"threejs-miniprogram\" npm package. \r\n\r\nstep 1: npm install\r\n\r\nstep 2: run \"微信开发者工具--工具--构建npm\", a folder \"miniprogram_npm\" will be updated.\r\n\r\nThe project includes a folder \"miniprogram_npm\" precompiled.\r\n\r\nFile: /package.json\r\n\r\n```javascript\r\n  \"dependencies\": {\r\n    \"threejs-miniprogram\": \"0.0.2\"\r\n  }\r\n```\r\n\r\n## What changes to GLTFLoader.js\r\n\r\nYou can search a keyword \"2019.9.11 modified\" in GLTFLoader.js. The search result is a code modified.\r\n\r\nFor example, added a export of function \"GLTF_Loader\". Use the function to set the \"THREE\" object into the \"GLTFLoader.js\" module.\r\n\r\nFile: /utils/GLTFLoader.js\r\n\r\n```javascript\r\n   // 2019.9.11 modified\r\n   // THREE.GLTFLoader = ( function () {\r\n   export function GLTF_Loader(THREE) {\r\n```\r\n## Set your website url of models\r\n\r\nThe project includes a gltf model that are depolyed on a website. The default value of parameter \"modelUrl\" is a website url that may be very slow on your network. You can replace the default url with a web site url.\r\n\r\nDownload models: https://github.com/sanyuered/sanyuered.github.io/tree/master/gltf\r\n\r\n```javascript\r\n    // set your site url of a gltf model\r\n    const modelUrl = 'https://sanyuered.github.io/gltf/robot.glb';\r\n    //const modelUrl = 'http://127.0.0.1/robot.glb';\r\n```\r\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanyuered%2FWeChat-MiniProgram-AR-3D","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanyuered%2FWeChat-MiniProgram-AR-3D","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanyuered%2FWeChat-MiniProgram-AR-3D/lists"}