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 = 220;
    camera.position.y = 100;

    //렌더링 설정
    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();
    scene.add(group);

    //모양 설정
    let sampler = null;
    let elephant = null;
    let paths = [];
    new THREE.OBJLoader().load("https://assets.codepen.io/127738/Mesh_Elephant.obj", (obj) => {    
        sampler = new THREE.MeshSurfaceSampler(obj.children[0]).build();

        for (let i=0; i<4; i++) {
            const path = new Path(i);
            paths.push(path);
            group.add(path.line);
        }
    });

    const tempPosition = new THREE.Vector3();
    const materials = [new THREE.LineBasicMaterial({color: 0xFAAD80, transparent: true, opacity: 0.5}),
    new THREE.LineBasicMaterial({color: 0xFF6767, transparent: true, opacity: 0.5}),
    new THREE.LineBasicMaterial({color: 0xFF3D68, transparent: true, opacity: 0.5}),
    new THREE.LineBasicMaterial({color: 0xA73489, transparent: true, opacity: 0.5})];
    class Path {
        constructor (index) {
        this.geometry = new THREE.BufferGeometry();
        this.material = materials[index % 4];
        this.line = new THREE.Line(this.geometry, this.material);
        this.vertices = [];

        sampler.sample(tempPosition);
        this.previousPoint = tempPosition.clone();
    }
    update () {
        let pointFound = false;
        while (!pointFound) {
            sampler.sample(tempPosition);
            if (tempPosition.distanceTo(this.previousPoint) < 30) {
                this.vertices.push(tempPosition.x, tempPosition.y, tempPosition.z);
                this.previousPoint = tempPosition.clone();
                pointFound = true;
            }
        }
        this.geometry.setAttribute("position", new THREE.Float32BufferAttribute(this.vertices, 3));
        }
    }

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

        group.rotation.y += 0.002;

        paths.forEach(path => {
            if (path.vertices.length < 10000) {
                path.update();
            }
        });

        controls.update();

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