Мне просто нравится фон трехмерного куба на 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 отображает только несколько кубиков на секунду, а затем мгновенно вылетает. Поэтому я просто хотел спросить: может ли кто-нибудь помочь мне воссоздать этот эффект?