0

我有下面的代码来显示.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);

这是我的引导模式代码 -

              <!-- 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 模态输出

但我想根据屏幕尺寸显示它。所以我改变了

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

至

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

现在它的输出是这样的——固定高度重量输出

目前有2个问题-

  1. 模态大小是固定的，我需要动态的
  2. 输出（椅子）也缩小了。

如何解决这些问题？请指导/帮助。

4

1 回答 1

2

您在不重新计算相机的纵横比的情况下更改渲染器大小，因此您会得到一个压扁的图像。

您可以通过计算width / height渲染器大小来设置相机纵横比。例如：在您的情况下，对于大小700 x 700的渲染器，最终的纵横比将为1. 为了使计算更容易，只需以这种方式将除法留在代码上即可。

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

请注意之后对方法的调用以updateProjectionMatrix应用新的方面设置。

于 2020-02-06T14:32:41.450 回答