How insert a 2nd model to the stage and make it move by using three js?

Questions
,
1

Hello, I insert a 3D model in gltf format on the stage and made it move,
next, I insert another 3D model on the stage using the same block of code and try to make it move using the same code as the previous model, but this doesn’t work, and I can’t scale this 3D model or move it around the stage in any way. Please tell me what I’m doing wrong and how to fix it?
The entire code is shown below.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title></title>
    <style>
      canvas { width: 1250px; height: 500px;}
    </style>
  </head>
  <body>
    <script src="three.min.js"></script>
    <script src="GLTFLoader.js"></script>
    <canvas>
    </canvas>
    <script>
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 100000);

      camera.position.z = 500;
      camera.position.y = 100;
      camera.position.x = -400;
      camera.rotation.y = -0.6;
      camera.rotation.x = 0;
      camera.rotation.z = 0;
      const color = 0xFFFFFF;
      const intensity = 1;
      const light = new THREE.AmbientLight(color, intensity);
      scene.add(light);
      


      new THREE.GLTFLoader().load('elkanomer2.gltf', function(result){
        scene.add(result.scene);
        model = result.scene.children[0];
        model.scale.set(30,30,30);
        model.position.x = 0;
        model.position.z = 0;
        model.position.y = -110;
      });
      new THREE.GLTFLoader().load('234568kot.gltf', function(result){
        scene.add(result.scene);
        model1 = result.scene.children[1];
        model1.scale.set(30,30,30);
        model1.position.x = 0;
        model1.position.z = 0;
        model1.position.y = -110;
      });

      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
      renderer.ShadowMapEnabled = true;
      var ypos = 12, maxPos = -510, start = 2250;
      var render = function () {
        requestAnimationFrame(render);
          
          const newPosition = model.position.x - ypos;
            if (newPosition < maxPos) {
            model.position.x = start;
            }
            else {
            model.position.x = newPosition;
            }
          const newPosition2 = model1.position.x - ypos;
            if (newPosition2 < maxPos) {
            model1.position.x = start;
            }
            else {
            model1.position.x = newPosition2;
            }
          renderer.render(scene, camera);
          
          
     };
    render();

    </script>
  </body>
</html>

Please help me.

2

In most cases, it’s actually better to treat glTF models like so:

model = result.scene;

model.scale.set(30,30,30);
model.position.set(0, -110, 0);

scene.add(model);

Otherwise transformations might not behave as expected.

1 Like