Combining two objects using three.js is not possible due to concatenation

Question

Combining two objects using three.js is not possible due to concatenation

I am attempting to combine two objects (bar and circle) to create a ping pong racket in three js,

Even after using

var parent = new THREE.Object3D();

, the objects remain separate

This is the code for my function :

 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
  }

View Output Screenshot

javascript three.js

Answer 1

Answer №1

To improve your code and easily identify errors, it's important to be more cautious and organize it efficiently. For instance, the declaration of var barre appears twice, once for a geometry and again for the mesh. It's advisable to use more descriptive and distinct variable names to prevent confusion. Additionally, avoid chaining var declarations to simplify future modifications.

Moreover, when grouping barre and paddle within a parent element, ensure that you return the entire parent object instead of just the paddle component.

Below is the same code but enhanced with better organization and unique variable names:

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

    // Barre
    var barreShape = new THREE.CubeGeometry(20, 20, 170)
    var barreSurface = new THREE.MeshBasicMaterial({ color: 0xff0000 })
    var newBarreMesh = new THREE.Mesh(barreShape, barreSurface)

    // Grouping Components
    var mainParent = new THREE.Object3D()
    mainParent.add(customizedPaddle)
    mainParent.add(newBarreMesh)
    scene.add(mainParent)

    // Transformations
    newBarreMesh.rotation.y = 180
    newBarreMesh.position.x = 100
    newBarreMesh.position.z = 2000
    newBarreMesh.position.y = 300

    return mainParent
}

Answer 2

To improve your code and easily identify errors, it's important to be more cautious and organize it efficiently. For instance, the declaration of var barre appears twice, once for a geometry and again for the mesh. It's advisable to use more descriptive and distinct variable names to prevent confusion. Additionally, avoid chaining var declarations to simplify future modifications.

Moreover, when grouping barre and paddle within a parent element, ensure that you return the entire parent object instead of just the paddle component.

Below is the same code but enhanced with better organization and unique variable names:

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

    // Barre
    var barreShape = new THREE.CubeGeometry(20, 20, 170)
    var barreSurface = new THREE.MeshBasicMaterial({ color: 0xff0000 })
    var newBarreMesh = new THREE.Mesh(barreShape, barreSurface)

    // Grouping Components
    var mainParent = new THREE.Object3D()
    mainParent.add(customizedPaddle)
    mainParent.add(newBarreMesh)
    scene.add(mainParent)

    // Transformations
    newBarreMesh.rotation.y = 180
    newBarreMesh.position.x = 100
    newBarreMesh.position.z = 2000
    newBarreMesh.position.y = 300

    return mainParent
}

Combining two objects using three.js is not possible due to concatenation

Answer №1

Similar questions

Is it possible to utilize JavaScript for transmitting and storing data on a server?

Showing the number of guilds as an action displayed on the screen

Exploring AngularJS capabilities: Retrieving data and headers from an HttpResponse

headerFilterParameters sans editor

Guide on embedding a map inside a popover using Bootstrap

Value replaced by ajax response

Inserting data into a table using variables in Mssql database management system

Looking to transfer data between files in Nodejs

Backend undergoing fluctuations in hourly values

By checking the active box and completing the fields, the button will be activated

Creating a table from data in your database using Firebase

Encountering an Error when Integrating Pusher (real-time data library) with Next.js: PusherRequestError - Unexpected status code 400

Encountering an issue with extending the MUI color palette, receiving a "reading 'dark'" error due to properties of undefined

What is the best way to extract user input from a bootstrap search bar and integrate it into an ajax request to fetch information?

Jquery loop using closures

Attempting to eliminate annoying alternative text from the lightbox photo gallery

The Group Hover feature in Tailwind CSS seems to only affect the initial SVG element and not any subsequent SVG children within the group

My goal is to implement a confirmation modal prior to any route changes within Next.js framework

Steps to implement jQuery after executing the command "npm install jquery"

Using jQuery DataTable to fetch JSON data upon Document Loaded