MACID CALL

index.html

<base target='_blank'>
<a href='//codepen.io/ycw'>abstdisp</a>
<a href='//unsplash.com/collections/11323911'>coll</a>

macid-call.markdown

MACID CALL

A Pen by Monica on CodePen.

License.

script.js

import * as $ from '//unpkg.com/three@0.117.1/build/three.module.js'
import { OrbitControls } from '//unpkg.com/three@0.117.1/examples/jsm/controls/OrbitControls.js'

// ----
// Boot
// ----

const renderer = new $.WebGLRenderer({ antialias: false });
const scene = new $.Scene();
const camera = new $.PerspectiveCamera(75, 2, .1, 100);
const controls = new OrbitControls(camera, renderer.domElement);
window.addEventListener('resize', () => {
    const { clientWidth, clientHeight } = renderer.domElement;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(clientWidth, clientHeight, false);
    camera.aspect = clientWidth / clientHeight;
    camera.updateProjectionMatrix();
});
document.body.prepend(renderer.domElement);
window.dispatchEvent(new Event('resize'));
renderer.setAnimationLoop(function (t) {
    controls.update();
    renderer.render(scene, camera);
});

// ----
// Main
// ---- 

scene.background = new $.Color('#eee');
camera.position.set(0, 2, 3);
controls.autoRotate = true;
controls.autoRotateSpeed = 5;

const light0 = new $.AmbientLight();
scene.add(light0);

const group = new $.Group();
scene.add(group);

const tex = new $.Texture();
const geom = new $.SphereBufferGeometry(1, 1e3, 1e3, 0, Math.PI);
const mat = new $.MeshStandardMaterial({ map: tex, displacementMap: tex });
const mesh1 = new $.Mesh(geom, mat);
group.add(mesh1);

const mesh2 = mesh1.clone();
mesh2.scale.set(1, 1, -1);
group.add(mesh2);

function next(gen) {
    new $.TextureLoader().load(gen.next().value, (tex) => {
        gsap.timeline({ onComplete() { next(gen) }, defaults: { duration: 0.5 } })
            .to(group.scale, { x: 1.5, y: 1.5, z: 1.5 })
            .to(group.rotation, { x: Math.PI, y: Math.PI }, '<')
            .to(mat, {
                displacementScale: 0, onComplete() {
                    mat.map = tex;
                    mat.displacementMap = tex;
                }
            })
            .to(mat, { displacementScale: 1 })
            .to(group.scale, { x: 1, y: 1, z: 1 }, '<')
            .to(group.rotation, { x: 0, y: 0, ease: 'elastic' }, '<')
            .to({}, { duration: 2.5 });
    }, () => next(gen));
}

function start() {
    next(Gen());
}

function* Gen() {
    while (1) yield `https://source.unsplash.com/collection/11323911/?${Date.now()}`;
}

start();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@200&display=swap');

canvas {
    width: 100%;
    height: 100vh;
    display: block;
    position: fixed;
}

body {
    height: 100vh;
    display: grid;
    grid-auto-flow: column;
    place-content: start start;
}

a {
    position: relative;
    padding: 5vmin;
    font: bold 1em/1 'MuseoModerno', cursive;
    text-decoration: none;
    color: #222;
}

a:hover {
    transition: all 0.3s;
    background: powderblue;
}