三个js多场景（gltf）答案

【问题标题】：three js multiple scenes (gltf)三个js多场景（gltf）
【发布时间】：2021-06-20 16:51:40
【问题描述】：

所以我有这个代码

//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);

将 3d 模型加载到网站中，但是我想添加多个场景，以便加载 mutant/scene.gltf 和 golem/scene.gltf 例如，两个或更多模型我该怎么做？我尝试添加另一个带有类场景的 div，并喜欢使用名称而不是 app.js app2.js 等再次复制所有文件。遗憾的是，帮助将不胜感激

索引代码：

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

【问题讨论】：

标签： javascript three.js

【解决方案1】：

导入第二个模型时无需创建单独的场景。您可以重用整个设置，甚至是加载程序实例。像这样尝试：

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];
});

您只需确保正确定位这两种资产。使用上面的代码，它们被放置在同一个位置。

【讨论】：

谢谢！代码现在可以工作了，请问如何设置第二个摄像头和位置？
嗯，不知道你的意思。您的场景中只有一个摄像机。
我如何更改第二个模型的位置和 fov、远、近？它设置在拳头模型位置 fov 远近，这使得它更小，因为它的模型不同
抱歉，这没有意义。 fov、near 和 far 是相机属性。您只能更改模型的位置、旋转和比例。所以试试golem.position.set( 1, 2, 3 ); 和/或golem.scale.set( 2, 2, 2 );。