Как подогнать самолет к холсту

Я пытаюсь подогнать <a-plane> к холсту с рамкой.

Мне удалось получить необходимые параметры:

   scene = document.querySelector('a-scene');
   width = scene.canvas.width;
   height = scene.canvas.height;

Я не могу найти внятного ответа относительно корреляции между пикселями и метрами, поэтому я нашел соотношение zPosition/590, которое, кажется, хорошо работает на 720p и 1080p, но что-то нелинейно, расстояние между окном и плоскостью отличается, когда окно маленькое, а когда большое.
Провел несколько экспериментов здесь.

Кто-нибудь пробовал подобное?


javascript aframe webvr
person Piotr Adam Milewski    schedule 07.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле, <a-camera> — это THREE.PerspectiveCamera, вот диаграмма. Я думаю, что есть несколько важных атрибутов, fov, near, far, aspect(canvas.width / canvas.height).

Зная расстояние от камеры до плоскости, мы можем вычислить ширину и высоту плоскости.

Вы можете прикрепить компонент foo к тегам <a-plane>:

AFRAME.registerComponent('foo',{
schema : {},
dependencies :["position" , "rotation"],
init:function(){
    this.camera = this.el.sceneEl.camera;
    /*get the absolute distance from the camera to the plane,
    the reason why I use Vector3 instead of this.camera.getWorldPosition() is the camera position had not initlized when this component initialized. 
    */
    this.distance = this.el.object3D.getWorldPosition().distanceTo(new THREE.Vector3(0,1.6,0));
    var height = 2 * this.distance * Math.tan(this.camera.fov / 2 / 180 * Math.PI);
    var width = height * this.camera.aspect;
    //get the plane's absolute height and width
    height = height / this.el.object3D.children[0].getWorldScale().y;
    width = width / this.el.object3D.children[0].getWorldScale().x;
    this.el.setAttribute("width",width);
    this.el.setAttribute("height",height);
    this.el.object3D.children[0].lookAt(this.camera.getWorldPosition());
}

});

Необходимо улучшить:

  1. динамически получать положение камеры в мире, а также мировой масштаб самолета.
  2. когда камера не смотрит на самолет, переместите самолет (немного сложно).
person Craig.Li    schedule 12.07.2017
comment
я понял идею, но не могу заставить ее работать jsfiddle.net/cpg890nm - person Piotr Adam Milewski; 12.07.2017
comment
@PiotrAdamMilewski Я планировал написать полный пример jsfiddle, но мне это не удалось, я не могу настроить причину и не могу его отлаживать. Он работает снаружи. - person Craig.Li; 12.07.2017
comment
удалось заставить это работать, я не могу отредактировать ваш ответ, единственная «ошибка» - это lookAt(), камера должна смотреть на самолет, а не самолет на камеру. :jsfiddle.net/cpg890nm/1 тем не менее мне пришлось сделать пару обходных путей, gj с аспектом /fov идея - person Piotr Adam Milewski; 12.07.2017
comment
Это круто! - person Craig.Li; 12.07.2017