Renderer

import { WebGLRenderer } from 'three'
    
    class Renderer {
      constructor(element) {
        this.renderer = new WebGLRenderer({ antialias: true, alpha: true })
    
        this.setRenderer(element)
      }
    
      setRenderer(element) {


        this.renderer.setPixelRatio(1)
        this.renderer.shadowMap.enabled = true
        this.renderer.setSize(element.clientWidth || window.innerWidth, element.clientHeight || window.innerHeight)
    
        element.appendChild(this.renderer.domElement)
      }
    
      get domElement() {
        return this.renderer.domElement
      }
    
      get rendererElement() {
        return this.renderer
      }
    }
    
    export { Renderer }

Camera

import { CinematicCamera } from 'three/examples/jsm/cameras/CinematicCamera'

class Camera {
  constructor() {
    this.camera = new CinematicCamera(1000, 1, 1, 2000)

    this.setCamera()
  }

  setCamera() {
    this.camera.position.set(100, 100, 100)
  }

  get cameraElement() {
    return this.camera
  }
}

export { Camera }

I want to make a square, but it stretches and shrinks according to the aspect ratio. How can I fix the proportions and only change the canvas size?

I've been advised to fix the size of the container, but I don't know how to do it.

change renderer I made it responsive like this. The problem is that the click area doesn't work.

// this.renderer.setSize(element.clientWidth|| 1000, element.clientHeigh|| 1000)
    if(window.innerWidth >=1024){
      this.renderer.setSize(1000 || 1000, 1000 ||1000)
    }else if(window.innerWidth >=768){
      this.renderer.setSize(500 || 500, 500 || 500)
    }else if(window.innerWidth <=767){
      this.renderer.setSize(300 || 300, 300|| 300)
    }

mouse click on object The mouse.x value inside the if statement doesn't work. But the console prints a message. The commented out mouse.x works just fine, but getting inside the if statement is a problem.

let selectedObject = null
  const raycaster = new THREE.Raycaster()
  const mouse = new THREE.Vector2()
      function onclick(event) {
        // mouse.x = (event.clientX / 1000) * 2 - 1
        // mouse.y = -(event.clientY / 1000) * 2 + 1
        if(window.innerWidth >=1024){    
          this.mouse.x = (event.clientX / 1000) * 2 - 1
        }else if( window.innerWidth >=768){
          this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1
        }else{
          this. mouse.x = (event.clientX / 400) * 2 - 1
        }
    
    
        if(window.innerWidth >=1024){    
          this.mouse.y = (event.clientY / window.innerHeight) * 2 + 1
        }else if(window.innerWidth >=768){
          this.mouse.y = (event.clientY / 500) * 2 + 1
        }else{
          this.mouse.y = (event.clientY / 300) * 2 + 1
        }