From 4bd0927b2fa55f0fc3e7fd0347b2a261e5a00db0 Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Wed, 3 Mar 2021 23:21:53 +0100
Subject: [PATCH] fix #9 again

---
 package.json                |  2 +-
 src/core/Group.js           | 22 ++++++++++++----------
 src/meshes/InstancedMesh.js | 15 +++++++++------
 src/meshes/Sprite.js        | 12 +++++++-----
 4 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index f1f8318..31fcbed 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "troisjs",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
diff --git a/src/core/Group.js b/src/core/Group.js
index 9b39f2f..e66f119 100644
--- a/src/core/Group.js
+++ b/src/core/Group.js
@@ -1,28 +1,30 @@
 import { Group } from 'three';
-import { inject } from 'vue';
 import useBindProp from '../use/useBindProp.js';
 
 export default {
-  inject: ['three', 'scene'],
+  inject: {
+    three: 'three',
+    scene: 'scene',
+    group: { default: null },
+  },
   props: {
     position: Object,
     rotation: Object,
     scale: Object,
   },
-  setup(props) {
-    const parent = inject('group', inject('scene'));
-    const group = new Group();
-    useBindProp(props, 'position', group.position);
-    useBindProp(props, 'rotation', group.rotation);
-    useBindProp(props, 'scale', group.scale);
-    return { parent, group };
-  },
   provide() {
     return {
       group: this.group,
     };
   },
   created() {
+    this.parent = this.group ? this.group : this.scene;
+
+    this.group = new Group();
+    useBindProp(this, 'position', this.group.position);
+    useBindProp(this, 'rotation', this.group.rotation);
+    useBindProp(this, 'scale', this.group.scale);
+
     this.parent.add(this.group);
   },
   unmounted() {
diff --git a/src/meshes/InstancedMesh.js b/src/meshes/InstancedMesh.js
index 8a930ac..43d3bc1 100644
--- a/src/meshes/InstancedMesh.js
+++ b/src/meshes/InstancedMesh.js
@@ -1,9 +1,13 @@
 import { InstancedMesh } from 'three';
-import { inject, watch } from 'vue';
+import { watch } from 'vue';
 import useBindProp from '../use/useBindProp.js';
 
 export default {
-  inject: ['three', 'scene'],
+  inject: {
+    three: 'three',
+    scene: 'scene',
+    group: { default: null },
+  },
   props: {
     materialId: String,
     count: Number,
@@ -11,15 +15,14 @@ export default {
     castShadow: Boolean,
     receiveShadow: Boolean,
   },
-  setup() {
-    const parent = inject('group', inject('scene'));
-    return { parent };
-  },
   provide() {
     return {
       mesh: this,
     };
   },
+  created() {
+    this.parent = this.group ? this.group : this.scene;
+  },
   beforeMount() {
     if (!this.$slots.default) {
       console.error('Missing Geometry');
diff --git a/src/meshes/Sprite.js b/src/meshes/Sprite.js
index c28acd3..9bfac89 100644
--- a/src/meshes/Sprite.js
+++ b/src/meshes/Sprite.js
@@ -1,18 +1,20 @@
 import { Sprite, SpriteMaterial, TextureLoader } from 'three';
-import { inject } from 'vue';
 import useBindProp from '../use/useBindProp.js';
 
 export default {
   emits: ['ready', 'loaded'],
-  inject: ['three', 'scene'],
+  inject: {
+    three: 'three',
+    scene: 'scene',
+    group: { default: null },
+  },
   props: {
     src: String,
     position: Object,
     scale: Object,
   },
-  setup() {
-    const parent = inject('group', inject('scene'));
-    return { parent };
+  created() {
+    this.parent = this.group ? this.group : this.scene;
   },
   mounted() {
     this.texture = new TextureLoader().load(this.src, this.onLoaded);