default app

src/App.vue

@@ -1,10 +1,10 @@
 <template>
-  <Renderer ref="renderer" mouse-over click>
+  <Renderer ref="renderer" antialias orbit-ctrl resize="window">
     <Camera :position="{ z: 10 }" />
     <Scene>
       <PointLight :position="{ y: 50, z: 50 }" />
-      <Box ref="box" @hover="boxHover" @click="boxClick" :size="1" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
-        <LambertMaterial :color="boxColor" />
+      <Box ref="box" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
+        <LambertMaterial />
       </Box>
     </Scene>
   </Renderer>
@@ -12,11 +12,6 @@
 
 <script>
 export default {
-  data() {
-    return {
-      boxColor: '#ffffff',
-    };
-  },
   mounted() {
     const renderer = this.$refs.renderer;
     const box = this.$refs.box.mesh;
@@ -24,28 +19,14 @@ export default {
       box.rotation.x += 0.01;
     });
   },
-  methods: {
-    boxHover({ over }) {
-      if (over) this.boxColor = '#ff0000';
-      else this.boxColor = '#ffffff';
-    },
-    boxClick() {
-      console.log('click');
-    },
-  },
 };
 </script>
 
-<style lang="scss">
-body {
+<style>
+body, html {
   margin: 0;
 }
-
-body, html, #app, .app { height: 100%; }
-
-.app {
-  canvas {
+canvas {
   display: block;
-  }
 }
 </style>