1<template>
2  <div id="container"></div>
3</template>
4<script>
5import * as THREE from 'three'
6
7export default {
8  name: 'ThreeTest',
9  data() {
10    return {
11      cube: null,
12      renderer: null,
13      scene: null,
14      camera: null
15    }
16  },
17  mounted() {
18    this.init()
19    this.animate()
20  },
21  methods: {
22    init() {
23      this.scene = new THREE.Scene()
24      this.camera = new THREE.PerspectiveCamera(
25        75,
26        window.innerWidth / window.innerHeight,
27        0.1,
28        1000
29      )
30
31      this.renderer = new THREE.WebGLRenderer()
32      this.renderer.setSize(window.innerWidth, window.innerHeight)
33      document.body.appendChild(this.renderer.domElement)
34
35      const geometry = new THREE.BoxGeometry(1, 1, 1)
36      // eslint-disable-next-line unicorn/number-literal-case
37      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
38      this.cube = new THREE.Mesh(geometry, material)
39      this.scene.add(this.cube)
40
41      this.camera.position.z = 5
42    },
43    animate() {
44      requestAnimationFrame(this.animate)
45
46      this.cube.rotation.x += 0.01
47      this.cube.rotation.y += 0.01
48
49      this.renderer.render(this.scene, this.camera)
50    }
51  }
52}
53</script>
54