refactor

package.json

@@ -1,17 +1,15 @@
 {
-  "name": "trois",
-  "version": "0.0.1",
+  "name": "troisjs",
+  "version": "0.0.5",
   "scripts": {
     "dev": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "rollup": "rollup -c"
   },
   "dependencies": {
-    "three": "^0.119",
-    "vue": "^3.0.0-rc.10",
-    "vuex": "^4.0.0-beta.4"
+    "three": "^0.119"
   },
   "devDependencies": {
-    "@vue/compiler-sfc": "^3.0.0-rc.10",
     "eslint": "^7.7.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-config-standard": "^14.1.1",
@@ -21,9 +19,11 @@
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^6.2.2",
     "sass": "^1.26.10",
-    "vite": "^1.0.0-rc.4"
+    "vite": "^1.0.0-rc.4",
+    "vue": "^3.0.0-rc.10"
   },
-  "main": "src/index.js",
+  "main": "dist/trois.js",
+  "module": "dist/trois.module.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/troisjs/trois.git"

rollup.config.js

@@ -0,0 +1,65 @@
+import commonjs from '@rollup/plugin-commonjs';
+import vue from 'rollup-plugin-vue';
+import buble from '@rollup/plugin-buble';
+import { terser } from "rollup-plugin-terser";
+
+const input = 'src/index.js';
+const external = ['three', 'three/examples/jsm/controls/OrbitControls.js', 'vue'];
+const plugins = [
+  commonjs(),
+  vue(),
+  buble({
+    transforms: { forOf: false },
+  }),
+];
+
+export default [
+  {
+    input,
+    external,
+    output: {
+      format: 'es',
+      exports: 'named',
+      file: 'build/trois.module.js',
+      sourcemap: true,
+    },
+    plugins,
+  },
+  {
+    input,
+    external,
+    output: {
+      format: 'es',
+      exports: 'named',
+      file: 'build/trois.module.min.js',
+      sourcemap: true,
+    },
+    plugins: [
+      ...plugins,
+      terser(),
+    ],
+  },
+  {
+    input,
+    external,
+    output: {
+      format: 'cjs',
+      file: 'dist/trois.js',
+      sourcemap: true,
+    },
+    plugins,
+  },
+  {
+    input,
+    external,
+    output: {
+      format: 'cjs',
+      file: 'dist/trois.min.js',
+      sourcemap: true,
+    },
+    plugins: [
+      ...plugins,
+      terser(),
+    ],
+  },
+];

src/core/Renderer.js

@@ -1,10 +1,4 @@
-<template>
-  <canvas ref="canvas">
-    <slot></slot>
-  </canvas>
-</template>
-
-<script>
+import { h } from 'vue';
 import useThree from './useThree';
 
 export default {
@@ -85,11 +79,11 @@ export default {
       this.three.render();
     },
   },
+  render() {
+    return h(
+      'canvas',
+      { ref: 'canvas' },
+      this.$slots.default()
+    );
+  },
 };
-</script>
-
-<style>
-canvas {
-  display: block;
-}
-</style>

src/core/Scene.js

@@ -17,7 +17,9 @@ export default {
     };
   },
   mounted() {
+    if (!this.three.scene) {
       this.three.scene = this.scene;
+    }
   },
   render() {
     if (this.$slots.default) {

src/core/index.js

@@ -1,4 +1,4 @@
-export { default as Renderer } from './Renderer.vue';
+export { default as Renderer } from './Renderer.js';
 export { default as PerspectiveCamera } from './PerspectiveCamera.js';
 export { default as Camera } from './PerspectiveCamera.js';
 export { default as Scene } from './Scene.js';

src/index.js

@@ -3,3 +3,4 @@ export * from './geometries/index.js';
 export * from './lights/index.js';
 export * from './materials/index.js';
 export * from './meshes/index.js';
+export * from './tools.js';

src/tools.js

@@ -5,3 +5,9 @@ export function setFromProp(o, prop) {
     }
   }
 };
+
+export function lerp(value1, value2, amount) {
+  amount = amount < 0 ? 0 : amount;
+  amount = amount > 1 ? 1 : amount;
+  return value1 + (value2 - value1) * amount;
+};