Updated README

Vite

.eslintrc.js

@@ -1,18 +1,12 @@
 module.exports = {
   root: true,
   env: {
-    node: true,
+    es2021: true,
   },
   extends: [
     'plugin:vue/vue3-essential',
     '@vue/airbnb',
   ],
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
-  ignorePatterns: [
-    'bundle/*'
-  ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

.github/workflows/main.yml

@@ -1,14 +1,27 @@
-name: Build Vue
-on: [push]
+name: Build Docs
+
+on:
+  push:
+    branches:
+      - master
+
 jobs:
   build_vue:
     runs-on: ubuntu-latest
-    name: Build Vue
+    name: Build Docs
     steps:
-    - uses: actions/checkout@v2
-    - id: Build-Vue
-      uses: xRealNeon/VuePagesAction@1.0.1
-      with:
-        username: 'anatolykopyl'
-        reponame: 'vue-three-d-mockup'
-        token: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: yarn
+      - run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn docs:build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: docs/.vitepress/dist

.gitignore

@@ -1,7 +1,6 @@
 .DS_Store
 node_modules
-/dist
-
+docs/.vitepress/dist
 
 # local env files
 .env.local

README.md

@@ -1,6 +1,6 @@
 # vue-three-d-mockup
 
-Check out the [demo](https://anatolykopyl.github.io/vue-three-d-mockup/)
+Check out the [docs](https://anatolykopyl.github.io/vue-three-d-mockup/)
 
 ## Installation
 

docs/.vitepress/config.js

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vitepress'
+
+export default defineConfig({
+  title: 'Vue 3D Mockup',
+  description: '📱 A 3D phone mockup component to showcase your apps',
+  base: '/vue-three-d-mockup/',
+  lang: 'en-US',
+  lastUpdated: true,
+  themeConfig: {
+    nav: [
+      { text: 'Guide', link: '/guide/' },
+    ],
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Introduction', link: '/guide/' },
+          { text: 'Screen from assets', link: '/guide/screen-from-assets' },
+          { text: 'Video as screen', link: '/guide/video-as-screen' },
+          { text: 'Multiple mockups', link: '/guide/multiple-mockups' },
+          { text: 'Theming', link: '/guide/theming' },
+          { text: 'Props', link: '/guide/props' },
+        ]
+      }
+    ],
+    footer: {
+      message: 'Released under the GPL-3.0 license.',
+    },
+    socialLinks: [
+      {
+        icon: 'github',
+        link: 'https://github.com/anatolykopyl/vue-three-d-mockup'
+      }
+    ]
+  }
+})

docs/guide/index.md

@@ -0,0 +1,31 @@
+# Introduction
+
+## Installation
+
+```bash
+npm install vue-three-d-mockup
+```
+
+## Simple usage example
+
+<script setup>
+import Mockup from '../../src/Mockup.vue'
+import screenImage from '../assets/screen.png';
+</script>
+
+<Mockup
+  style="width: 100%; height: 400px;"
+  :screen="screenImage"
+/>
+
+`screen.png` is a static asset in the public folder.
+
+```vue
+<template>
+  <Mockup screen="screen.png" />
+</template>
+
+<script setup>
+import Mockup from 'vue-three-d-mockup';
+</script>
+```

docs/guide/multiple-mockups.md

@@ -0,0 +1,50 @@
+# Multiple mockups
+
+<script setup>
+import Mockup from '../../src/Mockup.vue'
+import screenImage from '../assets/screen.png';
+</script>
+
+<Mockup
+  style="width: 100%; height: 400px;"
+  :screen="[screenImage, screenImage]"
+  :position="[
+    {
+      x: -50
+    },
+    {
+      x: 50
+    },
+  ]"
+  :rotation="[{}, {
+    y: -0.3,
+    z: -0.06,
+  }]"
+/>
+
+## Code example
+
+```vue
+<template>
+  <Mockup 
+    :screen="[screenImage, screenImage]"
+    :position="[
+      {
+        x: -50
+      },
+      {
+        x: 50
+      },
+    ]"
+    :rotation="[{}, {
+      y: -0.3,
+      z: -0.06,
+    }]" 
+  />
+</template>
+
+<script setup>
+import Mockup from 'vue-three-d-mockup';
+import screenImage from './assets/screen.png';
+</script>
+```

docs/guide/props.md

@@ -0,0 +1,35 @@
+# Props
+
+## `screen`
+Path to an image that will be displayed on the phones screen or the `<video>` element displayed on the phones screen. Can also be an array of any of the options above.
+
+- Type: `String | Element | Array[String | Element]`
+- Required: `true`
+
+## `lightClr`
+Color of the light as a CSS-style string.
+
+- Type: `String`
+- Required: `false`
+- Default: `"white"`
+
+## `phoneClr`
+Color of the phone as a CSS-style string.
+
+- Type: `String`
+- Required: `false`
+- Default: `"white"`
+
+## `position`
+The position of the phone. Can also be an array if multiple screens specified.
+
+- Type: `Object | Array[Object]`
+- Required: `false`
+- Default: `{ x: 0, y: 0, z: 0 }`
+
+## `rotation`
+The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.
+
+- Type: `Object | Array[Object]`
+- Required: `false`
+- Default: `{ x: -0.2, y: 0.3, z: 0.06 }`

