{"id":14957450,"url":"https://github.com/lastcode802/threedview","last_synced_at":"2026-03-11T05:05:04.414Z","repository":{"id":58563439,"uuid":"532258945","full_name":"lastcode802/threedview","owner":"lastcode802","description":"This library or package is all about rendering your 3D models in way, So you can manage or get preview of your 3D models and play with them. The model loading speed in the browser depends on the user's internet speed.","archived":false,"fork":false,"pushed_at":"2022-11-07T15:13:43.000Z","size":16280,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-04T18:04:56.027Z","etag":null,"topics":["3d-model","3d-model-viewer","3d-modeling","3d-modelling","3d-models","3drendering","canvas","javascript","next-js","nextjs","nextjs-template","react","reactjs","rendering","storybook","three-obj-mtl-loader","three-orbitcontrols","threejs","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@lastcode802/threedview","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/lastcode802.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}},"created_at":"2022-09-03T12:50:38.000Z","updated_at":"2024-08-23T15:41:29.000Z","dependencies_parsed_at":"2023-01-22T15:30:31.158Z","dependency_job_id":null,"html_url":"https://github.com/lastcode802/threedview","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/lastcode802/threedview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lastcode802%2Fthreedview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lastcode802%2Fthreedview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lastcode802%2Fthreedview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lastcode802%2Fthreedview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lastcode802","download_url":"https://codeload.github.com/lastcode802/threedview/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lastcode802%2Fthreedview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30372127,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T21:41:54.280Z","status":"online","status_checked_at":"2026-03-11T02:00:07.027Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["3d-model","3d-model-viewer","3d-modeling","3d-modelling","3d-models","3drendering","canvas","javascript","next-js","nextjs","nextjs-template","react","reactjs","rendering","storybook","three-obj-mtl-loader","three-orbitcontrols","threejs","typescript"],"created_at":"2024-09-24T13:14:55.093Z","updated_at":"2026-03-11T05:04:59.405Z","avatar_url":"https://github.com/lastcode802.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- markdownlint-disable-next-line --\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"150\" src=\"https://res.cloudinary.com/lastshop802/image/upload/v1662288637/logoSheroz_w9anft.png\" alt=\"MUI logo\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003elastcode802\u003c/h1\u003e\n  \u003cimg src=\"https://res.cloudinary.com/lastshop802/image/upload/v1662310815/LibraryGF_wjl8xb.gif\" alt=\"MUI logo\"\u003e\n\n# Lastcode802 Present 3d Model View\n\nThis library render a 3d model View on React.js and Next.js\n\n## Description\nThis library or package is all about rendering your 3D models in way, So you can manage or get preview of your 3D models and play with them. \nThe model loading speed in the browser depends on the user's internet speed.\n\n#\n## Available Code\n\n```jsx\nimport * as React from 'react';\nimport { ThreedView } from \"@lastcode802/threedview\";\n\nfunction App() {\n  return (\n    \u003cThreedView\n      model3dmtl=\"./assets/IronMan/IronMan.mtl\"\n      model3dobj=\"./assets/IronMan/IronMan.obj\"\n      near={0.1}\n      positionx3d={0}\n      positiony3d={5}\n      positionz3d={20}\n      meshpositionx={0}\n      meshpositiony={3}\n      meshpositionz={0}\n      rotationx={0.0}\n      rotationy={0.01}\n      rotationz={0.0}\n      scalex={0.02}\n      scaley={0.02}\n      scalez={0.02}\n      threedviewcanvascolor=\"#263238\"\n      directionallightcolor={0xffffff}\n      directionallightintensity={1.8}\n    /\u003e\n  );\n}\n\nexport default App;\n```\nIn the interactive demo below, try changing the props and see how it affects the storybook output.\n\n[\u003cimg src=\"https://iconape.com/wp-content/files/qa/371510/svg/371510.svg\" width=\"40\"/\u003e](https://lastcode802.github.io/threedview/)\n\nDownload default 3d model use in library.\n\n[\u003cimg src=\"https://cdn.worldvectorlogo.com/logos/google-drive.svg\" width=\"40\"/\u003e](https://drive.google.com/file/d/1wpWWuF1tMPXOKk3Su2xi_oKRxrTxFYNq/view?usp=sharing)\n\n## Document\n#\n## Props\n\t\t\t\n|     prop      |      type     |     default   |   example     |\n| ------------- | ------------- | ------------- | ------------- |\n|  model3dmtl*  | string  | ./assets/IronMan/IronMan.mtl  | assests must be in the public folder  |\n| model3dobj*   | string  | ./assets/IronMan/IronMan.obj  | assests must be in the public folder  |\n|  near*        | number  |0.1  | 0.1-(-10)-1000 |\n| positionx3d*  | number  | 3  | 350-(-800000)  |\n|  positiony3d* | number  | 5  | 30-(-800000)  |\n| positionz3d*  | number  | 20  |20-(-800000)  |\n| meshpositionx*| number  | 0  | 0 |\n| meshpositiony*| number  | 3  | 0 |\n| meshpositionz*| number  | 0  | 0 |\n| rotationx*    | number  | 0  |  0-0.001|\n|  rotationy*   | number  | 0.01  | 0-0.01   |\n| rotationz*    | number  | 0  | 0-0.001  |\n|  scalex*      | number  | 0  | (0.1-0.9,0.01-0.0.9,0.0001-0.0009) |\n|  scaley*      | number  | 0.02  |  (0.1-0.9,0.01-0.0.9,0.0001-0.0009) |\n|  scalez*      | number  | 0.02  |  (0.1-0.9,0.01-0.0.9,0.0001-0.0009) |\n| threedviewcanvascolor*  | THREE.ColorRepresentation  | white  | Accepts hash vale,rgb and name of the color  |\n|  directionallightcolor*  | number | 16777215  | Accepts hash vale,rgb and name of the color  |\n| directionallightintensity*  | number  | 1.8  | 0-255  |\n| loaderColor*  | string  | red  | Accepts hash vale,rgb and name of the color  |\n| showLoader*  | bool  | true  | true-false  |\n\n# Special Mentions for Contributors\n\n\u003c!-- readme: contributors -start --\u003e\n\u003cdiv style=\"margin: 0 auto !important; overflow-y:hidden !important;\"\u003e\n\u003ctable style=\"overflow-y:hidden !important;\"\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://github.com/sharozraees802\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/52934734?v=4\" width=\"150;\" alt=\"sharozraees802\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eCreator: Muhammad Sheroz\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://github.com/Sahilnenwani\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/59645201?s=400\u0026u=f7a0e3a42e91410494c2cbbfb9d674dcbe291660\u0026v=4\"\n            width=\"150;\" alt=\"SahilNenwani\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eMaintainer: Sahil Nenwani\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://github.com/nadirdeveloper\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/63139854?v=4\" width=\"150;\" alt=\"NadirAli\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eMaintainer: Nadir Ali\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctr\u003e\n    \u003c/table\u003e\n    \u003c/div\u003e\n\n\u003chr\u003e\u003c/hr\u003e\n\u003ch1\u003eFind \u0026 contact me\u003c/h1\u003e\n\u003cp\u003e\u003ca href=\"https://www.linkedin.com/company/lastcode/\"\u003e\u003cimg alt=\"LinkedIn\" src=\"https://img.shields.io/badge/linkedin%20-%230077B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" target=\"_blank\"\u003e\u003c/a\u003e \u003ca href=\"mailto:lastcode802@gmail.com\"\u003e\u003cimg alt=\"Gmail\" src=\"https://img.shields.io/badge/Gmail-D14836?style=for-the-badge\u0026logo=gmail\u0026logoColor=white\" /\u003e\u003c/a\u003e \u003ca href=\"https://www.facebook.com/profile.php?id=100067627036290\"\u003e\u003cimg src=\"https://img.shields.io/badge/Facebook-1877F2?style=for-the-badge\u0026logo=facebook\u0026logoColor=white\" /\u003e\u003c/a\u003e \u003ca href=\"https://www.instagram.com/lastcode802/\"\u003e\u003cimg src=\"https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge\u0026logo=Instagram\u0026logoColor=white\" /\u003e\u003c/a\u003e \u003ca href=\"https://www.youtube.com/channel/UCZfZm4thtZt0drL1j7PKb4w\" target=\"_blank\"\u003e\u003cimg alt=\"Discord\" src=\"https://img.shields.io/badge/Youtube-FF0000.svg?\u0026style=for-the-badge\u0026logo=Youtube\u0026logoColor=white\" /\u003e\u003c/a\u003e  \u003ca href=\"https://chat.whatsapp.com/HDazjAi7if29K9FaRcCy5Y\"\u003e\u003cimg src=\"https://img.shields.io/badge/WhatsApp-25D366?style=for-the-badge\u0026logo=whatsapp\u0026logoColor=white\" /\u003e\u003c/a\u003e \u003ca href=\"https://discord.gg/gZfequNfyW\" target=\"_blank\"\u003e\u003cimg alt=\"Discord\" src=\"https://img.shields.io/badge/Discord-5869e9.svg?\u0026style=for-the-badge\u0026logo=Discord\u0026logoColor=white\" /\u003e\u003c/a\u003e \u003ca href=\"https://github.com/orgs/lastcode802/repositories\" target=\"_blank\"\u003e\u003cimg alt=\"Github\" src=\"https://img.shields.io/badge/GitHub-%2312100E.svg?\u0026style=for-the-badge\u0026logo=Github\u0026logoColor=white\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flastcode802%2Fthreedview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flastcode802%2Fthreedview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flastcode802%2Fthreedview/lists"}