How to show ThreeJs .obj file in botstrap responsive modal?

Question

I have below code to show .obj file using 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);

Here is my bootstrap modal code -

              <!-- 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>

output is like this -

But i want to show it based on screen size. So I changed

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

to

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

Now its output is like this -

Currently 2 issues -

1. modal size is fixed, i need dynamic
2. output (chair) is also shrinked.

How to fix these ? Please Guide/Help.

Answer 1

You're changing the renderer size without recalculating your camera's aspect ratio, therefore you're getting a squished image.

You can set your camera aspect ratio by calculating the width / height of your renderer size. Eg: in your case for a renderer of size 700 x 700 the final aspect ratio will be 1. To make calculations easier just leave the division on the code in such way.

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

Note the call to the updateProjectionMatrix method after that to apply the new aspect settings.