docs/guide/screen-from-assets.md

@@ -0,0 +1,26 @@
+# Screen image from `assets` folder
+
+## In Vite powered projects
+
+```vue
+<template>
+  <Mockup :screen="screenImage" />
+</template>
+
+<script setup>
+import Mockup from 'vue-three-d-mockup';
+import screenImage from './assets/screen.png';
+</script>
+```
+
+## In Vue CLI powered projects
+
+```vue
+<template>
+  <Mockup :screen="require('./assets/screen.png')" />
+</template>
+
+<script setup>
+import Mockup from 'vue-three-d-mockup';
+</script>
+```

docs/guide/theming.md

@@ -0,0 +1,62 @@
+# Theming
+
+<script setup>
+import { ref } from 'vue';
+import Mockup from '../../src/Mockup.vue'
+import screenImage from '../assets/screen.png';
+
+const darkTheme = ref(true);
+</script>
+
+<Mockup
+  style="width: 100%; height: 400px;"
+  :screen="screenImage"
+  :phoneClr="darkTheme ? '#fff' : '#222'"
+  :key="darkTheme"
+/>
+
+<div>
+  <button
+    class="button"
+    @click="darkTheme = !darkTheme"
+  >
+    Toggle theme
+  </button>
+  Theme: {{ darkTheme ? 'dark' : 'light' }}
+</div>
+
+<style scoped>
+.button {
+  display: inline-block;
+  padding: 8px 16px;
+  border-radius: 4px;
+  background-color: var(--vp-c-brand);
+  border: 1px solid var(--vp-c-brand);
+  color: var(--vp-c-white);
+  text-decoration: none;
+  font-size: 16px;
+  margin: 0 8px;
+}
+</style>
+
+The `phoneClr` and `lightClr` props are not reactive, and are intended to be set when the component is mounted.
+But if you want to you still can force a rerender by giving the `Mockup` a key.
+
+## Code example
+
+```vue
+<template>
+  <Mockup 
+    screen="screen.png" 
+    :phoneClr="darkTheme ? '#fff' : '#222'"
+    :key="darkTheme"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Mockup from 'vue-three-d-mockup';
+
+const darkTheme = ref(true);
+</script>
+```

docs/guide/video-as-screen.md

@@ -0,0 +1,87 @@
+# Video as screen
+
+<script setup>
+import { ref } from 'vue';
+import Mockup from '../../src/Mockup.vue'
+import screenVideo from '../assets/screen.mp4';
+
+const videoElement = ref(null);
+const vidReady = ref(false);
+</script>
+
+<Mockup
+  v-if="vidReady"
+  style="width: 100%; height: 400px;"
+  :screen="videoElement"
+/>
+
+<div>
+  <video
+    :src="screenVideo"
+    ref="videoElement"
+    @canplay="vidReady = true"
+    muted
+    autoplay
+    loop
+    style="
+      position: fixed;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      pointer-events: none;
+    "
+  ></video>
+</div>
+
+The `screen` prop accepts a `video` element. 
+
+The `screen` prop is unreactive, so when using it as a video
+it's important to only render the `Mockup` element when the video
+is loaded. Check out the code example to see how to do this.
+
+::: warning
+The video will not be visible on the model if it is set to `display: none` or `visibility: hidden`.
+Use `opacity: 0; pointer-events: none;` on the `<video>` element for best browser compatability.
+:::
+
+::: warning
+The video may not be autoplaying if the original `<video>` element is scrolled off screen.
+Some browsers check for viewport intersection so it may be best to set the video position to `fixed`. 
+:::
+
+
+## Code example
+
+```vue
+<template>
+  <Mockup 
+    v-if="vidReady"
+    :screen="videoElement"
+  />
+
+  <video
+    :src="screenVideo"
+    ref="videoElement"
+    @canplay="vidReady = true"
+    muted
+    autoplay
+    loop
+    style="
+      position: fixed;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      pointer-events: none;
+    "
+  ></video>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Mockup from 'vue-three-d-mockup';
+import screenVideo from './assets/screen.mp4';
+
+const videoElement = ref(null);
+const vidReady = ref(false);
+</script>
+```

docs/index.md

@@ -0,0 +1,84 @@
+---
+layout: home
+---
+
+<script setup>
+import Mockup from '../src/Mockup.vue'
+import screenImage from './assets/screen.png';
+</script>
+
+<main>
+  <Mockup
+    class="mockup"
+    :screen="screenImage"
+  />
+
+  <h1 class="heading">
+    Vue 3D Mockup
+  </h1>
+  <p class="tagline">
+    Create interactive 3D mockups with ease.
+  </p>
+
+  <div class="buttons">
+    <a 
+      href="/vue-three-d-mockup/guide/"
+      class="buttons__button"
+    >
+      Guide
+    </a>
+    <a 
+      href="https://github.com/anatolykopyl/vue-three-d-mockup" 
+      class="buttons__button buttons__button--secondary"
+    >
+      Github
+    </a>
+  </div>
+</main>
+
+<style scoped>
+main {
+  text-align: center;
+}
+
+.mockup {
+  max-width: 600px;
+  height: 500px;
+  margin: auto;
+}
+
+.heading {
+  font-size: 42px;
+  line-height: 1.2;
+  padding: 32px;
+  font-weight: bold;
+  color: var(--vp-c-brand);
+}
+
+.tagline {
+  font-size: 24px;
+  padding: 16px;
+}
+
+.buttons {
+  padding: 32px;
+}
+
+.buttons__button {
+  display: inline-block;
+  padding: 8px 16px;
+  border-radius: 4px;
+  background-color: var(--vp-c-brand);
+  border: 1px solid var(--vp-c-brand);
+  color: var(--vp-c-white);
+  text-decoration: none;
+  font-size: 16px;
+  margin: 0 8px;
+}
+
+.buttons__button--secondary {
+  background-color: var(--vp-c-gray-light-4);
+  color: var(--vp-c-black);
+  border: 1px solid var(--vp-c-divider-light-2);
+}
+</style>

