Как показать файл Three Js .obj в моде, отвечающем ботстрапу? - PullRequest
Новая
       80

Как показать файл Three Js .obj в моде, отвечающем ботстрапу?

0 голосов
/ 06 февраля 2020

У меня есть код ниже, чтобы показать .obj файл, используя OBJLoader. 

    this.renderer = new THREE.WebGLRenderer({ canvas: this.canvasRef.nativeElement });
    this.renderer.setSize( window.innerWidth, window.innerHeight );

    // scene
    this.scene = new THREE.Scene();
    this.renderer.setClearColor(0xcdcbcb, 1);

    // camera
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
    // this.camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.01, 10000);
    this.camera.position.set(1, 1, 1);
    // this.camera.position.set(0, 0, 1);
    // this.camera.position.set(113, 111, 113);

    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.scene.add(new THREE.AmbientLight(0x222222));
    this.scene.add(this.camera); // required, because we are adding a light as a child of the camera

    // controls
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);

    // lights
    var light = new THREE.PointLight(0xffffff, 0.8);
    this.camera.add(light);

    var geometry = new THREE.BoxGeometry(1,1,1);

Вот мой bootstrap модальный код - 

              <!-- The Modal -->
          <div class="modal fade" id="View3dModal" *ngIf="is3D">
            <div class="modal-dialog modal-lg modal-dialog-centered">
              <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                  <h6 class="modal-title">3D</h6>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                  <app-show3d file={{objFilePath}}></app-show3d>
                </div>

              </div>
            </div>
          </div>

вывод выглядит так - obj output in modal

Но я хочу показать это в зависимости от размера экрана. Поэтому я изменил 

this.renderer.setSize( window.innerWidth, window.innerHeight ); // Here output is clear

на 

this.renderer.setSize(700, 700); // kept constant to check, output is shrinked

Теперь его вывод выглядит так - fixed height weight output

В настоящее время 2 выпуска -

  1. модальный размер фиксирован, мне нужны динамические c
  2. вывод (стул) также уменьшен.

Как это исправить? Пожалуйста, руководство / помощь.

1 Ответ

2 голосов
/ 06 февраля 2020

Вы изменяете размер рендерера без пересчета соотношения сторон вашей камеры, поэтому вы получаете сжатое изображение.

Вы можете установить соотношение сторон вашей камеры, рассчитав width / height вашего размера рендерера. Например: в вашем случае для рендера размером 700 x 700 конечное соотношение сторон будет 1. Чтобы упростить вычисления, просто оставьте разделение в коде таким образом. 

this.camera.aspect = 700 / 700;
this.camera.updateProjectionMatrix();

Обратите внимание на вызов метода updateProjectionMatrix после этого для применения новых настроек аспекта.

...