如何加入两个盒子几何体？

Question

我想将 2 个长方体几何体连接起来（下图），它们可以作为一个对象拖动旋转。下面是一个可拖动旋转框几何体 ( var geometry1 ) 的代码，我需要在代码中添加什么，以便第二个框体几何体 ( var geometry2 ) 连接到第一个？

  var three = THREE;
  var space = new three.Scene();
  var cam = new three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  var rend = new three.WebGLRenderer();

  rend.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(rend.domElement);

  var geometry1 = new three.BoxGeometry(1, 2, 1);
  var geometry2 = new three.BoxGeometry(1, 1, 1);

  var material = new three.MeshFaceMaterial([
    new three.MeshBasicMaterial({
      color: "red"
    }),
    new three.MeshBasicMaterial({
      color: "orange"
    }),
     new three.MeshBasicMaterial({
      color: "yellow"
    }),
    new three.MeshBasicMaterial({
      color: "green"
    }),
    new three.MeshBasicMaterial({
      color: "blue"
    }),
    new three.MeshBasicMaterial({
      color: "cyan"
    })
  ]);

  var cube = new three.Mesh(geometry1, material);
  cube.rotation.x = Math.PI / 4;
  cube.rotation.y = Math.PI / 4;
  space.add(cube);
  cam.position.z = 5;

  var Dragging = false;
  var previousMousePosition = {
    x: 0,
    y: 0
  };

  $(rend.domElement).on('mousedown', function(e) {
      Dragging = true;
    })
    .on('mousemove', function(e) {
      //console.log(e);
          var deltaMove = {
            x: e.offsetX - previousMousePosition.x,
            y: e.offsetY - previousMousePosition.y
          };

          if (Dragging) {

            var deltaRotationQuaternion = new three.Quaternion()
              .setFromEuler(new three.Euler(
                toRadians(deltaMove.y * 1),
                toRadians(deltaMove.x * 1),
                0,
                'XYZ'
              ));

            cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
          }

          previousMousePosition = {
            x: e.offsetX,
            y: e.offsetY
          };
        });

      $(document).on('mouseup', function(e) {
        Dragging = false;
      });

      window.requestAnimFrame = (function() {
        return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
      })();

      var lastFrameTime = new Date().getTime() / 1000;
      var totalGameTime = 0;

      function update(dt, t) {

        setTimeout(function() {
          var TimeNow = new Date().getTime() / 1000;
          var dt = TimeNow - (lastFrameTime || TimeNow);
          totalGameTime += dt;

          update(dt, totalGameTime);

          lastFrameTime = TimeNow;
        }, 0);
      }

      function render() {
        rend.render(space, cam);

        requestAnimFrame(render);
      }

      render();
      update(0, totalGameTime);

      function toRadians(angle) {
        return angle * (Math.PI / 180);
      }

      function toDegrees(angle) {
        return angle * (180 / Math.PI);
      }

Answer 1

您可以创建一个群组：

var group = new THREE.Group();

group.add(geometry1);
group.add(geometry2);

scene.add(group);

现在您可以更改它的位置、旋转、四元数，通常只需使用 group 变量即可。

如何加入两个盒子几何体？

How to join two box geometries?

javascript

3d

jquery

three.js