每当寡妇的大小发生变化时，我如何才能使这个球体位于中心

Question

我的代码是：

<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>

我使用 three.js 制作 3D 球体。当寡妇改变大小时，我需要它每次都在屏幕中央。现在，如果我移动寡妇的大小，它就会破裂。我该如何解决？

Answer 1

为 window 调整大小事件添加侦听器以更改相机。

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>

每当寡妇的大小发生变化时，我如何才能使这个球体位于中心

How I can make this sphere on center every time when size of widow change

html

javascript

3d

three.js