How to insert 2nd model on stage and make it move with thee js?

I

IliaNeverov2020-07-11 21:57:14

JavaScript

IliaNeverov, 2020-07-11 21:57:14

Hello, I placed a gltf 3d model on the stage and made it move,
then I place another 3d model on the stage with the same block of code and try to make it also move with the same code as the previous model, but it does not works, also I can't scale this 3d model and move around the scene in any way. Please tell me what I'm doing wrong and how to fix it?
Below is the entire code.

<!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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

I

IliaNeverov, 2020-07-12
@IliaNeverov

For those who have encountered the same problem and are now philosophizing how to solve it , here is a link to the answer .