need to redraw one figure, not all
need to redraw one figure, not all
need to redraw one figure, not all
need to redraw one figure, not all
need to redraw one figure, not all
need to redraw one figure, not all
need to redraw one figure, not all
need to redraw one figure, not all
need to redraw one figure, not all
need to redraw one figure, not all
need to redraw one figure, not all
need to redraw one figure, not all
need to redraw one figure, not all

//////SCENE
const scene = new THREE.Scene();

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight,
};

//////CAMERA
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);

camera.position.z = 15

////// RENDERER

const renderer = new THREE.WebGLRenderer({
    // alpha: true, 
    antialias: true 
})

const container = document.querySelector('.canvas');

container.appendChild(renderer.domElement);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(sizes.width, window.innerHeight);

////// LIGHT
const aLight = new THREE.AmbientLight(0x404040, 1.2);
scene.add(aLight);


////// Group
const group = new THREE.Group();

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshPhongMaterial({
    color: 0x00ff00,
    wireframe: true,
});

for (let x = -5; x <= 5; x += 5) {
    for (let y = -5; y <= 5; y += 5) {
        const cube = new THREE.Mesh(geometry, material);
        cube.position.set(x, y, 0)
        group.add(cube)
    }
}

scene.add(group)
////// OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);



////// ANIME
function animate() {
    controls.update();
    requestAnimationFrame(animate);
    renderer.render(scene, camera); 
}

animate();

////// HANLERCLICK 

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

function onPointerMove(event) {

    pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
    pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(pointer, camera)


    const intersects = raycaster.intersectObjects(group.children)

    group.children.forEach(child => {
        child.material.color.set(0xffffff);
    });

    for (let i = 0; i < intersects.length; i++) {
        const intersectedObject = intersects[i].object;
        intersectedObject.material.color.set(0xff0000);
        console.log(intersectedObject.uuid);
    }

}

window.addEventListener('click', onPointerMove)



////// RESIZE



window.addEventListener('resize', () => {


    sizes.width = window.innerWidth;

    sizes.height = window.innerHeight;




    camera.aspect = sizes.width / sizes.height;

    camera.updateProjectionMatrix();




    renderer.setSize(sizes.width, sizes.height);

    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

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