How to place an object in front of camera when it is inside a rotated group?

class Sketch {
  constructor() {
    this.bind()
    this.renderer()
    this.camera()
    this.scene()
    this.objects()
    this.resize()
    this.listen()
  }

  bind() {
    this.render = this.render.bind(this)
    this.resize = this.resize.bind(this)
    this.moveObject = this.moveObject.bind(this)
  }

  renderer() {
    this.renderer = new THREE.WebGLRenderer()
    document.body.appendChild(this.renderer.domElement)
  }

  camera() {
    this.camera = new THREE.PerspectiveCamera(0, 0, 0.1, 2000)
    this.camera.position.z = 1000
  }

  scene() {
    this.scene = new THREE.Scene()
  }

  objects() {
    this.group = new THREE.Group()
    this.group.rotation.y = Math.PI / 4
    this.group.position.z = -1000

    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshBasicMaterial()
    this.cube = new THREE.Mesh(geometry, material)

    this.group.add(this.cube)
    this.scene.add(this.group)
  }

  moveObject() {
    this.cube.position.copy(this.camera.position)
  }

  resize() {
    this.renderer.setSize(innerWidth, innerHeight)
    this.renderer.setPixelRatio(Math.min(devicePixelRatio, 2))
    this.camera.aspect = innerWidth / innerHeight
    this.camera.fov = 2 * Math.atan((innerHeight / 2) / 1000) * (180 / Math.PI)
    this.camera.updateProjectionMatrix()
    this.cube.scale.set(150, 150, 150)
  }

  listen() {
    addEventListener('resize', this.resize)
    addEventListener('click', this.moveObject)
    requestAnimationFrame(this.render)
  }

  render(t) {
    requestAnimationFrame(this.render)
    this.renderer.render(this.scene, this.camera)
  }
}

new Sketch()

body {
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>