three.jsgltf

how to put a Gltf Model in a group


I'm trying to put a loaded gltf model in a group with a cube. I have tried doing it normally, but the sword model doesn't move. I am fairly new to three.js as I am in 7th grade doing this on my own time. I spent a great time off of this game I am making because I had a great setback with the models. My Chromebook is weird because of the school restrictions so I have to run the script on replit.

before Z: here After Z:here

const player = new THREE.Group();
    if(sword) player.add(sword);// sword is the gltf.scene
     player.add(cube2)

here is the link to the project

How would I do it?

here is more of the script

    let robot;
    let sword;
    let swordd;

    loader.load( 'RobotExpressive.glb', function ( gltf )
        {
          robot = gltf.scene;  // sword 3D object is loaded
          robot.scale.set(1, 1, 1);
          scene.add(robot);
        } );
    loader.load( 'Sword.glb', function ( gltf )
    {
      sword = gltf.scene;  // sword 3D object is loaded
      sword.scale.set(1, 1, 1);
      scene.add(sword);
      swordd = gltf.asset;
    } );
    const robotBody = new createCannonBox(
         new CANNON.Vec3(1,1,1),
         new CANNON.Vec3(5, 5, 5),
         10
       ); 
     // Initlising the modles ^
     
     
     const cube2 = new THREE.Mesh(geometry, material);
          cube2.castShadow = true;
          scene.add(cube2);
          const cubeBody2 = new createCannonBall(1, new CANNON.Vec3(0, 2, 0), 1);
    // makeing cube using custom funtion ^
const group = new THREE.Group()
group.add( sword );
group.add( cube2 );

// Do not forget this line
scene.add( group );
// making the group^

    function go() {
            if (keys.w) moveVector.z -= 0.1;
            if (keys.s) moveVector.z += 0.1;
            if (keys.a) moveVector.x -= 0.1;
            if (keys.d) moveVector.x += 0.1;
            if (keys.c) moveVector.y -= 0.1;
            if (keys.v) moveVector.y += 0.1;
            if (checkK && colide && keys.b) (checkK = false), (colide = false);
            if (!checkK && keys.b)
              (boddy.mass = 1), Name.scale.copy(new THREE.Vector3(1, 1, 1));
            if (keys.m) controls.lock();
            if (keys.p) cubeBody.velocity.set(0, 0, 0), ballBody.velocity.set(0, 0, 0);
            window.addEventListener("keydown", function (e) {
              if (e.code == "Space" && g == true)
                cubeBody2.velocity.set(0, 5, 0), (g = false);
            });

            move(cube1);
            move(ball1);
            
            
            if (robot) robot.position.copy(robotBody.position);
            if (robot) robot.quaternion.copy(robotBody.quaternion);
           // if (sword) sword.position.copy(swordBody.position);
            //if (sword) //sword.quaternion.copy(swordBody.quaternion);

            
            
            

            moveVector.multiplyScalar(0.6);
            camera.translateX(moveVector.x);
            camera.translateZ(moveVector.z);
            camera.translateY(moveVector.y);

            if (colide && checkK) {
              Name.scale.copy(new THREE.Vector3(0.5, 0.5, 0.5));
              if (keys.c) distance += 0.1;
              if (keys.v && distance > 1) distance -= 0.1;
              boddy.quaternion.copy(camera.quaternion);
              Name.position.copy(camera.position);
              Name.translateX(moveVector.x);
              Name.translateY(moveVector.y);
              Name.translateZ(moveVector.z - distance);
              boddy.position.copy(Name.position);
            
            } else {
              pickup = true;
            }
            
           

            
            score.innerText = checkK;
            cube.position.copy(cubeBody.position);
            cube.quaternion.copy(cubeBody.quaternion);
            ball.position.copy(ballBody.position);
            ball.quaternion.copy(ballBody.quaternion);
            camera.position.y = cubeBody2.position.y;
            cubeBody2.position.x = camera.position.x;
            cubeBody2.position.z = camera.position.z;
            cubeBody2.quaternion.copy(camera.quaternion);
            if (sword && keys.z)  group.position.y = 2;
            
            if (clock.elapsedTime - lastResetTime >= resetInterval) {
              lastResetTime = clock.elapsedTime;
            }
          }

          function animate() {
            const delta = clock.getDelta();
            world.step(delta);
            check();
            go();
            fly.update(delta);
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
          }

          animate();
          
       // update and animate script^


Solution

  • Well, you already have the correct answer.

    To add two objects into a group, you need to use the .add() method like this:

    const group = new THREE.Group()
    group.add( sword );
    group.add( cube2 );
    
    // Do not forget this line
    scene.add( group );

    Do not forget to add the group to the scene.


    Edit since code is shared

    I tried your code and it's working as it should be. I didn't downloaded your gltf files so I added a capsule instead of the sword.

    You have your group with the sword (here the green capsule) and the cube. With your code, when you press Z, the group should go up as follow:

    if (sword && keys.z)  group.position.y = 2;
    

    This is before pressing the Z key:

    Before pressing Z

    After pressing Z;

    After pressing Z

    So, what's the issue here? I don't see any.