From 1c66a946d5ebba61cc77dee5a705dbbb5cf36e62 Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Sun, 4 Oct 2020 11:23:02 +0200
Subject: [PATCH] add matcap material

---
 src/materials/MatcapMaterial.js | 21 +++++++++++++++++++++
 src/materials/index.js          |  1 +
 src/plugin.js                   |  2 ++
 src/tools.js                    | 23 +++++++++++++++++++++++
 4 files changed, 47 insertions(+)
 create mode 100644 src/materials/MatcapMaterial.js

diff --git a/src/materials/MatcapMaterial.js b/src/materials/MatcapMaterial.js
new file mode 100644
index 0000000..7565338
--- /dev/null
+++ b/src/materials/MatcapMaterial.js
@@ -0,0 +1,21 @@
+import { MeshMatcapMaterial, TextureLoader } from 'three';
+// import { watch } from 'vue';
+import { propsValues, getMatcapUrl } from '../tools.js';
+import Material from './Material';
+
+export default {
+  extends: Material,
+  props: {
+    src: String,
+    name: String,
+  },
+  methods: {
+    createMaterial() {
+      const src = this.name ? getMatcapUrl(this.name) : this.src;
+      const opts = propsValues(this.$props, ['id', 'src', 'name']);
+      opts.matcap = new TextureLoader().load(src);
+      this.material = new MeshMatcapMaterial(opts);
+    },
+  },
+  __hmrId: 'MatcapMaterial',
+};
diff --git a/src/materials/index.js b/src/materials/index.js
index afe3eba..d8b2624 100644
--- a/src/materials/index.js
+++ b/src/materials/index.js
@@ -1,5 +1,6 @@
 export { default as BasicMaterial } from './BasicMaterial.js';
 export { default as LambertMaterial } from './LambertMaterial.js';
+export { default as MatcapMaterial } from './MatcapMaterial.js';
 export { default as PhongMaterial } from './PhongMaterial.js';
 export { default as PhysicalMaterial } from './PhysicalMaterial.js';
 export { default as StandardMaterial } from './StandardMaterial.js';
diff --git a/src/plugin.js b/src/plugin.js
index 001634f..5b9044c 100644
--- a/src/plugin.js
+++ b/src/plugin.js
@@ -33,6 +33,7 @@ export const TroisJSVuePlugin = {
 
       'BasicMaterial',
       'LambertMaterial',
+      'MatcapMaterial',
       'PhongMaterial',
       'PhysicalMaterial',
       'ShaderMaterial',
@@ -42,6 +43,7 @@ export const TroisJSVuePlugin = {
 
       'Map',
       'EnvMap',
+      'RefractionMap',
 
       'Box',
       'Circle',
diff --git a/src/tools.js b/src/tools.js
index 79cc0fe..dfb567b 100644
--- a/src/tools.js
+++ b/src/tools.js
@@ -31,3 +31,26 @@ export function lerpv3(v1, v2, amount) {
 export function limit(val, min, max) {
   return val < min ? min : (val > max ? max : val);
 };
+
+// from https://github.com/pmndrs/drei/blob/master/src/useMatcapTexture.tsx
+const MATCAP_ROOT = 'https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d';
+
+export function getMatcapUrl(hash, format = 1024) {
+  const fileName = `${hash}${getMatcapFormatString(format)}.png`;
+  return `${MATCAP_ROOT}/${format}/${fileName}`;
+};
+
+function getMatcapFormatString(format) {
+  switch (format) {
+    case 64:
+      return '-64px';
+    case 128:
+      return '-128px';
+    case 256:
+      return '-256px';
+    case 512:
+      return '-512px';
+    default:
+      return '';
+  }
+}