Web3D/trois
1
0
Fork 0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00
Code Issues Projects Releases Wiki Activity

default app

Browse Source
This commit is contained in:
Kevin Levron 2021-03-12 23:16:34 +01:00
parent 3844b109f2
commit ebe2e799ed
1 changed files with 7 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/App.vue
View File

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