What’s on our mind?

Collection of articles, design, site, and resources made by designers and publisher @Menu View

//화면 생성
    var scene = new THREE.Scene();
    
    //카메라 설정
    var width = window.innerWidth;
    var height = window.innerHeight;
    var aspect = width / height;
    var camera = new THREE.PerspectiveCamera(75, aspect, 1, 1000);
    camera.position.set(0,0,5);

    //렌더링 설정
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);
    
    //모양 설정
    var geometry = new THREE.DodecahedronGeometry(2);
    var material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
    var shape = new THREE.Mesh(geometry, material);
    shape.rotation.set(15,15,0);
    scene.add(shape);
    
    //위치 셋팅
    var originalPositions = [];

    for (var i = 0; i < geometry.vertices.length; i++) {
        var vertex = geometry.vertices[i];
        var vertexPosition = [vertex.x, vertex.y, vertex.z];
        originalPositions.push(vertexPosition);
    }

    //움직임 설정
    function animateVertices() {
        for (var i = 0; i < geometry.vertices.length; i++) {
            var v = geometry.vertices[i];
            var newX = originalPositions[i][0] + Math.random() * .6 - .3;
            var newY = originalPositions[i][1] + Math.random() * .6 - .3;
            var newZ = originalPositions[i][2] + Math.random() * .6 - .3;

            TweenLite.to(v, .5, {x: newX, y: newY, z: newZ, ease: Back.easeInOut });
        }
    }
    setInterval(animateVertices, 600);

    //조명 설정
    var light = new THREE.DirectionalLight(0xffffff, 1.5);
    light.position.y = 10;
    scene.add(light);

    var light2 = new THREE.DirectionalLight(0xffffff, .5);
    light2.position.set(-10,-10,10);
    scene.add(light2);

    //애니메이션 설정
    function animate() {
        requestAnimationFrame(animate);

        shape.rotation.x += .01;
        shape.rotation.y += .01;
        shape.rotation.z += .01;

        geometry.verticesNeedUpdate = true;
        renderer.render(scene, camera);
    }
    animate();

    //화면 사이즈 설정
    function onWindowResize() {
        var newWidth = window.innerWidth,
            newHeight = window.innerHeight,
            newAspect = newWidth / newHeight;

        camera.aspect = newAspect;
        camera.updateProjectionMatrix();
        renderer.setSize(newWidth, newHeight);
    }

    window.addEventListener('resize', onWindowResize);