不能用三个js连接两个对象答案

【问题标题】：cannot concatenate two objects with three js不能用三个js连接两个对象
【发布时间】：2021-01-15 04:13:50
【问题描述】：

我想在三个js中连接两个对象（条和圆来创建一个乒乓球拍），

我用var parent = new THREE.Object3D();但是没有变化，两个对象还是分开的

这是我的功能代码：

 function addPaddle() {
    var paddleGeometry = new THREE.CylinderGeometry(20, 90, 20, 64, 64),
      paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 }),
      paddle = new THREE.Mesh(paddleGeometry, paddleMaterial)
    paddle.rotation.x = 30

    var barre = new THREE.CubeGeometry(20, 20, 170)

    var materialBarre1 = new THREE.MeshBasicMaterial({
      color: 0xff0000,
      side: THREE.DoubleSide,
    })
    var barre = new THREE.Mesh(barre, materialBarre1)

    var parent = new THREE.Object3D()
    parent.add(paddle)
    parent.add(barre)
    scene.add(parent)

    barre.rotation.y = 180
    barre.position.x = 100
    barre.position.z = 2000
    barre.position.y = 300
    return paddle
  }

Output screenshot

【问题讨论】：

为什么返回paddle而不是parent？
当我返回父母时，barre消失了
有没有机会提供一个工作代码sn-p，证明这个问题？
我已经添加了我工作的sn-p代码，你可以在下面看到它

标签： javascript three.js

【解决方案1】：

您只需要更加小心您的代码并更好地组织它以发现错误。例如，您声明了两次var barre，一次用于几何，另一次用于网格。只需创建更具描述性的和唯一变量名称，以免混淆它们。我还会避免链接 var 声明，以便您以后更轻松地添加/删除单个行。

其次，如果您将 barre 和 paddle 分组到父级中，则应返回父级，而不仅仅是桨叶部分。

下面是基本相同的代码，用唯一的变量名进行清理和组织：

function addPaddle() {
    // Paddle
    var paddleGeom = new THREE.CylinderGeometry(20, 90, 20, 64, 64)
    var paddleMat = new THREE.MeshLambertMaterial({ color: 0xff0000 })
    var paddle = new THREE.Mesh(paddleGeom, paddleMat)
    paddle.rotation.x = 30

    // Barre
    var barreGeom = new THREE.CubeGeometry(20, 20, 170)
    var barreMat = new THREE.MeshBasicMaterial({ color: 0xff0000 })
    var barre = new THREE.Mesh(barreGeom, barreMat)

    // Group together
    var parent = new THREE.Object3D()
    parent.add(paddle)
    parent.add(barre)
    scene.add(parent)

    // Transforms
    barre.rotation.y = 180
    barre.position.x = 100
    barre.position.z = 2000
    barre.position.y = 300

    return parent
}

【讨论】：