What’s on our mind?

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

CylinderGeometry

CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength)

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

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

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

    //메쉬 설정
    //CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength)
    const geometry = new THREE.CylinderGeometry( 3, 3, 10, 32 )
    const material = new THREE.MeshStandardMaterial({color: 0xaa88ff})
    const mesh = new THREE.Mesh(geometry, material)
    mesh.position.set(-14,0,0)
    scene.add(mesh)

    const geometry2 = new THREE.CylinderGeometry( 3, 3, 10, 32 )
    const material2 = new THREE.MeshStandardMaterial({color: 0xaa88ff, wireframe: true})
    const mesh2 = new THREE.Mesh(geometry2, material2)
    mesh2.position.set(0,0,0)
    scene.add(mesh2)

    const geometry3 = new THREE.CylinderGeometry( 3, 3, 10, 32, 5, true )
    const material3 = new THREE.MeshStandardMaterial({color: 0xaa88ff, wireframe: true})
    const mesh3 = new THREE.Mesh(geometry3, material3)
    mesh3.position.set(14,0,0)
    scene.add(mesh3)
  
    //조명 설정
    const ambientLight = new THREE.AmbientLight(0x663399)
    scene.add(ambientLight)

    const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.2)
    directionalLight1.position.z = 4
    scene.add(directionalLight1)

    const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight2.position.y = 10;
    scene.add(directionalLight2);

    const directionalLight3 = new THREE.DirectionalLight(0xffffff, .5);
    directionalLight3.position.set(-10,-20,10);
    scene.add(directionalLight3);

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

        mesh.rotation.x += .005
        mesh.rotation.y += .005
        mesh.rotation.z += .005
        mesh2.rotation.x += .005
        mesh2.rotation.y += .005
        mesh2.rotation.z += .005
        mesh3.rotation.x += .005
        mesh3.rotation.y += .005
        mesh3.rotation.z += .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);