롤리팝

index97
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.5),
    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 uniforms = {
    camera: { value: camera.position },
    time: { value: 0 }
}

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
})

class CustomSinCurve extends THREE.Curve {
    constructor(scale = 1) {
        super()
        this.scale = scale;
    }

    getPoint(t, optionalTarget = new THREE.Vector3()) {
        //const tx = t * 3 - 1.5;
        //const ty = Math.sin( 2 * Math.PI * t );
        //const tz = 0;
        let r = t * 10,
            d = r * .35,
            x = Math.cos(2 * Math.PI * r) * d,
            y = Math.sin(2 * Math.PI * r) * d,
            z = 0

        return optionalTarget.set(x, y, z).multiplyScalar(this.scale);
    }

}

class Lolipop {
    constructor(size = 5, position = { x: 0, y: 0, z: 0 }, rotation = { x: 0, y: 0, z: 0 }, mover = false) {
        let container = new THREE.Object3D()
        container.position.set(position.x, position.y, position.z)
        container.rotation.set(rotation.x, rotation.y, rotation.z)
        this.container = container

        let path = new CustomSinCurve(size);
        let popGeom = new THREE.TubeGeometry(path, 500, size * .2, 22, true);
        let pop = new THREE.Mesh(popGeom, material);
        pop.position.x = 0
        pop.position.y = size * 2
        pop.rotation.z = Math.PI * -.49
        container.add(pop)

        const cylinderGeometry = new THREE.CylinderGeometry(size * .15, size * .15, size * 8, 22)
        const cylinderMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff })
        const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial)
        cylinder.position.y = -size * 4
        cylinder.position.z = -size * .08
        container.add(cylinder)

        scene.add(container)

        if (mover) {
            this.radius = Math.random() * 10 + 10
            this.speed = Math.random() * 0.0025
            this.i = Math.random() * 1000
            this.position = position
            this.rotation = rotation
            objects.push(this.update)
        }
    }
    update = () => {
        let p = this.position,
            { radius, speed } = this

        this.i += this.speed

        this.container.position.set(
            p.x + Math.cos(this.i) * radius,
            p.y + Math.sin(this.i) * radius,
            p.z
        )

        this.container.rotation.z = this.container.rotation.z + this.speed * 1.5
    }
}

new Lolipop(5, { x: 0, y: 0, z: 0 })

for (var i = 0; i < 50; i++) {
    let x = Math.random() * 300 - 150,
        y = Math.random() * 300 - 150,
        z = -50 - Math.random() * 50
    new Lolipop(Math.random() * 1.2 + .5, { x, y, z }, { x: 0, y: 0, z: Math.random() * Math.PI * 2 }, true)
}

camera.position.z = 55

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 * 10
    camera.position.x = mouse.x * 10
    //console.log(hoverables[0].rotation)

    objects.map(x => {
        x()
    })

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