如何在窗口调整大小时重新定位对象答案

【问题标题】：How to reposition object on window resize如何在窗口调整大小时重新定位对象
【发布时间】：2019-05-13 18:18:57
【问题描述】：

我遇到的问题如下：

如果我刷新页面，我的对象将以某种方式定位，当我调整窗口大小时，我的对象将被调整大小并正确定位。但是，如果我在调整窗口大小后刷新页面，我的对象将定位不正确。

我的代码如下：

jQuery( document ).ready(function( $ ) {
  var scene, camera, renderer , controls, ambientLight, pointLight, textureLoader, map, material, loader, container;
  var canvas = $('#canvas');

  function init() {
      scene = new THREE.Scene();
      initChris();
      initCamera();
      initRenderer();
      initControl();
      render();
  }

  function initCamera() {
      camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 3600);
      ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
      pointLight = new THREE.PointLight( 0xffffff, 0.8 );
      camera.position.set(0, 0, 1800);
      camera.add( pointLight );
      scene.add( camera );
      scene.add( ambientLight );
      camera.lookAt(scene.position);
  }

  function initRenderer() {
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.setClearColor( 0x000000, 0 );
  }

  function initControl(){
      controls = new THREE.OrbitControls( camera );
      controls.enableZoom  = false;
      controls.minPolarAngle = Math.PI * 0.5;
      controls.maxPolarAngle = Math.PI * 0.5;
      controls.update();
  }

  function initChris() {
    textureLoader = new THREE.TextureLoader();
    map = textureLoader.load('img/CHRIS.jpg');
    material = new THREE.MeshPhongMaterial({map: map});
    loader = new THREE.OBJLoader();
    loader.load( 'obj/CHRIS.obj', function ( object ) {
      object.traverse( function ( node ) {
        if ( node.isMesh ){
          node.material = material;
        }
      });
      object.position.y = - (window.innerHeight / 2) - 400;
      scene.add( object );
    });
  }

  function onWindowResize(){
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize( window.innerWidth, window.innerHeight );
  }

  function render() {
      canvas.append(renderer.domElement);
      requestAnimationFrame(render);
      renderer.render(scene, camera);
      window.addEventListener( 'resize', onWindowResize, false );
  }

  init();
});

我相信我面临的问题与 object.position.y = - (window.innerHeight / 2) - 400;以及何时触发。

如果我取出 object.position.y = - (window.innerHeight / 2) - 400;然后我在重新加载和调整页面大小时得到一致的行为，但是我的模型的位置是错误的。我需要我的对象始终与页面底部对齐。

非常感谢任何建议。

【问题讨论】：

标签： javascript jquery three.js html5-canvas webgl

【解决方案1】：

这是因为您只设置了initChris() 内的位置，而不是onWindowResize()。如果您想看到两者的行为相同，则需要执行以下操作：

// Init variable outside of functions to place it in global scope.
var chris;

function initChris() {
    // ...

    loader.load( 'obj/CHRIS.obj', function ( object ) {
        object.traverse( function ( node ) {
            if ( node.isMesh ){
                node.material = material;
            }
        });

      // Assign a value to chris so it's
      // accessible from outside this function
      chris = object;
      updatePositionChris();
      scene.add( object );
    });
}

function onWindowResize(){
    // ...
    updatePositionChris();
}

function updatePositionChris() {
    chris.position.y = - (window.innerHeight / 2) - 400;
}

在函数外部声明 var chris; 会设置其范围，以便可以在这些函数内部访问它。然后，您必须在加载时调用 updatePositionChris()，并在调整窗口大小时调用，以便两个事件的行为方式相同。

【讨论】：