Как я могу воссоздать фон куба LWJGL-Website? - PullRequest
0 голосов
/ 28 мая 2020

Мне просто нравится фон трехмерного куба на https://www.lwjgl.org/, поэтому я подумал, что добавлю этот эффект на свой веб-сайт. Я пробовал использовать THREE- JS для фона и этот Javascript код:

            var camera, scene, renderer, group;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            init();
            animate();

            function init() {

                camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
                camera.position.z = 500;

                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0xffffff );
                scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );

                var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
                var material = new THREE.MeshNormalMaterial();

                group = new THREE.Group();

                for ( var i = 0; i < 50; i ++ ) {

                    var mesh = new THREE.Mesh( geometry, material );
                    mesh.position.x = Math.random() * 5000 - 1000;
                    mesh.position.y = Math.random() * 5000 - 1000;
                    mesh.position.z = Math.random() * 5000 - 1000;

                    mesh.rotation.x = Math.random() * 50 * Math.PI;
                    mesh.rotation.y = Math.random() * 50 * Math.PI;

                    mesh.matrixAutoUpdate = false;
                    mesh.updateMatrix();

                    group.add( mesh );

                }

                scene.add( group );

                //

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

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

            }

            function onWindowResize() {

                windowHalfX = window.innerWidth / 2;
                windowHalfY = window.innerHeight / 2;

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

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

            }

            //

            function animate() {

                requestAnimationFrame( animate );

                render();

            }

            function render() {

                var time = Date.now() * 0.001;

                camera.lookAt( scene.position );

                group.rotation.x += 0.02 / 10;
                group.rotation.y += 0.0225 / 10;
                group.rotation.z += 0.0175 / 10;                    

                renderer.render( scene, camera );

            }

и этот код CCS

backgroundThree {
      z-index: -9999;
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: block;
      position: fixed;
      margin: 0;
      padding: 0;
}

, чтобы получить аналогичный эффект. Теперь моя проблема в том, что этот код настолько невыразительный, что Google Chrome отображает только несколько кубиков на секунду, а затем мгновенно вылетает. Поэтому я просто хотел спросить: может ли кто-нибудь помочь мне воссоздать этот эффект?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...