Как изменить положение объекта при изменении размера окна - PullRequest
Новая
       19

Как изменить положение объекта при изменении размера окна

0 голосов
/ 12 декабря 2018

Проблема, с которой я сталкиваюсь, заключается в следующем:

Если я обновлю страницу, мой объект будет определенным образом позиционирован, и когда я изменю размер окна, мой объект будет изменен и правильно размещен.Однако, если я обновлю страницу после изменения размера окна, мой объект будет расположен неправильно.

Мой код указан ниже: 

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;затем я получаю последовательное поведение, когда я перезагружаю и изменяю размер страницы, однако положение моей модели неправильное.Мне нужно, чтобы мой объект был последовательно выровнен по нижней части страницы.

Любой совет очень ценится.

1 Ответ

0 голосов
/ 12 декабря 2018

Это потому, что вы устанавливаете позицию только в пределах 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() как при загрузке, так и при изменении размера окна, чтобы оба события вели себя одинаково.

...