wip

src/components/demos/Demo3.vue

@@ -5,6 +5,8 @@
       <AmbientLight color="#808080" />
       <PointLight color="#ff6000" />
       <PointLight ref="light" color="#0060ff" :intensity="0.5" />
+      <PointLight color="#ff6000" :intensity="0.5" :position="{ x: 100}" />
+      <PointLight color="#0000ff" :intensity="0.5" :position="{ x: -100}" />
 
       <InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES">
         <BoxGeometry :width="2" :height="2" :depth="10" />

src/components/demos/Demo4.vue

@@ -1,5 +1,5 @@
 <template>
-  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" :shadow="true">
+  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" shadow>
     <Camera :position="{ z: 100 }" />
     <Scene>
       <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />

src/components/examples/Matcap.vue

@@ -0,0 +1,14 @@
+<template>
+  <Renderer>
+    <Camera :position="{ x: 0, y: 0, z: 10 }" />
+    <Scene>
+      <Sphere>
+        <MatcapMaterial name="2E763A_78A0B7_B3D1CF_14F209" />
+      </Sphere>
+    </Scene>
+  </Renderer>
+</template>
+
+<script>
+export default {};
+</script>

src/components/sliders/Slider1.vue

@@ -1,5 +1,5 @@
 <template>
-  <Renderer ref="renderer">
+  <Renderer ref="renderer" antialias>
     <Camera ref="camera" :position="{ z: 150 }"></Camera>
     <Scene ref="scene">
     </Scene>

src/core/Renderer.js

@@ -3,38 +3,14 @@ import useThree from './useThree';
 
 export default {
   props: {
-    antialias: {
+    antialias: Boolean,
-      type: Boolean,
+    alpha: Boolean,
-      default: true,
+    autoClear: { type: Boolean, default: true },
-    },
+    mouseMove: { type: [Boolean, String], default: false },
-    alpha: {
+    mouseRaycast: { type: Boolean, default: false },
-      type: Boolean,
+    orbitCtrl: { type: [Boolean, Object], default: false },
-      default: false,
+    resize: { type: [Boolean, String, Element], default: 'window' },
-    },
+    shadow: Boolean,
-    autoClear: {
-      type: Boolean,
-      default: true,
-    },
-    shadow: {
-      type: Boolean,
-      default: false,
-    },
-    orbitCtrl: {
-      type: [Boolean, Object],
-      default: false,
-    },
-    mouseMove: {
-      type: [Boolean, String],
-      default: false,
-    },
-    mouseRaycast: {
-      type: Boolean,
-      default: false,
-    },
-    resize: {
-      type: [Boolean, String, Element],
-      default: 'window',
-    },
     width: String,
     height: String,
   },

src/effects/FXAAPass.js

@@ -0,0 +1,26 @@
+import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
+import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
+import EffectPass from './EffectPass.js';
+
+export default {
+  extends: EffectPass,
+  mounted() {
+    const pass = new ShaderPass(FXAAShader);
+    this.passes.push(pass);
+    this.pass = pass;
+
+    this.resize();
+    this.three.onAfterResize(this.resize);
+  },
+  unmounted() {
+    this.three.offAfterResize(this.resize);
+  },
+  methods: {
+    resize() {
+      const { resolution } = this.pass.material.uniforms;
+      resolution.value.x = 1 / this.three.size.width;
+      resolution.value.y = 1 / this.three.size.height;
+    },
+  },
+  __hmrId: 'FXAAPass',
+};

src/effects/index.js

@@ -1,7 +1,9 @@
 export { default as EffectComposer } from './EffectComposer.js';
 export { default as RenderPass } from './RenderPass.js';
+
 export { default as BokehPass } from './BokehPass.js';
 export { default as FilmPass } from './FilmPass.js';
+export { default as FXAAPass } from './FXAAPass.js';
 export { default as HalftonePass } from './HalftonePass.js';
 export { default as SAOPass } from './SAOPass.js';
 export { default as UnrealBloomPass } from './UnrealBloomPass.js';

src/materials/CubeTexture.js

@@ -23,6 +23,7 @@ export default {
     watch(() => this.urls, this.refreshTexture);
   },
   unmounted() {
+    this.material.setTexture(null, this.id);
     this.texture.dispose();
   },
   methods: {

src/materials/Texture.js

@@ -16,6 +16,7 @@ export default {
     watch(() => this.src, this.refreshTexture);
   },
   unmounted() {
+    this.material.setTexture(null, this.id);
     this.texture.dispose();
   },
   methods: {