index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>vue-three-d-mockup</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but vue-three-d-mockup doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package.json

@@ -1,46 +1,57 @@
 {
   "name": "vue-three-d-mockup",
-  "version": "0.2.2",
+  "version": "1.0.1",
   "description": "📱 A 3D phone mockup component to showcase your apps",
   "author": "Anatoly Kopyl <akopyl@radner.ru>",
-  "keywords": ["vue", "mockup-generator", "threejs", "design", "mockup"],
+  "keywords": [
+    "vue",
+    "mockup-generator",
+    "threejs",
+    "design",
+    "mockup"
+  ],
   "license": "GPL-3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/anatolykopyl/vue-three-d-mockup.git"
   },
-  "main": "bundle/vue-three-d-mockup.esm.js",
   "browser": {
     "./sfc": "src/Mockup.vue"
   },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/vue-three-d-mockup.umd.js",
+  "module": "./dist/vue-three-d-mockup.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/vue-three-d-mockup.mjs",
+      "require": "./dist/vue-three-d-mockup.umd.js"
+    }
+  },
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "build-bundle": "rollup -c",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs"
   },
   "pre-commit": [
-    "build-bundle"
+    "build"
   ],
   "dependencies": {
-    "core-js": "^3.6.5",
+    "@vitejs/plugin-vue": "^3.0.1",
     "three": "^0.137.5",
+    "vite": "^3.0.2",
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-url": "^6.1.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-airbnb": "^5.0.2",
-    "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-vue": "^7.0.0",
-    "file-loader": "^6.2.0",
     "pre-commit": "^1.2.2",
-    "rollup-plugin-vue": "^6.0.0"
+    "vitepress": "^1.0.0-alpha.4"
   }
 }

public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

rollup.config.js

@@ -1,20 +0,0 @@
-import vue from 'rollup-plugin-vue';
-import url from '@rollup/plugin-url';
-import packageJson from './package.json';
-
-export default {
-  input: 'src/Mockup.vue',
-  output: [
-    {
-      format: 'esm',
-      file: packageJson.main,
-    },
-  ],
-  plugins: [
-    vue(),
-    url({
-      limit: 3000000,
-      include: ['**/*.obj'],
-    }),
-  ],
-};

src/Demo.vue

