ThreeJS 加载屏幕

Question

我是 ThreeJS 的新手，目前正在研究 3D 配置器之类的东西。现在我试图在加载 obj 对象之前实现一个加载屏幕，这是我现在的代码：

<!DOCTYPE html>

    </style>
</head>
<body>

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


    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/RGBELoader.js"></script>
    <script src="js/HDRCubeTextureLoader.js"></script>

    <script src="js/Detector.js"></script>
    <script src="js/stats.min.js"></script>

    <script src="js/PMREMGenerator.js"></script>
    <script src="js/PMREMCubeUVPacker.js"></script>
    <script src="js/dat.gui.min.js"></script>

    <script src="js/EffectComposer.js"></script>
    <script src="js/RenderPass.js"></script>
    <script src="js/MaskPass.js"></script>
    <script src="js/ShaderPass.js"></script>
    <script src="js/CopyShader.js"></script>
    <script src="js/FXAAShader.js"></script>
    <script src="js/BloomPass.js"></script>
    <script src="js/ConvolutionShader.js"></script>

    <script src="js/OBJLoader.js"></script>




    <script>
        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
        var container, stats;
        var params = {
            projection: 'normal',
            Rotieren: false,
            reflectivity: 1.0,
            background: false,
            Beleuchtung: 2.0,
            Farbe: 'Black'
        };
        var camera, scene, renderer, controls, objects = [];
        var hdrCubeMap;
        var composer;
        var gemBackMaterial, gemFrontMaterial;
        var hdrCubeRenderTarget;
        init();
        animate();


        function init() {
            container = document.createElement( 'div' );
            document.body.appendChild( container );
            camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );

            camera.position.set( 0.0, -10, 20 * 25 );
            scene = new THREE.Scene();
            scene.background = new THREE.Color( 0x000000 );
            renderer = new THREE.WebGLRenderer( { antialias: true } );


            gemBackMaterial = new THREE.MeshPhysicalMaterial( {
                map: null,
                color: 0x0000ff,
                metalness: 1.0,
                roughness: 0,
                opacity: 0.5,
                side: THREE.BackSide,
                transparent: true,
                envMapIntensity: 5,
                premultipliedAlpha: true,
                wireframe: false


            } );
            gemFrontMaterial = new THREE.MeshPhysicalMaterial( {
                map: null,
                color: 0x0000ff,
                metalness: 0.0,
                roughness: 0,
                opacity: 0.5,
                side: THREE.FrontSide,
                transparent: true,
                envMapIntensity: 5,
                premultipliedAlpha: true,
                wireframe: false
            } );


            var manager = new THREE.LoadingManager();
            manager.onProgress = function ( item, loaded, total ) {
                console.log( item, loaded, total );
            };


            var textureLoader = new THREE.TextureLoader();
            var map = textureLoader.load('img/4.png');
            var material = new THREE.MeshPhysicalMaterial({map: map});


            var loader = new THREE.OBJLoader( manager );


            loader.load( 'models/testgpu.obj', function ( object ) {
                object.traverse( function ( child ) {
                    if ( child instanceof THREE.Mesh ) {
                        child.material = gemBackMaterial;

                        child.material = material;


                        var second = child.clone();
                        second.material = gemFrontMaterial;
                        var parent = new THREE.Group();
                        parent.add( second );
                        parent.add( child );
                        scene.add( parent );
                        objects.push( parent );
                    }
                } );
            } );

            //Beleuchtung mit Ambientlights
            var ambient = new THREE.AmbientLight( 0x666666 );
            scene.add( ambient );
            directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
            directionalLight.position.set( 2, 1.2, 10 ).normalize();
            scene.add( directionalLight );
            directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
            directionalLight.position.set( -2, 1.2, -10 ).normalize();
            scene.add( directionalLight );
            pointLight = new THREE.PointLight( 0xffaa00, 2 );
            pointLight.position.set( 2000, 1200, 10000 );
            scene.add( pointLight );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.shadowMap.enabled = true;
            container.appendChild( renderer.domElement );
            renderer.gammaInput = true;
            renderer.gammaOutput = true;
            stats = new Stats();
            container.appendChild( stats.dom );
            controls = new THREE.OrbitControls( camera, renderer.domElement );
            window.addEventListener( 'resize', onWindowResize, false );


            var gui = new dat.GUI();
            gui.add( params, 'Beleuchtung', 0.1, 2 );
            gui.add( params, 'Rotieren' );
            gui.add( params, 'Farbe', [ 'Blue', 'Green', 'Red', 'White', 'Black', 'Purple' ] );
            gui.open();
        }


        function onWindowResize() {
            var width = window.innerWidth;
            var height = window.innerHeight;
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
            renderer.setSize( width, height );
        }




        function animate() {


            requestAnimationFrame(animate);


            stats.begin();
            render();
            stats.end();

        }





        function render() {
            if ( gemBackMaterial !== undefined && gemFrontMaterial !== undefined ) {

                var newColor = gemBackMaterial.color;
                switch( params.Farbe ) {
                    case 'Blue': newColor = new THREE.Color( 0x000088 ); break;
                    case 'Red': newColor = new THREE.Color( 0x880000 ); break;
                    case 'Green': newColor = new THREE.Color( 0x008800 ); break;
                    case 'White': newColor =  new THREE.Color( 0x888888 ); break;
                    case 'Black': newColor =  new THREE.Color( 0x0f0f0f ); break;
                    case 'Purple': newColor =  new THREE.Color( 0xff00ff ); break;

                }
                gemBackMaterial.color = gemFrontMaterial.color = newColor;
            }
            renderer.toneMappingExposure = params.Beleuchtung;
            var timer = Date.now() * 0.00025;
            camera.lookAt( scene.position );
            if( params.Rotieren ) {
                for ( var i = 0, l = objects.length; i < l; i ++ ) {
                    var object = objects[ i ];
                    object.rotation.y += 0.005;
                }
            }
            renderer.render( scene, camera );
        }
    </script>

