What’s on our mind?

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

*
	//화면 생성
    const scene = new THREE.Scene();

    //카메라 설정
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 1000;

    //렌더링 설정
    const renderer = new THREE.WebGLRenderer({alpha: true, antialias:true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    document.getElementById("canvas").appendChild(renderer.domElement);
    
    //컨트롤 설정
    //const controls = new THREE.OrbitControls(camera, renderer.domElement);

    //그룹 설정
    const group = new THREE.Group();

    //폰트 설정
    const typoLoader = new THREE.FontLoader();
    const createTypo = font => {
        const word = "webs";
        const typoSize = 120;
        const typoProperties = {
            font: font,
            size: typoSize,
            height: typoSize * 3,
            curveSegments: 1,
            bevelEnabled: true,
            bevelThickness: 0.1,
            bevelSize: 2,
            bevelOffset: 0,
            bevelSegments: 3
        };
        //모양 설정
        const textMesh = new THREE.Mesh();
        textMesh.geometry = new THREE.TextBufferGeometry(word, typoProperties);
        textMesh.material =  new THREE.MeshBasicMaterial({color: 0x18FFFF, wireframe: true});
        
        textMesh.geometry.computeBoundingBox();
        textMesh.geometry.boundingBox.getCenter(textMesh.position).multiplyScalar(-1);
        textMesh.matrixAutoUpdate = false;
        textMesh.updateMatrix();
        group.add(textMesh);
    };
    typoLoader.load(
        "https://threejs.org/examples/fonts/helvetiker_bold.typeface.json",
        createTypo
    );
    scene.add(group);

    //마우스 효과
    let mouseX = 0;
    const mouseFX = {
        windowHalfX: window.innerWidth / 2,
        coordinates: function(coordX) {
            mouseX = coordX - mouseFX.windowHalfX;		
            mouseX = mouseX < 0 ? Math.abs(mouseX) : mouseX;
        },
        onMouseMove: function(e) {
            mouseFX.coordinates(e.clientX);
        },
        onTouchMove: function(e) {
            const touchX = e.changedTouches[0].clientX * 2;
            mouseFX.coordinates(touchX);
        }
    };
    document.addEventListener("mousemove", mouseFX.onMouseMove, false);
    document.addEventListener("touchmove", mouseFX.onTouchMove, false);

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

        const pZ = (mouseX - camera.position.z) * 0.05;
        camera.position.z += pZ;

        const radians = Date.now() * 0.0005;
        const rot = Math.sin(radians) * 0.1;
        group.rotation.x = rot;
        group.rotation.y = rot;

        renderer.render(scene, camera);
    }
    animate();

    //화면 사이즈 설정
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    window.addEventListener('resize', onWindowResize);