mi código es:
<script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.SphereGeometry(1, 32, 32); var material = new THREE.MeshNormalMaterial(); var sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); camera.position.z = 3; function render() { requestAnimationFrame( render ); sphere.rotation.x += 0.01; sphere.rotation.y += 0.01; renderer.render( scene, camera ); } render(); </script>Uso three.js para hacer una esfera 3D. Y lo necesito para estar en el centro de la pantalla cada vez que la viuda cambie de tamaño. En este momento, si muevo el tamaño de las viudas, se romperá. ¿Cómo puedo arreglarlo?
Agregue un oyente para el evento de cambio de tamaño de la ventana para cambiar la cámara.
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.SphereGeometry(1, 32, 32); var material = new THREE.MeshNormalMaterial(); var sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); camera.position.z = 3; // Add listener for window resize. window.addEventListener('resize', onWindowResize, false); function render() { requestAnimationFrame( render ); sphere.rotation.x += 0.01; sphere.rotation.y += 0.01; renderer.render( scene, camera ); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } render(); body { padding: 0px; margin: 0px; } <script src="https://rawgit.com/mrdoob/three.js/r134/build/three.min.js"></script>