文章/答案/技术大牛

发布

问ThreeJS加载屏
EN

Stack Overflow用户

提问于 2018-04-04 05:46:39

回答 2查看 4.4K关注 0票数 2

我在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;

将加载屏幕放入函数init：

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

但这不管用，你有什么建议吗？

javascript

three.js

.obj

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-04-04 16:20:34

与其使用单独的场景，我建议使用一个好的基于CSS的预装屏幕。我已经创建了一个小小提琴，显示使用与一个漂亮的淡出加载屏幕。

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

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/

票数 5

Stack Overflow用户

发布于 2020-11-18 12:00:11

如果您不删除加载器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:角10和Three.js

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49643660

复制

相似问题

问ThreeJS加载屏
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ThreeJS加载屏EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ThreeJS加载屏
EN