@IliaNeverov

Как вставить 2ую модель на сцену и заставить ее двигаться с помощью thee js?

Здравствуйте, я разместил 3д модель в формате gltf на сцене и заставил ее двигаться,
далее я размещаю еще одну 3д модель на сцене с помощью такого же блока кода и пытаюсь заставить ее также двигаться с помощью такого же кода как и предыдущую модель, но это не работает, также я не могу масштабировать эту 3д модель и как либо передвигать по сцене. Скажите пожалуйста что я делаю не так и как это исправить?
Ниже приведен весь код.
<!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>
  • Вопрос задан
  • 135 просмотров
Решения вопроса 1
@IliaNeverov Автор вопроса
Для тех кто столкнулся с такой же проблемой и теперь философствует как ее решить вот ссылка на ответ .
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 апр. 2024, в 22:48
100 руб./за проект
19 апр. 2024, в 20:43
20000 руб./за проект