three.js - 将一组对象定位和调整大小到地板/网格

Question

对 three.js 有点陌生，但我会尽力在这里解释。

渲染结果如下：

正如您所注意到的，它太大了，并且没有与网格水平对齐。

目标： 更小，与网格水平对齐。 增加场景大小？ 以某种方式定位 boxGroup ?

容器：

<canvas #canvas id="3dCanvas" style="height:800px; width:800px" tabindex="1"></canvas>

相机设置：

$scope.camera = new THREE.PerspectiveCamera(35, 800/640, 0.1, 10000);

纵横比

$scope.calculateAspectRatio = function() {
  const height = $scope.canvas.clientHeight;
  if (height === 0) {
    return 0;
  }
    return $scope.canvas.clientWidth / $scope.canvas.clientHeight;
}

设置相机：

$scope.setupCamera = function() {
            $scope.camera.aspect = $scope.calculateAspectRatio();
            $scope.camera.updateProjectionMatrix();
            $scope.camera.position.set( 2, 2, 2 );
            const sizeRatio = $scope.Basis.Bredde + $scope.Basis.Hoyde + $scope.Basis.Dybde;
            cameraDistance = $scope.distanceNormal
            $scope.camera.position.set(cameraDistance, cameraDistance, cameraDistance);
        
            //this.camera.position.set(200, 200, 200);
            // this.camera.lookAt(0, 0, 0);
          }

设置渲染器：

$scope.setupRenderer = function() {
            $scope.renderer = new THREE.WebGLRenderer( {canvas: $scope.canvas, antialias: true, alpha:true} );
            $scope.renderer.setPixelRatio(devicePixelRatio);
            $scope.renderer.setClearColor( 0xffffff );
            // this.renderer.setSize(800, 500);
            $scope.renderer.setSize($scope.canvas.clientWidth, $scope.canvas.clientHeight);
            // this.renderer.render(this.scene, this.camera);
          }

添加立方体（与定位无关？）

$scope.addCubes = function() {
            console.log("MULTIPLE CUBES!!");
             const geometry = new THREE.BoxGeometry($scope.Basis.Bredde, $scope.Basis.Hoyde, $scope.Basis.Dybde);
             const edgesGeometry = new THREE.EdgesGeometry(geometry);
             // material
             const edgesMaterial = new THREE.LineBasicMaterial({color: 0x000000});
              // positions
            for (let x = 0; x < $scope.Basis.AntallBasispakningeriBredden; x++) {
              for (let y = 0; y < $scope.Basis.AntallBasispakningeriHoyden; y++) {
                for (let z = 0; z < $scope.Basis.AntallBasispakningeriDybden; z++) {
                  // mesh
                  const mesh = new THREE.Mesh(geometry, $scope.constructMeshMaterial(x,y,z));
                  // this is for adding space between the boxes.
                  //mesh.scale.multiplyScalar(0.9);
                  mesh.position.set(x * $scope.Basis.Bredde, y * $scope.Basis.Hoyde, z * $scope.Basis.Dybde);
                  $scope.boxGroup.add(mesh);
        
                  const lines = new THREE.LineSegments(edgesGeometry, edgesMaterial);
                  mesh.add(lines);
                }
              }
            }
            $scope.scene.add($scope.boxGroup);
          }