{"id":24069520,"url":"https://github.com/gbrogio/matterport-sdk-angular","last_synced_at":"2025-07-08T10:36:06.652Z","repository":{"id":245687290,"uuid":"818948248","full_name":"gbrogio/matterport-sdk-angular","owner":"gbrogio","description":"Using MatterPort SDK to add markers/tags in my 3D place.","archived":false,"fork":false,"pushed_at":"2024-06-23T11:58:59.000Z","size":156,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T13:02:46.391Z","etag":null,"topics":["angular-17","matterport"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gbrogio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-06-23T10:36:51.000Z","updated_at":"2024-06-23T11:59:02.000Z","dependencies_parsed_at":"2024-06-28T03:15:11.263Z","dependency_job_id":null,"html_url":"https://github.com/gbrogio/matterport-sdk-angular","commit_stats":null,"previous_names":["gbrogio/matterport-sdk-angular"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gbrogio/matterport-sdk-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gbrogio%2Fmatterport-sdk-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gbrogio%2Fmatterport-sdk-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gbrogio%2Fmatterport-sdk-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gbrogio%2Fmatterport-sdk-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gbrogio","download_url":"https://codeload.github.com/gbrogio/matterport-sdk-angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gbrogio%2Fmatterport-sdk-angular/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264251096,"owners_count":23579624,"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":["angular-17","matterport"],"created_at":"2025-01-09T14:57:59.286Z","updated_at":"2025-07-08T10:36:06.630Z","avatar_url":"https://github.com/gbrogio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Interactive Exploration with Matterport in \u003cimg src=\"./public/favicon.ico\" alt=\"angular\" style=\"width: 30px; transform: translate(8px, 4px);\"\u003e\n\nThis project explores the potential of Angular 17 for creating engaging and interactive 3D experiences. By leveraging the Matterport platform (or a similar 3D space provider), the project aims to: **Enhance User Engagement**, **Unlock New Possibilities**, **Push the Boundaries**.\n\nThis project can serve as a valuable learning experience for developers interested in:\n\n*Exploring the potential of 3D in web development* - *Learning how to integrate Angular with 3D platforms* - *Building interactive and engaging user interfaces* - *Pushing the boundaries of web technology*\n\n## Pre-Requisites\n\n* Node.js and npm (or yarn)\n* The Angular development environment (ng)\n\n## Installation Steps\n\n### Clone the Repository\n\nOpen a terminal or command prompt.\\\nNavigate to the directory where you want to clone the project.\n\nUse the git clone command followed by the URL of your GitHub repository. For example:\n\n```bash\ngit clone https://github.com/gbrogio/matterport-sdk-angular.git\n```\n\n### Install Dependencies\n\nNavigate to the project directory you just cloned:\n\n```bash\ncd your-project-name\n```\n\n```bash\nnpm install\n```\n\n### Set up your Matterport SDK Key\n\nYou will be need a *Matterport 3D spaces*, and *Matterport SDK key*.\\\nFollow [Matterport developer portal](https://matterport.com/developers).\nStore the key securely in your environment variables (avoid committing it to your GitHub repository!). You can find instructions on setting up environment variables on the official documentation for your operating system.\n\n### Running the Application\n\nStart the Development Server:\\\nIn your terminal, within the project directory, run:\n\n```bash\nng serve\n```\n\nThis will start the Angular development server, which typically runs on [http://localhost:4200](http://localhost:4200) by default. You can access the application in your web browser at this URL.\n\n## HTML Template Configuration\n\n```html\n\u003c!-- Replace \u003cMODEL_KEY\u003e to your place model id in Matterport --\u003e\n\u003ciframe #iframe src=\"https://my.matterport.com/show?m=\u003cMODEL_KEY\u003e\u0026hr=0\u0026title=0\" frameBorder=\"0\" allowFullScreen\u003e\u003c/iframe\u003e\n\n\u003c!-- Elements for get specific position in model view --\u003e\n\u003cbutton #button type=\"button\"\u003e...\u003c/button\u003e\n\u003cp #text\u003e\u003c/p\u003e\n```\n\n*#iframe*, *#button*, *#text* are essential to get these elements into `app.component.ts`\n\n## Button Position\n\nAfter a delay without any move, a button will be appears in screen. with this button you can get every position in your model, and use it for create Tags.\n\n\u003cimg src=\"./public/button.png\" alt=\"button\" style=\"width: 80px; transform: translate(8px, 4px);\"\u003e\n\nThe button only appears if you stay with mouse in your iframe.\n\n## Create a Tag\n\nFor create a tag you can use the code bellow:\n\n```ts\nasync ngAfterViewInit() {\n  // code above...\n\n  await this.createTag({\n    html: `\n      \u003ch1\u003ePlace your HTML here\u003c/h1\u003e\n    `,\n    position: { x: ..., y: ..., z: ... },\n    offset: { x: ..., y: ..., z: ... },\n    icon: '...', // you can see all icons in https://matterport.github.io/showcase-sdk/tags_icons_reference.html \n    color: '#5f5bf9',\n  })\n\n  // code bellow...\n```\n\nFor more performance you can paste all tags creation in a `await Promise.all([...])`\n\n```ts\n// code above...\n\nawait Promise.all([\n  this.createTag({...}),\n  this.createTag({...}),\n  this.createTag({...}),\n  this.createTag({...}),\n])\n\n// code bellow...\n```\n\n### Roadmap for structure\n\n```bash\n\u003e src\n  | \u003e app\n  |   |- app.component.css\n  |   |- app.component.html\n  |   |- app.component.ts\n  |   |- app.config.ts\n  |   |- app.routes.ts\n  |\n  | \u003e types\n  |   |- matter-port-icons.ts\n  | \u003e types\n  |   |- hex-to-rgb.ts\n  |\n  |- index.html\n  |- main.ts\n  |- styles.css\n\npackage.json\nangular.json\nbun.lockb\n\ntsconfig.app.json\ntsconfig.json\ntsconfig.json\n\n.editorconfig\n.gitignore\n\nREADME.md\n```\n\nOBS: Remember that you need replace the \u003cMODEL_KEY\u003e and \u003cMATTER_PORT_SDK_KEY\u003e for the project works.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgbrogio%2Fmatterport-sdk-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgbrogio%2Fmatterport-sdk-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgbrogio%2Fmatterport-sdk-angular/lists"}