2020-09-14 22:57:11 +08:00
|
|
|
<template>
|
2021-03-13 06:16:34 +08:00
|
|
|
<Renderer ref="renderer" antialias orbit-ctrl resize="window">
|
2021-03-01 04:01:56 +08:00
|
|
|
<Camera :position="{ z: 10 }" />
|
|
|
|
<Scene>
|
|
|
|
<PointLight :position="{ y: 50, z: 50 }" />
|
2021-03-13 06:16:34 +08:00
|
|
|
<Box ref="box" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
|
|
|
|
<LambertMaterial />
|
2021-03-01 04:01:56 +08:00
|
|
|
</Box>
|
|
|
|
</Scene>
|
|
|
|
</Renderer>
|
2020-09-14 22:57:11 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
2021-03-01 04:01:56 +08:00
|
|
|
mounted() {
|
|
|
|
const renderer = this.$refs.renderer;
|
|
|
|
const box = this.$refs.box.mesh;
|
|
|
|
renderer.onBeforeRender(() => {
|
|
|
|
box.rotation.x += 0.01;
|
|
|
|
});
|
|
|
|
},
|
2020-09-14 22:57:11 +08:00
|
|
|
};
|
|
|
|
</script>
|
2020-09-15 16:07:57 +08:00
|
|
|
|
2021-03-13 06:16:34 +08:00
|
|
|
<style>
|
|
|
|
body, html {
|
2021-03-01 04:01:56 +08:00
|
|
|
margin: 0;
|
|
|
|
}
|
2021-03-13 06:16:34 +08:00
|
|
|
canvas {
|
|
|
|
display: block;
|
2020-09-15 16:07:57 +08:00
|
|
|
}
|
|
|
|
</style>
|