Angularjs 如何在botstrap响应模式中显示ThreeJs.obj文件？

我有下面的代码来使用

OBJLoader

显示

.obj

文件

    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);

这是我的引导模式代码-

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

到

现在它的输出是这样的-

目前有2期-

模态大小是固定的，我需要动态的

产出（椅子）也在缩减

---

如何修复这些问题？请指导/帮助。

您正在更改渲染器大小，而没有重新计算相机的纵横比，因此您将得到一个压扁的图像

您可以通过计算渲染器大小的宽度/高度来设置相机纵横比。 例如：对于大小为

700x700

的渲染器，最终纵横比将为

1

。为了简化计算，只需以这种方式在代码上留下除法

this.camera.aspect=700/700；
this.camera.updateProjectMatrix（）；

---

请注意，在此之后调用了

updateProjectionMatrix

方法来应用新的纵横比设置。

您正在更改渲染器大小，而没有重新计算相机的纵横比，因此您将获得一幅压缩图像

您可以通过计算渲染器大小的宽度/高度来设置相机纵横比。 例如：对于大小为

700x700

的渲染器，最终纵横比将为

1

。为了简化计算，只需以这种方式在代码上留下除法

this.camera.aspect=700/700；
this.camera.updateProjectMatrix（）；

请注意在此之后对

updateProjectionMatrix

方法的调用，以应用新的方面设置

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

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