@@ -1,80 +0,0 @@
-<template>
-  <div>
-    <h1>
-      vue-three-d-mockup
-    </h1>
-
-    <Mockup
-      v-if="vidReady"
-      class="mockup"
-      :screen="[$refs.video, require('./assets/screen.png')]"
-      :position="[
-        {
-          x: -50
-        },
-        {
-          x: 50
-        },
-      ]"
-      :rotation="[{}, {
-        y: -0.3,
-        z: -0.06,
-      }]"
-    />
-    <!-- <Mockup
-      class="mockup"
-      :screen="require('./assets/screen.png')"
-    /> -->
-
-    <video
-      src="@/assets/screen.mp4"
-      ref="video"
-      @canplay="vidReady = true"
-      muted
-      autoplay
-      loop
-    />
-  </div>
-</template>
-
-<script>
-import { defineAsyncComponent } from 'vue';
-
-export default {
-  data() {
-    return {
-      vidReady: false,
-    };
-  },
-  components: {
-    Mockup: defineAsyncComponent(() => import('./Mockup.vue')),
-  },
-};
-</script>
-
-<style>
-html, body {
-  height: 100%;
-}
-
-body {
-  font-family: sans-serif;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-video {
-  position: fixed;
-  top: 0;
-  left: 0;
-  visibility: hidden;
-}
-
-.mockup {
-  width: 800px;
-  height: 500px;
-}
-</style>

src/Mockup.vue

@@ -15,10 +15,10 @@
 import { ref, onMounted } from 'vue';
 
 import * as THREE from 'three';
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
+import { OBJLoader } from './utils/OBJLoader';
 import MockupModel from './MockupModel';
 import roundedPlane from './utils/roundedPlane';
-import phoneObj from './assets/iphone.obj';
+const phoneObj = new URL('./assets/iphone.obj', import.meta.url).href;
 
 export default {
   name: 'Mockup',

src/main.js

@@ -1,4 +0,0 @@
-import { createApp } from 'vue';
-import App from './Demo.vue';
-
-createApp(App).mount('#app');

src/utils/OBJLoader.js

@@ -0,0 +1,905 @@
+import {
+	BufferGeometry,
+	FileLoader,
+	Float32BufferAttribute,
+	Group,
+	LineBasicMaterial,
+	LineSegments,
+	Loader,
+	Material,
+	Mesh,
+	MeshPhongMaterial,
+	Points,
+	PointsMaterial,
+	Vector3,
+	Color
+} from 'three';
+
+// o object_name | g group_name
+const _object_pattern = /^[og]\s*(.+)?/;
+// mtllib file_reference
+const _material_library_pattern = /^mtllib /;
+// usemtl material_name
+const _material_use_pattern = /^usemtl /;
+// usemap map_name
+const _map_use_pattern = /^usemap /;
+const _face_vertex_data_separator_pattern = /\s+/;
+
+const _vA = new Vector3();
+const _vB = new Vector3();
+const _vC = new Vector3();
+
+const _ab = new Vector3();
+const _cb = new Vector3();
+
+const _color = new Color();
+
+function ParserState() {
+
+	const state = {
+		objects: [],
+		object: {},
+
+		vertices: [],
+		normals: [],
+		colors: [],
+		uvs: [],
+
+		materials: {},
+		materialLibraries: [],
+
+		startObject: function ( name, fromDeclaration ) {
+
+			// If the current object (initial from reset) is not from a g/o declaration in the parsed
+			// file. We need to use it for the first parsed g/o to keep things in sync.
+			if ( this.object && this.object.fromDeclaration === false ) {
+
+				this.object.name = name;
+				this.object.fromDeclaration = ( fromDeclaration !== false );
+				return;
+
+			}
+
+			const previousMaterial = ( this.object && typeof this.object.currentMaterial === 'function' ? this.object.currentMaterial() : undefined );
+
+			if ( this.object && typeof this.object._finalize === 'function' ) {
+
+				this.object._finalize( true );
+
+			}
+
+			this.object = {
+				name: name || '',
+				fromDeclaration: ( fromDeclaration !== false ),
+
+				geometry: {
+					vertices: [],
+					normals: [],
+					colors: [],
+					uvs: [],
+					hasUVIndices: false
+				},
+				materials: [],
+				smooth: true,
+
+				startMaterial: function ( name, libraries ) {
+
+					const previous = this._finalize( false );
+
+					// New usemtl declaration overwrites an inherited material, except if faces were declared
+					// after the material, then it must be preserved for proper MultiMaterial continuation.
+					if ( previous && ( previous.inherited || previous.groupCount <= 0 ) ) {
+
+						this.materials.splice( previous.index, 1 );
+
+					}
+
+					const material = {
+						index: this.materials.length,
+						name: name || '',
+						mtllib: ( Array.isArray( libraries ) && libraries.length > 0 ? libraries[ libraries.length - 1 ] : '' ),
+						smooth: ( previous !== undefined ? previous.smooth : this.smooth ),
+						groupStart: ( previous !== undefined ? previous.groupEnd : 0 ),
+						groupEnd: - 1,
+						groupCount: - 1,
+						inherited: false,
+
+						clone: function ( index ) {
+
+							const cloned = {
+								index: ( typeof index === 'number' ? index : this.index ),
+								name: this.name,
+								mtllib: this.mtllib,
+								smooth: this.smooth,
+								groupStart: 0,
+								groupEnd: - 1,
+								groupCount: - 1,
+								inherited: false
+							};
+							cloned.clone = this.clone.bind( cloned );
+							return cloned;
+
+						}
+					};
+
+					this.materials.push( material );
+
+					return material;
+
+				},
+
+				currentMaterial: function () {
+
+					if ( this.materials.length > 0 ) {
+
+						return this.materials[ this.materials.length - 1 ];
+
+					}
+
+					return undefined;
+
+				},
+
+				_finalize: function ( end ) {
+
+					const lastMultiMaterial = this.currentMaterial();
+					if ( lastMultiMaterial && lastMultiMaterial.groupEnd === - 1 ) {
+
+						lastMultiMaterial.groupEnd = this.geometry.vertices.length / 3;
+						lastMultiMaterial.groupCount = lastMultiMaterial.groupEnd - lastMultiMaterial.groupStart;
+						lastMultiMaterial.inherited = false;
+
+					}
+
+					// Ignore objects tail materials if no face declarations followed them before a new o/g started.
+					if ( end && this.materials.length > 1 ) {
+
+						for ( let mi = this.materials.length - 1; mi >= 0; mi -- ) {
+
+							if ( this.materials[ mi ].groupCount <= 0 ) {
+
+								this.materials.splice( mi, 1 );
+
+							}
+
+						}
+
+					}
+
+					// Guarantee at least one empty material, this makes the creation later more straight forward.
+					if ( end && this.materials.length === 0 ) {
+
+						this.materials.push( {
+							name: '',
+							smooth: this.smooth
+						} );
+
+					}
+
+					return lastMultiMaterial;
+
+				}
+			};
+
+			// Inherit previous objects material.
+			// Spec tells us that a declared material must be set to all objects until a new material is declared.
+			// If a usemtl declaration is encountered while this new object is being parsed, it will
+			// overwrite the inherited material. Exception being that there was already face declarations
+			// to the inherited material, then it will be preserved for proper MultiMaterial continuation.
+
+			if ( previousMaterial && previousMaterial.name && typeof previousMaterial.clone === 'function' ) {
+
+				const declared = previousMaterial.clone( 0 );
+				declared.inherited = true;
+				this.object.materials.push( declared );
+
+			}
+
+			this.objects.push( this.object );
+
+		},
+
+		finalize: function () {
+
+			if ( this.object && typeof this.object._finalize === 'function' ) {
+
+				this.object._finalize( true );
+
+			}
+
+		},
+
+		parseVertexIndex: function ( value, len ) {
+
+			const index = parseInt( value, 10 );
+			return ( index >= 0 ? index - 1 : index + len / 3 ) * 3;
+
+		},
+
+		parseNormalIndex: function ( value, len ) {
+
+			const index = parseInt( value, 10 );
+			return ( index >= 0 ? index - 1 : index + len / 3 ) * 3;
+
+		},
+
+		parseUVIndex: function ( value, len ) {
+
+			const index = parseInt( value, 10 );
+			return ( index >= 0 ? index - 1 : index + len / 2 ) * 2;
+
+		},
+
+		addVertex: function ( a, b, c ) {
+
+			const src = this.vertices;
+			const dst = this.object.geometry.vertices;
+
+			dst.push( src[ a + 0 ], src[ a + 1 ], src[ a + 2 ] );
+			dst.push( src[ b + 0 ], src[ b + 1 ], src[ b + 2 ] );
+			dst.push( src[ c + 0 ], src[ c + 1 ], src[ c + 2 ] );
+
+		},
+
+		addVertexPoint: function ( a ) {
+
+			const src = this.vertices;
+			const dst = this.object.geometry.vertices;
+
+			dst.push( src[ a + 0 ], src[ a + 1 ], src[ a + 2 ] );
+
+		},
+
+		addVertexLine: function ( a ) {
+
+			const src = this.vertices;
+			const dst = this.object.geometry.vertices;
+
+			dst.push( src[ a + 0 ], src[ a + 1 ], src[ a + 2 ] );
+
+		},
+
+		addNormal: function ( a, b, c ) {
+
+			const src = this.normals;
+			const dst = this.object.geometry.normals;
+
+			dst.push( src[ a + 0 ], src[ a + 1 ], src[ a + 2 ] );
+			dst.push( src[ b + 0 ], src[ b + 1 ], src[ b + 2 ] );
+			dst.push( src[ c + 0 ], src[ c + 1 ], src[ c + 2 ] );
+
+		},
+
+		addFaceNormal: function ( a, b, c ) {
+
+			const src = this.vertices;
+			const dst = this.object.geometry.normals;
+
+			_vA.fromArray( src, a );
+			_vB.fromArray( src, b );
+			_vC.fromArray( src, c );
+
+			_cb.subVectors( _vC, _vB );
+			_ab.subVectors( _vA, _vB );
+			_cb.cross( _ab );
+
+			_cb.normalize();
+
+			dst.push( _cb.x, _cb.y, _cb.z );
+			dst.push( _cb.x, _cb.y, _cb.z );
+			dst.push( _cb.x, _cb.y, _cb.z );
+
+		},
+
+		addColor: function ( a, b, c ) {
+
+			const src = this.colors;
+			const dst = this.object.geometry.colors;
+
+			if ( src[ a ] !== undefined ) dst.push( src[ a + 0 ], src[ a + 1 ], src[ a + 2 ] );
+			if ( src[ b ] !== undefined ) dst.push( src[ b + 0 ], src[ b + 1 ], src[ b + 2 ] );
+			if ( src[ c ] !== undefined ) dst.push( src[ c + 0 ], src[ c + 1 ], src[ c + 2 ] );
+
+		},
+
+		addUV: function ( a, b, c ) {
+
+			const src = this.uvs;
+			const dst = this.object.geometry.uvs;
+
+			dst.push( src[ a + 0 ], src[ a + 1 ] );
+			dst.push( src[ b + 0 ], src[ b + 1 ] );
+			dst.push( src[ c + 0 ], src[ c + 1 ] );
+
+		},
+
+		addDefaultUV: function () {
+
+			const dst = this.object.geometry.uvs;
+
+			dst.push( 0, 0 );
+			dst.push( 0, 0 );
+			dst.push( 0, 0 );
+
+		},
+
+		addUVLine: function ( a ) {
+
+			const src = this.uvs;
+			const dst = this.object.geometry.uvs;
+
+			dst.push( src[ a + 0 ], src[ a + 1 ] );
+
+		},
+
+		addFace: function ( a, b, c, ua, ub, uc, na, nb, nc ) {
+
+			const vLen = this.vertices.length;
+
+			let ia = this.parseVertexIndex( a, vLen );
+			let ib = this.parseVertexIndex( b, vLen );
+			let ic = this.parseVertexIndex( c, vLen );
+
+			this.addVertex( ia, ib, ic );
+			this.addColor( ia, ib, ic );
+
+			// normals
+
+			if ( na !== undefined && na !== '' ) {
+
+				const nLen = this.normals.length;
+
+				ia = this.parseNormalIndex( na, nLen );
+				ib = this.parseNormalIndex( nb, nLen );
+				ic = this.parseNormalIndex( nc, nLen );
+
+				this.addNormal( ia, ib, ic );
+
+			} else {
+
+				this.addFaceNormal( ia, ib, ic );
+
+			}
+
+			// uvs
+
+			if ( ua !== undefined && ua !== '' ) {
+
+				const uvLen = this.uvs.length;
+
+				ia = this.parseUVIndex( ua, uvLen );
+				ib = this.parseUVIndex( ub, uvLen );
+				ic = this.parseUVIndex( uc, uvLen );
+
+				this.addUV( ia, ib, ic );
+
+				this.object.geometry.hasUVIndices = true;
+
+			} else {
+
+				// add placeholder values (for inconsistent face definitions)
+
+				this.addDefaultUV();
+
+			}
+
+		},
+
+		addPointGeometry: function ( vertices ) {
+
+			this.object.geometry.type = 'Points';
+
+			const vLen = this.vertices.length;
+
+			for ( let vi = 0, l = vertices.length; vi < l; vi ++ ) {
+
+				const index = this.parseVertexIndex( vertices[ vi ], vLen );
+
+				this.addVertexPoint( index );
+				this.addColor( index );
+
+			}
+
+		},
+
+		addLineGeometry: function ( vertices, uvs ) {
+
+			this.object.geometry.type = 'Line';
+
+			const vLen = this.vertices.length;
+			const uvLen = this.uvs.length;
+
+			for ( let vi = 0, l = vertices.length; vi < l; vi ++ ) {
+
+				this.addVertexLine( this.parseVertexIndex( vertices[ vi ], vLen ) );
+
+			}
+
+			for ( let uvi = 0, l = uvs.length; uvi < l; uvi ++ ) {
+
+				this.addUVLine( this.parseUVIndex( uvs[ uvi ], uvLen ) );
+
+			}
+
+		}
+
+	};
+
+	state.startObject( '', false );
+
+	return state;
+
+}
+
+//
+
+class OBJLoader extends Loader {
+
+	constructor( manager ) {
+
+		super( manager );
+
+		this.materials = null;
+
+	}
+
+	load( url, onLoad, onProgress, onError ) {
+
+		const scope = this;
+
+		const loader = new FileLoader( this.manager );
+		loader.setPath( this.path );
+		loader.setRequestHeader( this.requestHeader );
+		loader.setWithCredentials( this.withCredentials );
+		loader.load( url, function ( text ) {
+
+			try {
+
+				onLoad( scope.parse( text ) );
+
+			} catch ( e ) {
+
+				if ( onError ) {
+
+					onError( e );
+
+				} else {
+
+					console.error( e );
+
+				}
+
+				scope.manager.itemError( url );
+
+			}
+
+		}, onProgress, onError );
+
+	}
+
+	setMaterials( materials ) {
+
+		this.materials = materials;
+
+		return this;
+
+	}
+
+	parse( text ) {
+
+		const state = new ParserState();
+
+		if ( text.indexOf( '\r\n' ) !== - 1 ) {
+
+			// This is faster than String.split with regex that splits on both
+			text = text.replace( /\r\n/g, '\n' );
+
+		}
+
+		if ( text.indexOf( '\\\n' ) !== - 1 ) {
+
+			// join lines separated by a line continuation character (\)
+			text = text.replace( /\\\n/g, '' );
+
+		}
+
+		const lines = text.split( '\n' );
+		let result = [];
+
+		for ( let i = 0, l = lines.length; i < l; i ++ ) {
+
+			const line = lines[ i ].trimStart();
+
+			if ( line.length === 0 ) continue;
+
+			const lineFirstChar = line.charAt( 0 );
+
+			// @todo invoke passed in handler if any
+			if ( lineFirstChar === '#' ) continue;
+
+			if ( lineFirstChar === 'v' ) {
+
+				const data = line.split( _face_vertex_data_separator_pattern );
+
+				switch ( data[ 0 ] ) {
+
+					case 'v':
+						state.vertices.push(
+							parseFloat( data[ 1 ] ),
+							parseFloat( data[ 2 ] ),
+							parseFloat( data[ 3 ] )
+						);
+						if ( data.length >= 7 ) {
+
+							_color.setRGB(
+								parseFloat( data[ 4 ] ),
+								parseFloat( data[ 5 ] ),
+								parseFloat( data[ 6 ] )
+							).convertSRGBToLinear();
+
+							state.colors.push( _color.r, _color.g, _color.b );
+
+						} else {
+
+							// if no colors are defined, add placeholders so color and vertex indices match
+
+							state.colors.push( undefined, undefined, undefined );
+
+						}
+
+						break;
+					case 'vn':
+						state.normals.push(
+							parseFloat( data[ 1 ] ),
+							parseFloat( data[ 2 ] ),
+							parseFloat( data[ 3 ] )
+						);
+						break;
+					case 'vt':
+						state.uvs.push(
+							parseFloat( data[ 1 ] ),
+							parseFloat( data[ 2 ] )
+						);
+						break;
+
+				}
+
+			} else if ( lineFirstChar === 'f' ) {
+
+				const lineData = line.slice( 1 ).trim();
+				const vertexData = lineData.split( _face_vertex_data_separator_pattern );
+				const faceVertices = [];
+
+				// Parse the face vertex data into an easy to work with format
+
+				for ( let j = 0, jl = vertexData.length; j < jl; j ++ ) {
+
+					const vertex = vertexData[ j ];
+
+					if ( vertex.length > 0 ) {
+
+						const vertexParts = vertex.split( '/' );
+						faceVertices.push( vertexParts );
+
+					}
+
+				}
+
+				// Draw an edge between the first vertex and all subsequent vertices to form an n-gon
+
+				const v1 = faceVertices[ 0 ];
+
+				for ( let j = 1, jl = faceVertices.length - 1; j < jl; j ++ ) {
+
+					const v2 = faceVertices[ j ];
+					const v3 = faceVertices[ j + 1 ];
+
+					state.addFace(
+						v1[ 0 ], v2[ 0 ], v3[ 0 ],
+						v1[ 1 ], v2[ 1 ], v3[ 1 ],
+						v1[ 2 ], v2[ 2 ], v3[ 2 ]
+					);
+
+				}
+
+			} else if ( lineFirstChar === 'l' ) {
+
+				const lineParts = line.substring( 1 ).trim().split( ' ' );
+				let lineVertices = [];
+				const lineUVs = [];
+
+				if ( line.indexOf( '/' ) === - 1 ) {
+
+					lineVertices = lineParts;
+
+				} else {
+
+					for ( let li = 0, llen = lineParts.length; li < llen; li ++ ) {
+
+						const parts = lineParts[ li ].split( '/' );
+
+						if ( parts[ 0 ] !== '' ) lineVertices.push( parts[ 0 ] );
+						if ( parts[ 1 ] !== '' ) lineUVs.push( parts[ 1 ] );
+
+					}
+
+				}
+
+				state.addLineGeometry( lineVertices, lineUVs );
+
+			} else if ( lineFirstChar === 'p' ) {
+
+				const lineData = line.slice( 1 ).trim();
+				const pointData = lineData.split( ' ' );
+
+				state.addPointGeometry( pointData );
+
+			} else if ( ( result = _object_pattern.exec( line ) ) !== null ) {
+
+				// o object_name
+				// or
+				// g group_name
+
+				// WORKAROUND: https://bugs.chromium.org/p/v8/issues/detail?id=2869
+				// let name = result[ 0 ].slice( 1 ).trim();
+				const name = ( ' ' + result[ 0 ].slice( 1 ).trim() ).slice( 1 );
+
+				state.startObject( name );
+
+			} else if ( _material_use_pattern.test( line ) ) {
+
+				// material
+
+				state.object.startMaterial( line.substring( 7 ).trim(), state.materialLibraries );
+
+			} else if ( _material_library_pattern.test( line ) ) {
+
+				// mtl file
+
+				state.materialLibraries.push( line.substring( 7 ).trim() );
+
+			} else if ( _map_use_pattern.test( line ) ) {
+
+				// the line is parsed but ignored since the loader assumes textures are defined MTL files
+				// (according to https://www.okino.com/conv/imp_wave.htm, 'usemap' is the old-style Wavefront texture reference method)
+
+				console.warn( 'THREE.OBJLoader: Rendering identifier "usemap" not supported. Textures must be defined in MTL files.' );
+
+			} else if ( lineFirstChar === 's' ) {
+
+				result = line.split( ' ' );
+
+				// smooth shading
+
+				// @todo Handle files that have varying smooth values for a set of faces inside one geometry,
+				// but does not define a usemtl for each face set.
+				// This should be detected and a dummy material created (later MultiMaterial and geometry groups).
+				// This requires some care to not create extra material on each smooth value for "normal" obj files.
+				// where explicit usemtl defines geometry groups.
+				// Example asset: examples/models/obj/cerberus/Cerberus.obj
+
+				/*
+					 * http://paulbourke.net/dataformats/obj/
+					 *
+					 * From chapter "Grouping" Syntax explanation "s group_number":
+					 * "group_number is the smoothing group number. To turn off smoothing groups, use a value of 0 or off.
+					 * Polygonal elements use group numbers to put elements in different smoothing groups. For free-form
+					 * surfaces, smoothing groups are either turned on or off; there is no difference between values greater
+					 * than 0."
+					 */
+				if ( result.length > 1 ) {
+
+					const value = result[ 1 ].trim().toLowerCase();
+					state.object.smooth = ( value !== '0' && value !== 'off' );
+
+				} else {
+
+					// ZBrush can produce "s" lines #11707
+					state.object.smooth = true;
+
+				}
+
+				const material = state.object.currentMaterial();
+				if ( material ) material.smooth = state.object.smooth;
+
+			} else {
+
+				// Handle null terminated files without exception
+				if ( line === '\0' ) continue;
+
+				console.warn( 'THREE.OBJLoader: Unexpected line: "' + line + '"' );
+
+			}
+
+		}
+
+		state.finalize();
+
+		const container = new Group();
+		container.materialLibraries = [].concat( state.materialLibraries );
+
+		const hasPrimitives = ! ( state.objects.length === 1 && state.objects[ 0 ].geometry.vertices.length === 0 );
+
+		if ( hasPrimitives === true ) {
+
+			for ( let i = 0, l = state.objects.length; i < l; i ++ ) {
+
+				const object = state.objects[ i ];
+				const geometry = object.geometry;
+				const materials = object.materials;
+				const isLine = ( geometry.type === 'Line' );
+				const isPoints = ( geometry.type === 'Points' );
+				let hasVertexColors = false;
+
+				// Skip o/g line declarations that did not follow with any faces
+				if ( geometry.vertices.length === 0 ) continue;
+
+				const buffergeometry = new BufferGeometry();
+
+				buffergeometry.setAttribute( 'position', new Float32BufferAttribute( geometry.vertices, 3 ) );
+
+				if ( geometry.normals.length > 0 ) {
+
+					buffergeometry.setAttribute( 'normal', new Float32BufferAttribute( geometry.normals, 3 ) );
+
+				}
+
+				if ( geometry.colors.length > 0 ) {
+
+					hasVertexColors = true;
+					buffergeometry.setAttribute( 'color', new Float32BufferAttribute( geometry.colors, 3 ) );
+
+				}
+
+				if ( geometry.hasUVIndices === true ) {
+
+					buffergeometry.setAttribute( 'uv', new Float32BufferAttribute( geometry.uvs, 2 ) );
+
+				}
+
+				// Create materials
+
+				const createdMaterials = [];
+
+				for ( let mi = 0, miLen = materials.length; mi < miLen; mi ++ ) {
+
+					const sourceMaterial = materials[ mi ];
+					const materialHash = sourceMaterial.name + '_' + sourceMaterial.smooth + '_' + hasVertexColors;
+					let material = state.materials[ materialHash ];
+
+					if ( this.materials !== null ) {
+
+						material = this.materials.create( sourceMaterial.name );
+
+						// mtl etc. loaders probably can't create line materials correctly, copy properties to a line material.
+						if ( isLine && material && ! ( material instanceof LineBasicMaterial ) ) {
+
+							const materialLine = new LineBasicMaterial();
+							Material.prototype.copy.call( materialLine, material );
+							materialLine.color.copy( material.color );
+							material = materialLine;
+
+						} else if ( isPoints && material && ! ( material instanceof PointsMaterial ) ) {
+
+							const materialPoints = new PointsMaterial( { size: 10, sizeAttenuation: false } );
+							Material.prototype.copy.call( materialPoints, material );
+							materialPoints.color.copy( material.color );
+							materialPoints.map = material.map;
+							material = materialPoints;
+
+						}
+
+					}
+
+					if ( material === undefined ) {
+
+						if ( isLine ) {
+
+							material = new LineBasicMaterial();
+
+						} else if ( isPoints ) {
+
+							material = new PointsMaterial( { size: 1, sizeAttenuation: false } );
+
+						} else {
+
+							material = new MeshPhongMaterial();
+
+						}
+
+						material.name = sourceMaterial.name;
+						material.flatShading = sourceMaterial.smooth ? false : true;
+						material.vertexColors = hasVertexColors;
+
+						state.materials[ materialHash ] = material;
+
+					}
+
+					createdMaterials.push( material );
+
+				}
+
+				// Create mesh
+
+				let mesh;
+
+				if ( createdMaterials.length > 1 ) {
+
+					for ( let mi = 0, miLen = materials.length; mi < miLen; mi ++ ) {
+
+						const sourceMaterial = materials[ mi ];
+						buffergeometry.addGroup( sourceMaterial.groupStart, sourceMaterial.groupCount, mi );
+
+					}
+
+					if ( isLine ) {
+
+						mesh = new LineSegments( buffergeometry, createdMaterials );
+
+					} else if ( isPoints ) {
+
+						mesh = new Points( buffergeometry, createdMaterials );
+
+					} else {
+
+						mesh = new Mesh( buffergeometry, createdMaterials );
+
+					}
+
+				} else {
+
+					if ( isLine ) {
+
+						mesh = new LineSegments( buffergeometry, createdMaterials[ 0 ] );
+
+					} else if ( isPoints ) {
+
+						mesh = new Points( buffergeometry, createdMaterials[ 0 ] );
+
+					} else {
+
+						mesh = new Mesh( buffergeometry, createdMaterials[ 0 ] );
+
+					}
+
+				}
+
+				mesh.name = object.name;
+
+				container.add( mesh );
+
+			}
+
+		} else {
+
+			// if there is only the default parser state object with no geometry data, interpret data as point cloud
+
+			if ( state.vertices.length > 0 ) {
+
+				const material = new PointsMaterial( { size: 1, sizeAttenuation: false } );
+
+				const buffergeometry = new BufferGeometry();
+
+				buffergeometry.setAttribute( 'position', new Float32BufferAttribute( state.vertices, 3 ) );
+
+				if ( state.colors.length > 0 && state.colors[ 0 ] !== undefined ) {
+
+					buffergeometry.setAttribute( 'color', new Float32BufferAttribute( state.colors, 3 ) );
+					material.vertexColors = true;
+
+				}
+
+				const points = new Points( buffergeometry, material );
+				container.add( points );
+
+			}
+
+		}
+
+		return container;
+
+	}
+
+}
+
+export { OBJLoader };

vite.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  assetsInclude: ['**/*.obj'],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/Mockup.vue'),
+      name: 'vue-three-d-mockup',
+      fileName: 'vue-three-d-mockup'
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    }
+  }
+});

vue.config.js

@@ -1,11 +0,0 @@
-module.exports = {
-  publicPath: process.env.NODE_ENV === 'production' ? '/vue-three-d-mockup/' : '/',
-  chainWebpack: (config) => {
-    config.module
-      .rule('file-loader')
-      .test(/\.obj$/)
-      .use('file-loader')
-      .loader('file-loader')
-      .end();
-  },
-};