renderizador

 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 }

Cámara

 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 }

Quiero hacer un cuadrado, pero se estira y se encoge según la relación de aspecto. ¿Cómo puedo arreglar las proporciones y solo cambiar el tamaño del lienzo?

Me han aconsejado que fije el tamaño del contenedor, pero no sé cómo hacerlo.

cambiar el renderizador Lo hice receptivo así. El problema es que el área de clic no funciona.

 // 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) }

haga clic con el mouse en el objeto El valor mouse.x dentro de la instrucción if no funciona. Pero la consola imprime un mensaje. El mouse.x comentado funciona bien, pero entrar en la instrucción if es un problema.

 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 }