Question

我遇到的问题如下：

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

我的代码如下：

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;那么当我重新加载页面并调整页面大小时，我会得到一致的行为，但是我的模型位置错误。我需要使对象始终与页面底部对齐。

任何建议都非常感谢。

Answer 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()时以及在窗口调整大小时调用find . -iname *.html | xargs -P $(nproc) -I {} tidy --new-blocklevel-tags span --doctype omit --tidy-mark no --indent-with-tabs yes -wrap 0 -qim "{}"，以便两个事件的行为都相同。

如何在窗口调整大小时重新放置对象

1 个答案: