Trouble loading two different objects in different divs

Questions
1

I am trying to load two different object in their own divs but I don’t know how to do this. Sorry if already asked

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <style>
    body {
      margin: 0;
    }
  </style>
  <body>
    <div id="ticket"></div>

    <script src="js/three.min.js"></script>
    <script src="GLTFLoader.js"></script>
    <script>
      let scene, camera, renderer, ticket;
      init();
      animate();

      function init() {
        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(
          30,
          window.innerWidth / window.innerHeight,
          1,
          5000
        );
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        camera.position.y = 10;
        camera.position.z = 2000;

        var pointLight = new THREE.PointLight(0xffffff, 2);
        pointLight.position.set(-10, 0, 1000);
        var lightHolder = new THREE.Group();
        lightHolder.add(pointLight);
        scene.add(lightHolder);

        renderer = new THREE.WebGLRenderer({ alpha: true });
        renderer.setClearColor(0xffffff, 0);
        renderer.setSize(window.innerWidth, window.innerHeight);

        document.getElementById("ticket").appendChild(renderer.domElement);

        let loader = new THREE.GLTFLoader();
        loader.load("ticket/scene.gltf", function(gltf) {
          ticket = gltf.scene.children[0];
          ticket.rotation.z = 34.5;
          scene.add(gltf.scene);
        });

        loader.load("ticket2/scene.gltf", function(gltf) {
          ticket2 = gltf.scene.children[0];
          ticket2.rotation.z = 34.5;
          scene.add(gltf.scene);
        });
      }

      var angularSpeed = 0.2;
      var lastTime = 0;

      function animate() {
        requestAnimationFrame(animate);
        if (ticket != undefined) {
          ticket.rotation.z += 0.03;
        }
        renderer.render(scene, camera);
      }

      window.addEventListener("resize", () => {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();
      });
    </script>
  </body>
</html>
2

It seems the same question was already asked at stackoverflow:

Even without this thread, I was going to refer to the same official example: webgl_multiple_elements

1 Like