Застрял на странице предварительной загрузки три. js - PullRequest
Новая
       29

Застрял на странице предварительной загрузки три. js

1 голос
/ 24 апреля 2020

Я пытаюсь реализовать код 3. js для отображения 3d-модели в формате GLTF, но моя страница застревает при предварительной загрузке. Я хочу показать страницу предварительной загрузки, пока не загрузятся все файлы.

Пожалуйста, помогите решить эту проблему.

Вот ссылка о том, как я хочу, чтобы она работала.

Я запускаю его на локальном сервере, но все же сталкиваюсь с этой проблемой. 

let camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(15, 10, -15);

  scene = new THREE.Scene();

  clock = new THREE.Clock();

  const loadingManager = new THREE.LoadingManager(() => {

    const loadingScreen = document.getElementById('loading-screen');
    loadingScreen.classList.add('fade-out');

    // optional: remove loader from DOM via event listener
    loadingScreen.addEventListener('transitionend', onTransitionEnd);

  });

  // gltf

  const gltfLoader = new THREE.GLTFLoader();

  gltfLoader.load('Tower.glb', (gltf) => {
    const root = gltf.scene;
    scene.add(root);

  });

  const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(1, 1, -1);
  scene.add(directionalLight);

  //

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  //

  const controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.target.set(0, 2, 0);
  controls.update();

  //

  window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

  requestAnimationFrame(animate);
  render();

}

function render() {

  const delta = clock.getDelta();

  renderer.render(scene, camera);

}

function onTransitionEnd(event) {

  event.target.remove();

}
html,
body {
  overflow: hidden;
  margin: 0;
  width: 100%;
  height: 100%;
}

#loading-screen {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 1;
  transition: 1s opacity;
}

#loading-screen.fade-out {
  opacity: 0;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #9370DB;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #BA55D3;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #FF00FF;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Sky Box</title>
  <link rel="stylesheet" href="main.css">


</head>

<body>
  <script src="https://threejs.org/build/three.min.js"></script>
  <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
  <script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>

  <section id="loading-screen">

    <div id="loader"></div>

  </section>
  <div id="container"></div>

  <script type='module' src="script.js"></script>
</body>


</html>

1 Ответ

0 голосов
/ 24 апреля 2020

Вы не передаете менеджер загрузки своему экземпляру GLTFLoader. Сделай это так: 

const gltfLoader = new THREE.GLTFLoader( loadingManager );
...