</body>

我试过这样的事情：

    var loadingScreen =
        {
            scene = new THREE.Scene();
            camera = new PerspectiveCamera(90, 1280/720, 0.1, 1000);
            box : new THREE.Mesh(
                new THREE.BoxGeometry(0.5,0.5, 0.5),
            new THREE.MeshBasicMaterial ({color:0x4444ff})
        )
        };

        var RESORUCES_LOADED = false;

将加载屏幕放入函数初始化中：

            loadingScreen.box.position.set(0,0,5);
            loadingScreen.camera.lookAt(loadingScreen.box.position);
            loadingScreen.scene.add(loadingScreen.box);

最后在动画函数中：

    if (RESORUCES_LOADED == false)
            {
                requestAnimationFrame(animate);
                renderer.render(loadingScreen.scene, loadingScreen.camera);
                stats.begin();
                render();
                stats.end();

                return;
            }

但这不起作用，您有什么提示吗？

Answer 1

我建议使用基于 CSS 的漂亮的预加载屏幕，而不是使用单独的场景。我创建了一个小 fiddle 来显示使用情况，并带有漂亮的 fade-out 加载屏幕。

重要的部分是 THREE.LoadingManager 的 onLoad 回调：

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

} );

https://jsfiddle.net/vfug1adn/19/

我从这里选择了 CSS：http://freefrontend.com/css-loaders/

Answer 2

如果您不删除加载程序 onTransitionEnd，您最终会在 DOM 中得到一个 CSS 动画 - 一直如此。

也就是说，这是我的看法。

 const loadingManager = new THREE.LoadingManager(() => {
            this.loadingScreenEl.nativeElement.classList.add('fade-out');
            setTimeout(() => {
                this.loadingScreenEl.nativeElement.style.display = 'none';
            }, 1000);
        }, () => {
            this.loadingScreenEl.nativeElement.style.display = 'block';
            if (this.loadingScreenEl.nativeElement.classList.contains('fade-out')) {
                this.loadingScreenEl.nativeElement.classList.remove('fade-out');
            }
        });

说明：

1 - onLoad，淡出加载器，1 秒后将其移除（可以这么说）。

2 - onProgress，你显示加载器，如果它有 class 淡出，就去掉它。

环境：Angular 10 和 Three.js

ThreeJS 加载屏幕

ThreeJS Loading Screen

javascript

three.js

.obj