我正在尝试实现three.js代码以显示GLTF格式的3d模型，但是我的页面在预加载时卡住了。我想显示一个预加载页面，直到所有文件都加载完毕。
请帮助解决此问题。
这里是我希望它如何运行的link。
我正在本地服务器上运行它，但仍然遇到此问题。
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>您没有将加载管理器传递给您的GLTFLoader实例。这样做：
const gltfLoader = new THREE.GLTFLoader( loadingManager );