What’s on our mind?

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


		//three를 선언한다.
        const scene = new THREE.Scene();

        //카메라를 설정한다.
        const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 7, 10);      

        //렌더링을 설정하고 안티 에일리어싱을 true로 하여 계단 현상을 막아준다.
        const renderer = new THREE.WebGLRenderer({ antialias: true });

        // 사이즈를 설정하고 body 태그 자식으로 설정
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 컨트롤을 하기 위해 설정
        // OrbitControls을 사용하면 카메라가 대상 주위를 공전 할 수 있다.
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        const group = new THREE.Group();
        scene.add(group);

        //TorusKnotGeometry 모양을 설정
        const geometry = new THREE.TorusKnotGeometry(4, 1.3, 100, 16);
        const torusKnot = new THREE.Mesh(geometry);

        const sampler = new THREE.MeshSurfaceSampler(torusKnot).build();

        const vertices = [];

        const tempPosition = new THREE.Vector3();

        for (let i = 0; i < 15000; i ++) {
            sampler.sample(tempPosition);
            vertices.push(tempPosition.x, tempPosition.y, tempPosition.z);
        }

        const pointsGeometry = new THREE.BufferGeometry();
        pointsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
        const pointsMaterial = new THREE.PointsMaterial({
            color: 0xff61d5,
            size: 0.01
        });

        const points = new THREE.Points(pointsGeometry, pointsMaterial);

        group.add(points);

        function render () {  
            group.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        renderer.setAnimationLoop(render);


        //화면 크기 변했을 때
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        window.addEventListener('resize', onWindowResize);