11 |
12 | # Vue 3 Component for Polygonjs
13 |
14 | This is a vuejs component to easily import WebGL scenes created with the node-based editor [Polygonjs](https://polygonjs.com).
15 |
16 | Polygonjs allows you to create complex and procedural scenes with a visual editor, and you can import them with vuejs, and benefit from its reactive states. You can then update the 3D scene from anything in your vuejs setup.
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | [Live Demo >>](https://polygonjs.com/vue3)
30 |
31 | There is also a [component for vue 2](https://github.com/polygonjs/polygonjs-vue2).
32 |
33 | # Install
34 |
35 | ```bash
36 | yarn add @polygonjs/vue3
37 | ```
38 |
39 | or
40 |
41 | ```bash
42 | npm install @polygonjs/vue3
43 | ```
44 |
45 | # How to use
46 |
47 | The only required prop to pass to the component is `loadFunction`, which is the function that loads your 3D scene. That function is autogenerated by [polygonjs visual editor](https://polygonjs.com/docs/getting_started).
48 |
49 | ```vue
50 |
51 | ```
52 |
53 | Once you've saved a scene, you will have a .js file created with a path like `./src/polygonjs/scenes//autogenerated/loadScene.js` inside your project, which exports a function called `loadScene_`.
54 |
55 | So assuming you have already created a scene called `scene_01` in your project, the file will be `./src/polygonjs/scenes/scene_01/autogenerated/loadScene.js` and the exported function will be called `loadScene_scene_01`.
56 |
57 | With that in mind, a minimal component to load a scene will look like this:
58 |
59 | ```vue
60 |
61 |
62 |
63 |
64 |
79 | ```
80 |
81 | This will load your scene asynchronously. This means that the rest of the page will load first, and then the 3D scene will be loaded.
82 |
83 | # Other props & events
84 |
85 | ## Props
86 |
87 | | name | type | description |
88 | | ----------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
89 | | **sceneName** | _string_ | The name of your scene. This is necessary when using `keepAlive` (required) |
90 | | **loadFunction** | _function_ | The function to load the scene. You need to import it from the `autogenerated` folder as described above (required) |
91 | | **configureSceneData** | _function_ | A function that will be run before the scene is instantiated from the json data. This received the json as argument and allows you to modify it. This can be very useful when using the same scene and modifying dynamically, before creating it. Note that this is different than using the [javascript api](https://polygonjs.com/api), which is used once the scene has been created. (options) |
92 | | **displayLoadingProgressBar** | _boolean_ | While the scene is being loaded, a progress bar is updated to reflect the progress. This can be turned off by passing `false` (default: `true`) |
93 | | **displayLoadingPoster** | _boolean_ | While the scene is being loaded, a loading poster is displayed in the background. The poster would typically be created from the editor, using the camera icon above the 3D viewer. This can be turned off by passing `false` (default: `true`) |
94 | | **posterExtension** | _string_ | The poster format is by default a .jpg, but you may want to convert it to .webp for faster download, or to .png for less compression. If you have indeed converted it, you can change the extension used with this prop. There are also cases where the old poster remains in the browser cache, so you could add a prefix to the url here, for instance with a version number like 'jpg?v=2' (default: `jpg`) |
95 | | **posterUrl** | _string_ | If you want to override the posterUrl created inside the component, you can specify a complete url here. (default: null) |
96 | | **cameraMaskOverride** | _string_ | If you want to load another camera than the default one, you can override this here (default: null) |
97 | | **autoPlay** | _boolean_ | Defines if the scene plays on load or not (default: true) |
98 | | **baseUrl** | _string_ | If you are loading your assets from a different url than the root, you may want to add a prefix here. This will be used for the scene data json files, assets (models and textures), and any libraries just as draco wasm (default: true) |
99 | | **keepAlive** | _boolean_ | By default a scene is not kept in memory when the component is unmounted. But if you want uses to reload it instantly, set this to true (default: false) |
100 | | **lazyLoad** | _boolean_ | Starts loading a scene only when its container becomes visible (default: true) |
101 |
102 | ## Events
103 |
104 | | name | args | description |
105 | | -------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
106 | | **progress** | _progressAmount_ | This gives you the progress so that you can display your own progress bar or custom loading component if you want to use another than the one provided. |
107 | | **sceneready** | _scene_ | Once the scene is being loaded, you may want to have access to it, so that you can update it when a component prop or state changes. See how the components for the [live demo](https://polygonjs.com/vue3): [scene 01](https://github.com/polygonjs/polygonjs-vue3-example/blob/main/src/views/Scene01.vue) and [scene 02](https://github.com/polygonjs/polygonjs-vue3-example/blob/main/src/views/Scene02.vue) |
108 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/cli-plugin-babel/preset'
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/config/addTypings.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs");
2 | const path = require("path");
3 | const content = `declare module "@polygonjs/vue3";
4 | `;
5 | const currentPath = process.cwd();
6 | const filePath = path.join(currentPath, "dist", "@polygonjs/vue3.common.d.ts");
7 | fs.writeFileSync(filePath, content);
8 |
--------------------------------------------------------------------------------
/config/createVueSimlink.js:
--------------------------------------------------------------------------------
1 | console.log(`
2 | /************
3 | *
4 | *
5 | * for development testing,
6 | * create a simlink (manually for now) of the node_modules/vue of the repository where the component will be tested in
7 | * into this repository node_modules/vue.
8 | *
9 | * If that is not done, the following error message will be displayed when loading the component 'onMounted is called when there is no active component instance to be associated with.'
10 | *
11 | *
12 | *************
13 | `)
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@polygonjs/vue3",
3 | "version": "1.5.76-1",
4 | "main": "dist/@polygonjs/vue3.common",
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "test:unit": "vue-cli-service test:unit",
8 | "build": "node config/createVueSimlink.js && vue-cli-service build --target lib --name @polygonjs/vue3 ./src/main.ts && node config/addTypings.js"
9 | },
10 | "dependencies": {
11 | "@polygonjs/polygonjs": "^1.5.76",
12 | "core-js": "^3.8.3",
13 | "vue": "^3.2.13"
14 | },
15 | "devDependencies": {
16 | "@types/chai": "^4.3.12",
17 | "@types/mocha": "^10.0.6",
18 | "@vue/cli-plugin-babel": "~5.0.8",
19 | "@vue/cli-plugin-typescript": "~5.0.8",
20 | "@vue/cli-plugin-unit-mocha": "~5.0.8",
21 | "@vue/cli-service": "~5.0.8",
22 | "@vue/test-utils": "^2.4.4",
23 | "chai": "^5.1.0",
24 | "typescript": "~5.2.2"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/polygonjs/polygonjs-vue3/e9ff0d3cf29dec394ec65d37c3e6794e713957e1/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | <%= htmlWebpackPlugin.options.title %>
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/PolygonjsScene.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
