html - 如何重新创建 LWJGL-Website 立方体背景？

Question

我只是喜欢https://www.lwjgl.org/上的 3d 立方体背景，所以我想我会将这种效果添加到我的网站中。我尝试使用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;
}

以获得类似的效果。现在我的问题是这段代码效率太低，以至于谷歌浏览器只显示几个立方体一秒钟然后立即崩溃。所以我只想问：谁能帮我重现这个效果？

标签： htmlcssanimation3dbackground