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, 1, 10000);
    camera.position.z = 125;
    scene.add(camera);

    //렌더링 설정
    const renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
    renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('canvas').appendChild(renderer.domElement);

    //모양 설정
    const material = new THREE.MeshBasicMaterial();
    const geometry = new THREE.TorusBufferGeometry(30, 25, 50, 50)
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    //캔버스 설정
    function setCanvas() {
        var canvas = document.createElement("canvas");
        canvas.width = 1024;
        canvas.height = 1024;
        var context = canvas.getContext('2d');
        context.strokeStyle = '#FFFFFF';
        context.lineWidth = 1;
        context.font = "150px Helvetica";
        for	(var i=0; i<6; i++) {
            context.strokeText("WEBSTORYBOY", 10, i * 200);
        }
        material.map = new THREE.CanvasTexture(canvas, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping);
    }
    setCanvas()


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

        material.map.offset.x -= 0.001;
        material.map.offset.y += 0.005;
        material.map.needsUpdate = true;
        mesh.rotation.x += 0.005;
        mesh.rotation.y -= 0.005;
        mesh.rotation.z += 0.005;

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