무지개 도너츠

const scene = new THREE.Scene(),
    width = window.innerWidth,
    height = window.innerHeight,
    camera = new THREE.PerspectiveCamera(90, width / height, 0.1, 1000),
    renderer = new THREE.WebGLRenderer(),
    startTime = new Date().getTime(),
    raycaster = new THREE.Raycaster(),
    timeOffset = 15,
    halfPI = Math.PI / 2

var composer, outlinePass;

let currentTime = 0,
    mouse = new THREE.Vector2(0, 0),
    hoverables = [],
    objects = []

// document.body.addEventListener('mousemove', function (e) {
//     let x = (e.clientX / window.innerWidth) * 2 - 1,
//         y = -(e.clientY / window.innerHeight) * 2 + 1;

//     mouse.set(x, y)
//     raycaster.setFromCamera(mouse, camera);

//     let intersects = raycaster.intersectObjects(hoverables)
//     intersects.map(x => {
//         if (!x.object.userData.hovered) {
//             x.object.userData.rotation += Math.PI * 2
//         }
//         x.object.userData.hovered = true
//     })
// })

renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

let CameraHolder = new THREE.Object3D()
CameraHolder.add(camera)
scene.add(CameraHolder)

composer = new THREE.EffectComposer(renderer)

var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);

outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
composer.addPass(outlinePass);

let bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(width, height), 1.5, .4, .85);
renderer.toneMappingExposure = 1;
bloomPass.threshold = 0;
bloomPass.strength = .5;
bloomPass.radius = 1.5;
composer.addPass(bloomPass);

let filmPass = new THREE.FilmPass(0.34, 0.025, 256, false);
composer.addPass(filmPass);

outlinePass.edgeStrength = 3
outlinePass.edgeThickness = 1
outlinePass.edgeGlow = 0
outlinePass.visibleEdgeColor.set('#ffffff')
outlinePass.hiddenEdgeColor.set('#ffffff')
outlinePass.BlurDirectionX = new THREE.Vector2(0.0, 0.0)
outlinePass.BlurDirectionY = new THREE.Vector2(0.0, 0.0)

let uniforms = {
    camera: {
        value: camera.position
    },
    time: {
        value: 0
    }
}

let length = 3,
    cameraZ = Math.max(width, height) / length

var geometry = new THREE.TorusGeometry(length * .95, length * .35, 25, 50)
var hoverGeom = new THREE.BoxGeometry(length * 2.75, length * 2.75, length)

let material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    fragmentShader: shaders.cloth.fragment,
    vertexShader: shaders.cloth.vertex,
    side: THREE.BackSide
})
const hoverMaterial = new THREE.MeshBasicMaterial({
    color: 0xffff00,
    opacity: 0,
    transparent: true,
});

let xLen = 10,
    yLen = 10

for (var x = 0; x < xLen; x += 1) {
    for (var y = 0; y < yLen; y += 1) {
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = (x - xLen / 2) * 10 + 5
        mesh.position.y = (y - yLen / 2) * 10 + 5
        mesh.userData.delay = (x - y) * -.15
        objects.push(mesh)
        scene.add(mesh)

        var hoverMesh = new THREE.Mesh(hoverGeom, hoverMaterial);
        hoverMesh.position.x = (x - xLen / 2) * 10 + 5
        hoverMesh.position.y = (y - yLen / 2) * 10 + 5
        hoverables.push(hoverMesh)
        scene.add(hoverMesh)
    }
}

camera.position.z = 25
console.log(hoverables)

function animate() {
    var now = new Date().getTime();
    currentTime = (now - startTime) / 1000;
    let t = currentTime + timeOffset;

    CameraHolder.updateMatrixWorld();
    camera.updateMatrixWorld();
    var vector = camera.position.clone();
    vector.applyMatrix4(camera.matrixWorld);

    uniforms.time.value = t;
    uniforms.camera.value = vector;

    camera.position.y = mouse.y
    camera.position.x = mouse.x

    objects.map(x => {
        x.rotation.y = (Math.cos((currentTime * .8) + x.userData.delay)) * halfPI + halfPI
    })
    //console.log(hoverables[0].rotation)

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

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

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