CODEWITHSUNDEEP
javascriptthree.js
user15182665
user15182665

Reputation:

three js multiple scenes (gltf)

so i have this code

//Variables for setup

let container;
let camera;
let renderer;
let scene;
let mutant;

function init() {
  container = document.querySelector(".scene");

  //Create scene
  scene = new THREE.Scene();

  const fov = 935;
  const aspect = container.clientWidth / container.clientHeight;
  const near = 0.1;
  const far = 9500;

  //Camera setup
  camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, -80, 120);

  const ambient = new THREE.AmbientLight(0x404040, 2);
  scene.add(ambient);

  const light = new THREE.DirectionalLight(0xffffff, 2);
  light.position.set(50, 50, 120);
  scene.add(light);
  //Renderer
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(container.clientWidth, container.clientHeight);
  renderer.setPixelRatio(window.devicePixelRatio);

  container.appendChild(renderer.domElement);

  //Load Model
  let loader = new THREE.GLTFLoader();
  loader.load("mutant/scene.gltf", function(gltf) {
    scene.add(gltf.scene);
    mutant = gltf.scene.children[0];
    animate();
  });
}

function animate() {
  requestAnimationFrame(animate);
  mutant.rotation.y = 160.3;
  // mutant.rotation.z = 6;
  mutant.rotation.z += 0.01;
  mutant.rotation.x = -1.70;
  renderer.render(scene, camera);
}

init();

function onWindowResize() {
  camera.aspect = container.clientWidth / container.clientHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(container.clientWidth, container.clientHeight);
}

window.addEventListener("resize", onWindowResize);

that loads a 3d model into a website however i want to add multiple scenes so like it loads mutant/scene.gltf and golem/scene.gltf for example, two models or more how do i do that? i tried adding another div with class scene and like copying all the files again with names like instead of app.js app2.js etc. didn't work sadly assistance would be highly appreciated

index code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="scene"></div>
    <script src="./three.min.js"></script>
    <script src="./GLTFLoader.js"></script>
    <script src="./app.js"></script>
  </body>
</html>

Upvotes: 2

Views: 1298

Answers (1)

Mugen87
Mugen87

Reputation: 31036

There is no need to create a separate scene when importing a second model. You can reuse the entire setup, even the loader instance. Try it like so:

const manager = new THREE.LoadingManager();
manager.onLoad = () => animate();

const loader = new THREE.GLTFLoader(manager);

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

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

You just have to make sure to position both assets properly. With the above code, they are placed at the same spot.

Upvotes: 1

Related Questions