{"id":15021311,"url":"https://github.com/outmindkjg/ngx3js-module","last_synced_at":"2025-10-28T03:31:14.606Z","repository":{"id":143897167,"uuid":"393602292","full_name":"outmindkjg/ngx3js-module","owner":"outmindkjg","description":"Angular \u0026 Javascript 3D library","archived":false,"fork":false,"pushed_at":"2022-02-21T05:33:40.000Z","size":345365,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-31T04:29:36.022Z","etag":null,"topics":["angular","augmented-reality","canvas","examples","html5","ngx3js","svg","threejs","typescript","virtual-reality","webaudio","webgl","webgpu","webxr"],"latest_commit_sha":null,"homepage":"https://outmindkjg.github.io/ngx3js-doc","language":"TypeScript","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/outmindkjg.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":"2021-08-07T06:38:34.000Z","updated_at":"2022-05-18T06:52:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"9a115f7b-6f8a-494f-b730-4386abdf1914","html_url":"https://github.com/outmindkjg/ngx3js-module","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/outmindkjg%2Fngx3js-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outmindkjg%2Fngx3js-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outmindkjg%2Fngx3js-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outmindkjg%2Fngx3js-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/outmindkjg","download_url":"https://codeload.github.com/outmindkjg/ngx3js-module/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238590593,"owners_count":19497351,"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","augmented-reality","canvas","examples","html5","ngx3js","svg","threejs","typescript","virtual-reality","webaudio","webgl","webgpu","webxr"],"created_at":"2024-09-24T19:56:26.002Z","updated_at":"2025-10-28T03:31:04.583Z","avatar_url":"https://github.com/outmindkjg.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/ngx3js"],"categories":[],"sub_categories":[],"readme":"ngx3js\n========\n\n[![NPM Package][npm]][npm-url]\n[![NPM Downloads][npm-downloads]][npmtrends-url]\n\n### Angular \u0026 Javascript 3D library ###\n\nThe aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library in angular. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.\n\n[![Buy Me A Coffee][buymeacoffee-image]][buymeacoffee-url]\n\n\n[Home](https://outmindkjg.github.io/ngx3js-doc/#) \u0026mdash;\n[Examples](https://outmindkjg.github.io/ngx3js-doc/#/examples/) \u0026mdash;\n[Documentation](https://outmindkjg.github.io/ngx3js-doc/#/docs) \u0026mdash;\n[API Documentation](https://outmindkjg.github.io/ngx3js-doc/docs)\n\n## Usage ##\n\nThis code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a `WebGL` renderer for the scene and camera, and it adds that viewport to the `document.body` element. Finally, it animates the cube within the scene for the camera.\n\n\nTo Install you can choose one from two method. \n\n### Ngx3js Install - Method 1 - Recommanded ###\n```sh\n# install shell script\nnpm install -g @angular/cli\nnpm install --save ngx3js\nnode ./node_modules/ngx3js/bin/patch.js\nnpm install \n```\n\n### Ngx3js Install - Method 2 ###\n```sh\n# install by npm\nnpm install -g @angular/cli\nnpm install --save ngx3js\nnpm install --save three@0.137.5\nnpm install --save-dev @types/three@0.137.0\n```\n\n### Imports Ngx3JsModule - Required ###\n\nTo use ngx3js have to import Ngx3JsModule in src/app/app.module.ts or some other place modle.ts\n```ts\n// src/app/app.module.ts\n\nimport { Ngx3JsModule } from 'ngx3js';\n\n@NgModule({\n\t....\n\timports: [..., Ngx3JsModule],\n\t....\n})\n```\n\n### Change Default Assets Url - optional ###\n\nIf you chhange assets in angular.json file must be setted!\n\n```ts\n// src/app/app.component.ts\n\nimport { ThreeUtil } from 'ngx3js';\n\nexport class AppComponent {\n\tngOnInit(): void {\n\t  // any where use ngx3js for just one time\n\t  ThreeUtil.setAssetUrl('assets/examples/');\n\t}\n}\n```\n\n\n### Change angular.json for basic assets ###\n\nif you need lottie_canvas add \"node_modules/ngx3js/assets/js/libs/lottie_canvas.js\" to scripts like below.\nif you need DRACOExporter add \"node_modules/ngx3js/assets/js/libs/draco/draco_encoder.js\" to scripts like below.\n\nthe assets url can be changed by your site. \n\n// angular.json\n```json\n{\n  \"projects\": {\n    \"your-project-name\": {\n      \"architect\": {\n        \"build\": {\n          \"options\": {\n            \"assets\": [\n                {\n                    \"glob\": \"**/*\",\n                    \"input\": \"./node_modules/ngx3js/assets\",\n                    \"output\": \"/assets/examples/\"\n                }\n            ],\n            \"scripts\": [\n              \"node_modules/ngx3js/assets/js/libs/lottie_canvas.js\",\n              \"node_modules/ngx3js/assets/js/libs/draco/draco_encoder.js\"\n            ] \n          },\n        },\n      }\n    }\n  },\n}\n```\n\n### Change tsconfig.json for fs - optional ###\n\n// tsconfig.json\n```json\n{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"fs\": [\"./node_modules/fs-web\"]\n    }\n  }\n}\n```\n\n### Add Code to your template ###\n\n\n```html\n\u003c!-- src/app/app.component.html --\u003e\n\u003cdiv style=\"width: 700px; height: 500px; display: block; position: relative\"\u003e\n  \u003cngx3js-renderer\n    [controlType]=\"'orbit'\"\n    [controlOptions]=\"{\n      enablePan: false,\n      enableDamping: true,\n      minDistance: 10,\n      maxDistance: 500\n    }\"\n    [statsMode]=\"0\"\n    [antialias]=\"true\"\n    [clearColor]=\"'0x000000'\"\n    [shadowMapEnabled]=\"true\"\n  \u003e\n    \u003cngx3js-lookat [x]=\"0\" [y]=\"0\" [z]=\"0\"\u003e\u003c/ngx3js-lookat\u003e\n    \u003cngx3js-camera\n      [type]=\"'perspective'\"\n      [fov]=\"40\"\n      [near]=\"1\"\n      [far]=\"1000\"\n      [viewport]=\"true\"\n      [x]=\"0\"\n      [y]=\"0\"\n      [width]=\"'100%'\"\n      [height]=\"'100%'\"\n    \u003e\n      \u003cngx3js-position [x]=\"-50\" [y]=\"0\" [z]=\"50\"\u003e\u003c/ngx3js-position\u003e\n    \u003c/ngx3js-camera\u003e\n    \u003cngx3js-scene #scene\u003e\n      \u003cngx3js-light [type]=\"'AmbientLight'\" [color]=\"'0x6688cc'\"\u003e\u003c/ngx3js-light\u003e\n      \u003cngx3js-light\n        [type]=\"'directional'\"\n        [color]=\"'0xffffff'\"\n        [intensity]=\"1\"\n        [castShadow]=\"true\"\n      \u003e\n        \u003cngx3js-position [x]=\"-3\" [y]=\"10\" [z]=\"-10\"\u003e\u003c/ngx3js-position\u003e\n      \u003c/ngx3js-light\u003e\n      \u003cngx3js-mesh\u003e\n        \u003cngx3js-position [x]=\"0\" [y]=\"0\" [z]=\"0\"\u003e\u003c/ngx3js-position\u003e\n        \u003cngx3js-geometry\n          [type]=\"'Icosahedron'\"\n          [radius]=\"20\"\n          [detail]=\"2\"\n        \u003e\u003c/ngx3js-geometry\u003e\n        \u003cngx3js-material\n          [type]=\"'meshlambert'\"\n          [color]=\"'0xffffff'\"\n          [wireframe]=\"true\"\n        \u003e\u003c/ngx3js-material\u003e\n      \u003c/ngx3js-mesh\u003e\n      \u003cngx3js-mesh\u003e\n        \u003cngx3js-position [x]=\"0\" [y]=\"0\" [z]=\"0\"\u003e\u003c/ngx3js-position\u003e\n        \u003cngx3js-geometry\n          [type]=\"'TextGeometry'\"\n          [text]=\"'Ngx3Js'\"\n          [font]=\"'gentilis_regular'\"\n          [size]=\"20\"\n          [height]=\"5\"\n          [center]=\"true\"\n        \u003e\u003c/ngx3js-geometry\u003e\n        \u003cngx3js-material\n          [type]=\"'meshlambert'\"\n          [color]=\"'0xff0000'\"\n        \u003e\u003c/ngx3js-material\u003e\n      \u003c/ngx3js-mesh\u003e\n    \u003c/ngx3js-scene\u003e\n  \u003c/ngx3js-renderer\u003e\n\u003c/div\u003e\n```\n\n## Cloning this repository ##\n\nCloning the repo with all its history results in a ~2 GB download. If you don't need the whole history you can use the `depth` parameter to significantly reduce download size.\n\n### ngx3js-module ###\n\n```sh\ngit clone --depth=1 https://github.com/outmindkjg/ngx3js-module.git\ncd ngx3js-module\n```\n\n### ngx3js - examples and api docs ###\n\nngx3js module required to be reinstall.\n```sh\ngit clone --depth=1 https://github.com/outmindkjg/ngx3js.git\n\ncd ngx3js\nnpm uninstall ngx3js \u0026\u0026 npm install ngx3js\nnode ./node_modules/ngx3js/bin/patch.js\n```\n\n\n## Releases \u0026amp; ISSUE \u0026amp; Ask Question ##\n\n - [Releases - GitHub](https://github.com/outmindkjg/ngx3js-module/releases)\n - [ISSUE - GitHub](https://github.com/outmindkjg/ngx3js-module/issues)\n - [Email - outmind0@gmail.com](outmind0@gmail.com)\n\n\n[npm]: https://img.shields.io/npm/v/ngx3js\n[npm-url]: https://www.npmjs.com/package/ngx3js\n[build-size]: https://badgen.net/bundlephobia/minzip/ngx3js\n[build-size-url]: https://bundlephobia.com/result?p=ngx3js\n[npm-downloads]: https://img.shields.io/npm/dw/ngx3js\n[npmtrends-url]: https://www.npmtrends.com/ngx3js\n[buymeacoffee-image]: https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\n[buymeacoffee-url]: https://www.buymeacoffee.com/ngx3js\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foutmindkjg%2Fngx3js-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foutmindkjg%2Fngx3js-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foutmindkjg%2Fngx3js-module/lists"}