import * as THREE from "three"
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x101418);

const camera = new THREE.PerspectiveCamera(60, 2, 0.1, 100);
camera.position.set(0, 0, 6);

scene.add(new THREE.AmbientLight(0xffffff, 0.6));

const light = new THREE.DirectionalLight(0xffffff, 1.1);
light.position.set(4, 6, 5);
scene.add(light);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x5bc0eb });

const cube = new THREE.Mesh(geometry, material);
cube.position.x = -1.2;
scene.add(cube);

const cubeClone = cube.clone();
cubeClone.position.x = 1.2;
scene.add(cubeClone);

function resizeRendererToDisplaySize() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    const needResize = renderer.domElement.width !== width || renderer.domElement.height !== height;

    if (needResize) {
        renderer.setSize(width, height, false);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
    }
}

function animate(time) {
    const seconds = time * 0.001;

    resizeRendererToDisplaySize();

    cube.rotation.x = seconds;
    cube.rotation.y = seconds;

    cubeClone.rotation.x = seconds;
    cubeClone.rotation.y = -seconds;

    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);