Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/richplastow/tryout-vue3-threejs-drie
Trying out Drie, a react-three-fiber-like Three.js component library for Vue.js.
https://github.com/richplastow/tryout-vue3-threejs-drie
drie threejs tryout vue
Last synced: 3 days ago
JSON representation
Trying out Drie, a react-three-fiber-like Three.js component library for Vue.js.
- Host: GitHub
- URL: https://github.com/richplastow/tryout-vue3-threejs-drie
- Owner: richplastow
- License: mit
- Created: 2023-07-24T13:04:00.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-30T13:27:20.000Z (over 1 year ago)
- Last Synced: 2024-04-22T06:03:14.203Z (7 months ago)
- Topics: drie, threejs, tryout, vue
- Language: Vue
- Homepage: https://richplastow.com/tryout-vue3-threejs-drie
- Size: 1.48 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tryout-vue3-threejs-drie
__Trying out Drie, a react-three-fiber-like Three.js component library for Vue.js.__
- __Version:__ 0.0.1
- __Repo:__
- __Homepage:__
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile, Minify and Serve Locally for Production
```sh
npm run start
```
### Run Unit Tests with [Vitest](https://vitest.dev/)
```sh
npm run test:unit
```
### Run End-to-End Tests with [Playwright](https://playwright.dev)
```sh
# Install browsers for the first run
npx playwright install
# When testing on CI, must build the project first
npm run build
# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```
## How to create a project like this
1. Create the GitHub repo, and in Settings -> Pages -> Branch choose 'main' and
'/docs'
2. `git clone [email protected]:/tryout-vue3-threejs-drie.git`
3. `cd tryout-vue3-threejs-drie`
4. Follow the ['Creating a Vue Application' Quick Start:
](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)
```
npm init vue@latest
Need to install the following packages:
[email protected]
Ok to proceed? (y)
Vue.js - The Progressive JavaScript Framework
✔ Project name: … tryout-vue3-threejs-drie
✔ Add TypeScript? … Yes
✔ Add JSX Support? … Yes
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … Yes
✔ Add Vitest for Unit Testing? … Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … Yes
Scaffolding project in /Users/ ... /tryout-vue3-threejs-drie...
```
5. Move everything apart from the README.md out of the newly created folder
into the top level of the repo, and delete that folder (note that there are
invisible items, whose filenames start with a '.')
6. In package.json, correct the version and private values, and add description,
repository, keywords, author, license, bugs and homepage
7. Also in package.json, append ` --ignore-pattern /docs/` to the `lint` script
8. `npm install` installs 468 packages with 0 vulnerabilities:
199.7 MB for 13,826 items
9. Add `base: '/tryout-vue3-threejs-drie/',` to vite.config.ts
10. `npm run format && npm run dev`
and open
11. Assuming you have the NPM module `static-server` installed globally,
`npm run build && mv dist tryout-vue3-threejs-drie && static-server`
and open
12. `mv tryout-vue3-threejs-drie docs` - ready for GitHub Pages
13. Follow the [Drie Getting Started Guide
](https://www.drie.dev/guide/getting-started) to install dependencies
@janvorisek/drie, three and dev-dependency @types/three:
10 packages with 0 vulnerabilities, 46.9 MB for 1,997 items
14. Use the [Drie plugin
](https://www.drie.dev/guide/getting-started#vue-3-plugin) by just adding
`import drie from '@janvorisek/drie'` and
`app.use(drie)` to src/main.ts
15. Replace src/views/HomeView.vue with the [Drie 'Basic setup' example
](https://www.drie.dev/examples/basic-setup#code)
(the `import`s are not needed, because of `app.use(drie)` in src/main.ts)
16. You should see the blue box, and be able to rotate it by dragging