원

index27
var camera, renderer;
window.addEventListener('load', init);

function init() {
    renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#myCanvas'),
        antialias: true
    });
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );

    const scene = new THREE.Scene();
    const clock = new THREE.Clock();

    camera = new THREE.PerspectiveCamera(45,  window.innerWidth / window.innerHeight);
    camera.position.set(0, 0, 1000);

    const myGroup = new MyGroup();
    scene.add(myGroup);

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

    tick();

    function tick() {
        var delta = clock.getDelta();
        myGroup.update(delta);
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
    }
}
class MyGroup extends THREE.Object3D {
    constructor() {
        super();
        this.uniforms = {
            "time": { value: 1.0 },
            "resolution": { type: "v2", value: new THREE.Vector2(renderer.domElement.width,renderer.domElement.height) }
        };

        this.material = new THREE.ShaderMaterial( {
            uniforms: this.uniforms,
            vertexShader: document.getElementById( 'vertexShader' ).textContent,
            fragmentShader: document.getElementById( 'fragmentShader' ).textContent
        });

        this.donuts = new THREE.Mesh(
            new THREE.SphereGeometry( 300, 100, 100),
            this.material
        );

        this.donuts.rotation.x = 20;
        this.donuts.rotation.y = 20;
        this.donuts.rotation.z = 20;

        this.add(this.donuts);
    }

    update(delta) {
        var object = this.donuts;
        object.rotation.y += delta * 0.5 * ( 1 % 2 ? 1 : - 1 );
        object.rotation.x += delta * 0.5 * ( 1 % 2 ? - 1 : 1 );
        object.material.uniforms["time"].value +=  delta* 5;
        //console.log(object.material.uniforms["time"].value)
    }
}

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

function getRandom(min, max) {
    return Math.random() * (max - min) + min;
}