diff --git a/src/materials/BasicMaterial.ts b/src/materials/BasicMaterial.ts
new file mode 100644
index 0000000..63aa9c0
--- /dev/null
+++ b/src/materials/BasicMaterial.ts
@@ -0,0 +1,8 @@
+import { materialComponent } from "./Material";
+import { PropType } from 'vue';
+import { BasicMaterialPropsInterface } from "./types";
+import { MeshBasicMaterial } from "three";
+
+export default materialComponent('BasicMaterial', 
+    { props: { type: Object as PropType<BasicMaterialPropsInterface>, default: () => ({}) } }, 
+    (opts) => new MeshBasicMaterial(opts))
diff --git a/src/materials/LambertMaterial.ts b/src/materials/LambertMaterial.ts
new file mode 100644
index 0000000..607f9fd
--- /dev/null
+++ b/src/materials/LambertMaterial.ts
@@ -0,0 +1,8 @@
+import { MeshLambertMaterial } from "three";
+import { PropType } from "vue";
+import { materialComponent } from "./Material";
+import { LambertMaterialPropsInterface } from "./types";
+
+export default materialComponent('LambertMaterial', 
+    { props: { type: Object as PropType<LambertMaterialPropsInterface>, default: () => ({}) } }, 
+    (opts) => new MeshLambertMaterial(opts));
diff --git a/src/materials/Material.ts b/src/materials/Material.ts
index 91a87bb..1030ff9 100644
--- a/src/materials/Material.ts
+++ b/src/materials/Material.ts
@@ -92,13 +92,3 @@ export function materialComponent<P extends Readonly<ComponentPropsOptions>>(
     },
   })
 }
-
-// TODO : proper
-export const BasicMaterial = materialComponent('BasicMaterial', { props: { type: Object as PropType<BasicMaterialPropsInterface>, default: () => ({}) } }, (opts) => new MeshBasicMaterial(opts))
-export const LambertMaterial = materialComponent('LambertMaterial', { props: { type: Object as PropType<LambertMaterialPropsInterface>, default: () => ({}) } }, (opts) => new MeshLambertMaterial(opts))
-export const PhongMaterial = materialComponent('PhongMaterial', { props: { type: Object as PropType<PhongMaterialPropsInterface>, default: () => ({}) } }, (opts) => new MeshPhongMaterial(opts))
-export const PhysicalMaterial = materialComponent('PhysicalMaterial', { props: { type: Object as PropType<PhysicalMaterialPropsInterface>, default: () => ({}) } }, (opts) => new MeshPhysicalMaterial(opts))
-export const PointsMaterial = materialComponent('PointsMaterial', { props: { type: Object as PropType<PointsMaterialPropsInterface>, default: () => ({}) } }, (opts) => new TPointsMaterial(opts))
-export const ShadowMaterial = materialComponent('ShadowMaterial', { color: { type: String, default: '#000000' }, props: { type: Object as PropType<MaterialPropsInterface>, default: () => ({}) } }, (opts) => new TShadowMaterial(opts))
-export const StandardMaterial = materialComponent('StandardMaterial', { props: { type: Object as PropType<StandardMaterialPropsInterface>, default: () => ({}) } }, (opts) => new MeshStandardMaterial(opts))
-export const ToonMaterial = materialComponent('ToonMaterial', { props: { type: Object as PropType<ToonMaterialPropsInterface>, default: () => ({}) } }, (opts) => new MeshToonMaterial(opts))
diff --git a/src/materials/PhongMaterial.ts b/src/materials/PhongMaterial.ts
new file mode 100644
index 0000000..b2b2153
--- /dev/null
+++ b/src/materials/PhongMaterial.ts
@@ -0,0 +1,8 @@
+import { MeshPhongMaterial } from "three";
+import { PropType } from "vue";
+import { materialComponent } from "./Material";
+import { PhongMaterialPropsInterface } from "./types";
+
+export default materialComponent('PhongMaterial', 
+    { props: { type: Object as PropType<PhongMaterialPropsInterface>, default: () => ({}) } }, 
+    (opts) => new MeshPhongMaterial(opts))
diff --git a/src/materials/PhysicalMaterial.ts b/src/materials/PhysicalMaterial.ts
new file mode 100644
index 0000000..015fbc1
--- /dev/null
+++ b/src/materials/PhysicalMaterial.ts
@@ -0,0 +1,8 @@
+import { MeshPhysicalMaterial } from "three";
+import { PropType } from "vue";
+import { materialComponent } from "./Material";
+import { PhysicalMaterialPropsInterface } from "./types";
+
+export default materialComponent('PhysicalMaterial', 
+    { props: { type: Object as PropType<PhysicalMaterialPropsInterface>, default: () => ({}) } }, 
+    (opts) => new MeshPhysicalMaterial(opts))
diff --git a/src/materials/PointsMaterial.ts b/src/materials/PointsMaterial.ts
new file mode 100644
index 0000000..7689884
--- /dev/null
+++ b/src/materials/PointsMaterial.ts
@@ -0,0 +1,8 @@
+import { PointsMaterial } from "three";
+import { PropType } from "vue";
+import { materialComponent } from "./Material";
+import { PointsMaterialPropsInterface } from "./types";
+
+export default materialComponent('PointsMaterial', 
+    { props: { type: Object as PropType<PointsMaterialPropsInterface>, default: () => ({}) } }, 
+    (opts) => new PointsMaterial(opts))
diff --git a/src/materials/ShadowMaterial.ts b/src/materials/ShadowMaterial.ts
new file mode 100644
index 0000000..f326550
--- /dev/null
+++ b/src/materials/ShadowMaterial.ts
@@ -0,0 +1,9 @@
+import { ShadowMaterial } from "three";
+import { PropType } from "vue";
+import { materialComponent } from "./Material";
+import { MaterialPropsInterface } from "./types";
+
+export default materialComponent('ShadowMaterial', 
+    { color: { type: String, default: '#000000' }, 
+    props: { type: Object as PropType<MaterialPropsInterface>, default: () => ({}) } }, 
+    (opts) => new ShadowMaterial(opts))
diff --git a/src/materials/StandardMaterial.ts b/src/materials/StandardMaterial.ts
new file mode 100644
index 0000000..555e174
--- /dev/null
+++ b/src/materials/StandardMaterial.ts
@@ -0,0 +1,8 @@
+import { MeshStandardMaterial } from "three";
+import { PropType } from "vue";
+import { materialComponent } from "./Material";
+import { StandardMaterialPropsInterface } from "./types";
+
+export default materialComponent('StandardMaterial', 
+    { props: { type: Object as PropType<StandardMaterialPropsInterface>, default: () => ({}) } }, 
+    (opts) => new MeshStandardMaterial(opts))
diff --git a/src/materials/ToonMaterial.ts b/src/materials/ToonMaterial.ts
new file mode 100644
index 0000000..9f9de4a
--- /dev/null
+++ b/src/materials/ToonMaterial.ts
@@ -0,0 +1,8 @@
+import { MeshToonMaterial } from "three";
+import { PropType } from "vue";
+import { materialComponent } from "./Material";
+import { ToonMaterialPropsInterface } from "./types";
+
+export default materialComponent('ToonMaterial',
+    { props: { type: Object as PropType<ToonMaterialPropsInterface>, default: () => ({}) } }, 
+    (opts) => new MeshToonMaterial(opts))