{"id":20649267,"url":"https://github.com/repalash/threepipe-device-mockup-codrops","last_synced_at":"2025-04-17T01:23:44.892Z","repository":{"id":251937035,"uuid":"838775245","full_name":"repalash/threepipe-device-mockup-codrops","owner":"repalash","description":"Minimal 3D website to present designs, websites on a laptop and a phone in an interactive environment. Created for a codrops tutorial.","archived":false,"fork":false,"pushed_at":"2024-08-07T09:59:45.000Z","size":11734,"stargazers_count":21,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T05:51:15.867Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/repalash.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":"2024-08-06T10:12:42.000Z","updated_at":"2025-03-24T07:15:35.000Z","dependencies_parsed_at":"2024-08-06T17:57:54.753Z","dependency_job_id":null,"html_url":"https://github.com/repalash/threepipe-device-mockup-codrops","commit_stats":null,"previous_names":["repalash/threepipe-device-mockup-codrops"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/repalash%2Fthreepipe-device-mockup-codrops","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/repalash%2Fthreepipe-device-mockup-codrops/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/repalash%2Fthreepipe-device-mockup-codrops/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/repalash%2Fthreepipe-device-mockup-codrops/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/repalash","download_url":"https://codeload.github.com/repalash/threepipe-device-mockup-codrops/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249296269,"owners_count":21246285,"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":[],"created_at":"2024-11-16T17:13:28.022Z","updated_at":"2025-04-17T01:23:44.872Z","avatar_url":"https://github.com/repalash.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 3D Device Demo with Threepipe\n\nMinimal 3D website to present designs, websites on a laptop and a phone in an interactive environment using [threepipe](https://threepipe.org).\n\nClone the repository and run the following commands to get started:\n\n```bash\nnpm install\nnpm run dev\n```\n\nNavigate to `http://localhost:5173` to see the project in action.\n\n## Introduction to Threepipe\n\n[Threepipe](https://threepipe.org) is a new framework for creating 3D web applications using JavaScript or TypeScript. It provides a high-level API built on top of [Three.js](https://threejs.org), offering a more intuitive and efficient way to develop 3D experiences for the web. Threepipe comes with a plugin system(and a lot of built-in plugins), making it easy to extend functionality and integrate various features into your 3D projects.\n\nIn the tutorial, we'll create an interactive 3D device mockup showcase using Threepipe, featuring a MacBook and an iPhone model, where users can interact with the model with clicking and hovering over the objects, and drop images to display on the devices. Check out the [final version](https://codepen.io/repalash/full/ExBXvby).\n\nCheck the full tutorial on [codrops](https://tympanus.net/codrops/) - https://tympanus.net/codrops/?p=79929\n\n## Next Steps\n\nThis tutorial covers the basics of creating an interactive 3D device mockup showcase using Threepipe. You can further enhance the project by adding more models, animations, and interactions. Extending the model can be done in both the editor or in the code.\n\nHere are some ideas to extend the project:\n- Add some post processing plugins like SSAO, SSR, etc to enhance the visuals.\n- Create a custom environment map or use a different HDR image for the scene.\n- Add more 3D models and create a complete 3D environment.\n- Embed an iframe in the scene to display a website or a video directly on the device screens.\n- Add video rendering to export 3d mockups of UI designs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frepalash%2Fthreepipe-device-mockup-codrops","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frepalash%2Fthreepipe-device-mockup-codrops","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frepalash%2Fthreepipe-device-mockup-codrops/lists"}