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置于函数init：

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

最后在函数animate：

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

                return;
            }

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

Answer 1

我建议使用基于CSS的漂亮的预加载屏幕，而不是使用单独的场景。我创造了一个小小的小提琴，通过加载屏幕的漂亮淡出来显示用法。

重要的部分是onLoad的{{1}}回调：

THREE.LoadingManager

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，显示加载程序，如果它具有类淡出功能，则将其清除。

Env：Angular 10和Three.js

ThreeJS载入画面

2 个答案: