Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lowes/product-viewer
https://github.com/lowes/product-viewer
Last synced: 2 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/lowes/product-viewer
- Owner: lowes
- License: mit
- Created: 2022-01-31T21:40:10.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-15T00:22:21.000Z (over 1 year ago)
- Last Synced: 2023-08-09T13:37:36.835Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://3dviewer.3dmanager.app/
- Size: 82.3 MB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Product Viewer
This is a monorepo containing projects related to 3D product rendering and web-based mixed reality. All of the projects can be found under the `packages/` directory, and each have their own readme.
## Packages
- product-viewer: A web component used to view 3D product assets. Currently an npm package on the GitHub registry.
- viewer-demos: A react web app demonstrating the features of product-viewer and sample implementations. It is hosted at [3dviewer.3dmanager.app](https://3dviewer.3dmanager.app/)
- viewer-assets: contains shared assets for use across all product-viewer projects
## Using `product-viewer`
The product viewer is available as an npm package for import into a JavaScript or TypeScript project.
See the `product-viewer` package [readme](packages/product-viewer/README.md) for details.
## Development
This project uses lerna to syncronize multiple sub projects. Once the "root" project is installed, it will manage cross-project dependencies, assets, and npm packages.
1. `npm run setup`
2. `npm run start`
The `start` command in the root directory will build the product-viewer, and then launch the viewer-demos react app in a dev hot-reload mode.
To run the product-viewer project by itself for faster development iteration:
1. `npm run setup`
2. `npm run serve-viewer`
This will launch a dev server with a basic html page containing just a viewer component.
NOTE: You need to run the root `setup` or `bootstrap` script before launching the viewer by itself as it installs cross-dependencies and shared assets.
## Recommended Software
NodeJS version: >=10.0.0
We recommend using VS Code for development, and opening the workspace file `.product-viewer.code-workspace` to improve subproject organization within the editor.
VS Code Plugins:
- Prettier - Code formatter - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- vscode-styled-components - https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components
- CSS-in-JS - https://marketplace.visualstudio.com/items?itemName=paulmolluzzo.convert-css-in-js
- ESLint - https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- EditorConfig - https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
## Available Scripts
| Command | Description |
| ------------------- | ------------------------------------------------------------------------------------------------------- |
| `npm run setup` | Installs root dependencies and bootstraps the projects |
| `npm run bootstrap` | Runs `install`, `prepublish`, and `prepare` commands in each project, and symlinks sibling dependencies |
| `npm run start` | Bootstraps the projects, creates a dev build, and then starts the viewer-demos dev server |
| `npm run build` | Runs the build script for each package, if present |
| `npm run clean` | Removes `node_modules` directory from all packages |
| `npm run lint` | Checks for lint issues in each package |
| `npm run lint:fix` | Fixes lint issues in each package |
| `npm run test` | Runs tests in each package |
## Demo
https://3dviewer.3dmanager.app/