app.vue example

src/App.vue

@@ -1,25 +1,37 @@
 <template>
-  <Renderer ref="renderer" antialias orbit-ctrl resize="window">
+  <Renderer ref="renderer" antialias :pointer="{ resetOnEnd: true }" :orbit-ctrl="{ enableDamping: true }" resize="window">
     <Camera :position="{ z: 10 }" />
     <Scene>
       <PointLight :position="{ y: 50, z: 50 }" />
-      <Box ref="box" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
+      <Box :size="1" ref="box" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
         <LambertMaterial />
       </Box>
     </Scene>
   </Renderer>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from 'vue'
+import Box from './meshes/Box'
+import Camera from './core/PerspectiveCamera'
+import LambertMaterial from './materials/LambertMaterial'
+import { MeshInterface } from './meshes/Mesh'
+import PointLight from './lights/PointLight'
+import Renderer, { RendererInterface } from './core/Renderer'
+import Scene from './core/Scene'
+
+export default defineComponent({
+  components: { Box, Camera, LambertMaterial, PointLight, Renderer, Scene },
   mounted() {
-    const renderer = this.$refs.renderer;
+    const renderer = this.$refs.renderer as RendererInterface
-    const box = this.$refs.box.mesh;
+    const mesh = (this.$refs.box as MeshInterface).mesh
+    if (renderer && mesh) {
       renderer.onBeforeRender(() => {
-      box.rotation.x += 0.01;
+        mesh.rotation.x += 0.01
-    });
+      })
+    }
   },
-};
+})
 </script>
 
 <style>