mi lienzo three.js no responde en ios
cuando voy al modo horizontal en el iPhone 12, el lienzo no responde. se vuelve pequeño y cuadrado, y cuando vuelvo al modo retrato se queda en este nuevo tamaño (cuadrado pequeño)
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.01,1000); var clock = new THREE.Clock(); var renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); window.addEventListener ('resize', ()=> { renderer.setSize(window.innerWidth,window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); }) var rmapped = 0; const controls = new OrbitControls( camera, renderer.domElement ); var loader = new GLTFLoader(); scene.background = new THREE.Color(0x000000) const cube = new THREE.BoxGeometry( 1,1,1 ); var light1 = new THREE.PointLight( 0xff0040, 2, 50 ); light1.add( new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ) ); scene.add( light1 ); var light2 = new THREE.PointLight( 0x0040ff, 2, 50 ); light2.add( new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) ) ); light2.position.x=3; var light2Obj = new THREE.Object3D(); light2Obj.add(light2); scene.add(light2Obj); camera.position.set(0, 5, 10); function animate(){ requestAnimationFrame(animate); light1.rotateY(0.005); light2Obj.rotateY(0.009); renderer.render( scene, camera ); function render() { renderer.render( scene, camera ); } } animate()¿Alguna idea de cuál es el problema? parece funcionar en Android. lea en alguna parte que resizeobserver api podría ser una solución, pero no puedo resolverlo
así es como se ve el modo paisaje:
https://i.stack.imgur.com/LXnnz.jpg
volver al modo retrato
