add matcap material

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',
+};

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';

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',

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 '';
+  }
+}