ChoWonmin · October 9, 2019 04:25 · Oct 9, 2019 · Oct 9, 2019 · Oct 9, 2019 · Oct 9, 2019
diff --git a/frag → frag.glsl b/frag → frag.glsl
diff --git a/vert → vert.glsl b/vert → vert.glsl
diff --git a/main.ts b/main.ts
@@ -0,0 +1,93 @@
+import { Component, Vue } from 'vue-property-decorator';
+import * as THREE from 'three';
+import { OrbitControls } from 'three-orbitcontrols-ts';
+
+// @ts-ignore
+import vs from '!!raw-loader!./Wolf.vert';
+// @ts-ignore
+import fs from '!!raw-loader!./Wolf.frag';
+import { Vector3 } from 'three';
+
+@Component({
+  components: {
+    //
+  },
+})
+export default class Wolf extends Vue {
+  private camera: any = null;
+  private scene: any = null;
+  private renderer: any = null;
+  private controls: any = null;
+  private material: any = null;
+  private requestAnimationID: number = 0;
+
+  private width: number = -1;
+  private height: number = -1;
+  private start: number = -1;
+
+  private init() {
+    const container = document.getElementById('container') as HTMLElement;
+
+    this.start = Date.now();
+    this.width = container.clientWidth;
+    this.height = container.clientHeight;
+
+    this.scene = new THREE.Scene();
+    this.camera = new THREE.PerspectiveCamera(
+      70,
+      this.width / this.height,
+      1,
+      15000,
+    );
+    this.camera.position.z = 1000;
+
+    this.material = new THREE.RawShaderMaterial({
+      uniforms: {
+        time: { type: 'f', value: 0.0 },
+      },
+      vertexShader: vs,
+      fragmentShader: fs,
+      side: THREE.DoubleSide,
+    });
+
+    const geometry = new THREE.PlaneBufferGeometry(200, 200);
+
+    const mesh = new THREE.Mesh(geometry, this.material);
+    this.scene.add(mesh);
+
+    this.renderer = new THREE.WebGLRenderer({
+      antialias: true,
+    });
+
+    this.renderer.setSize(this.width, this.height);
+
+    if (container) {
+      container.appendChild(this.renderer.domElement);
+      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+    }
+  }
+
+  private animate() {
+    this.requestAnimationID = requestAnimationFrame(this.animate);
+    this.material.uniforms.time.value = 0.00004 * (Date.now() - this.start);
+
+    this.controls.update();
+    this.renderer.render(this.scene, this.camera);
+  }
+
+  private mounted() {
+    this.init();
+    this.animate();
+  }
+
+  private beforeDestroy() {
+    this.scene.dispose();
+    this.renderer.dispose();
+    this.renderer.forceContextLoss();
+    window.cancelAnimationFrame(this.requestAnimationID);
+    // @ts-ignore release force
+    this.renderer.domElement = null;
+    // @ts-ignore release force
+    this.renderer = null;
+  }
+}
diff --git a/frag b/frag
@@ -0,0 +1,12 @@
+precision mediump float;
+
+uniform float time;
+
+varying vec3 vPosition;
+varying vec2 vUv;
+
+void main() {
+
+  gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0);
+
+}
diff --git a/test b/test
@@ -1 +0,0 @@
-hello world

diff --git a/vert b/vert
@@ -0,0 +1,23 @@
+precision mediump float;
+
+uniform mat4 modelMatrix;
+uniform mat4 modelViewMatrix;
+uniform mat4 projectionMatrix;
+uniform vec3 cameraPosition;
+
+attribute vec2 uv;
+attribute vec3 position;
+attribute vec3 normal;
+
+varying vec3 vPosition;
+varying vec2 vUv;
+
+void main() {
+
+  vUv = uv;
+  vPosition = position;
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4( vPosition, 1.0 );
+
+}
+
diff --git a/test b/test
@@ -0,0 +1 @@
+hello world