What’s on our mind?

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

**
	//변수 설정
    let mouseX = 0;
    let mouseY = 0;

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

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

    //렌더링 설정
    let renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    
    //모양 설정
    let geometry = new THREE.CubeGeometry(200, 200, 200);
    let material = new THREE.MeshPhongMaterial({color: 0xffcc00, wireframe: false});
    let obj = {};
    let mesh;
    
    for (let i=0; i<50; i++){	
        obj['mesh'+i] = new THREE.Mesh(geometry, material);
        scene.add(obj['mesh'+i]);

        mesh = obj['mesh' + i]
        mesh.position.x = ((- window.innerWidth * 2) * Math.random()) + window.innerWidth;
        mesh.position.y = ((- window.innerHeight* 2) * Math.random()) + window.innerHeight;
        mesh.position.z = ((- window.innerHeight* 2) * Math.random()) + window.innerHeight;
        obj['meshZ' + i] = mesh.position.z
    }

    //조명 설정
    pointLight = new THREE.PointLight(0xFFFFFF, 1, 1000);
    pointLight.position.x = 0;
    pointLight.position.y = 0;
    pointLight.position.z = 500;
    scene.add(pointLight);

    //마우스 설정
    function mouse(e){
        mouseX = e.pageX;
        mouseY = e.pageY;
    }
    document.addEventListener("mousemove", mouse);

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

        for (var i = 0; i < 50; i++){	
            var mesh = obj['mesh'+i];
            var meshZ = obj['meshZ'+i];
            mesh.rotation.x += ((window.innerWidth * .5) - mouseY) * .00002;
            mesh.rotation.y += ((window.innerHeight * .5) - mouseX) * .00002;
            //mesh.position.z = meshZ + ((window.innerHeight * .5) - mouseY);
        }

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