미디어 콘텐츠 스터디

02. 첫번째 3D 장면 만들기 본문

WebVR : Three.js

02. 첫번째 3D 장면 만들기

danmujicat 2021. 7. 13. 09:31

1. 첫 번째 Three.js 장면 만들기

1.1 HTML 페이지 생성

가장 먼저 해야 할 일은 다음과 같이 모든 예제의 기반으로 사용할 수 있는 빈 HTML 페이지를 만드는 것입니다.

 

chapter-01/01-basic-skeleton.html

<!DOCTYPE html>
<html>

<head>
    <title>Example 01.01 - Basic skeleton</title>
    <meta charset="UTF-8" />
     //Three.js 라이브러리 로드
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/three.js"></script> 
    // 마우스를 사용하여 씬(scene)을 회전하고 이동할 수 있는 TrackballControls..js 컨트롤러 로드
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/TrackballControls.js"></script>
    //예제 코드가 포함된 01-01.js 파일 로드
    <script type="text/javascript" src="./js/01-01.js"></script> 
    //몇 가지 간단한 스타일을 포함하는 CSS 파일 로드
    //(예: 전체 페이지 Three.js 장면을 만들 때 default.css 파일의 스타일이 스크롤바 막대를 모두 제거함).
    <link rel="stylesheet" href="../../css/default.css"> 
</head>

<body>
    <!-- 출력을 유지할 Div -->
    //Three.js 코드를 작성할 때 해당 요소에 대한 Three.js 렌더러의 출력을 가리킴    
    <div id="webgl-output"></div>

   
    <! -- Three.js 예시를 실행하는 Javascript 코드 -- >
     //페이지가 로드될 때 호출되는 이 함수에서 init()를 호출함
    <script type="text/javascript">
        (function () {
            // contains the code for the example
            init()
        })();
    </script>
</body>

</html>

chapter-01/js/01-01.js

function init() {
    console.log("Using Three.js version: " + THREE.REVISION);    //Three.js 버전을 출력
}

실행결과)

브라우저에서 이 파일을 열고 콘솔 출력을 보면 다음과 같이 표시되어야 합니다.

 

tip) Three.js는 두 가지 버전으로 제공됩니다.

    - three.min.js: 인터넷에 Three.js 사이트를 배포할 때 일반적으로 사용하는 라이브러리입니다.

                      이것은 일반 Three.js 라이브러리 크기의 1/4인 UglifyJS를 사용하여 만든 Three.js의 미니 버전입니다. 

    - three.js: 일반적인 Three.js 라이브러리입니다.

                 이 라이브러리를 사용하면 Three.js 소스 코드를 읽고 이해할 수 있을 때 디버깅이 훨씬 쉬워지므로

                 예제에서 이 라이브러리를 사용합니다.

 

1.2 3D 개체 렌더링 및 보기

이 단계에서는 첫 장면을 만들고 두 개의 객체와 카메라를 추가합니다. 첫 번째 예제는 다음과 같은 개체를 포함합니다.

오브젝트 설명
Plane 이것은 우리의 지면적 역할을 하는 2차원 직사각형이다.
이 장의 두 번째 스크린샷에서는 씬(scene) 중간에 회색 사각형으로 렌더링됩니다.
Cube 이것은 3차원 입방체인데, 우리는 그것을 빨간색으로 표현할 것이다.
Sphere 이것은 3차원 구입니다. 우리는 그것을 파란색으로 만들 것입니다.
Camera 카메라가 출력에 표시되는 내용을 결정합니다.
Axes x축, y축, z축입니다. 개체가 3D 공간에서 렌더링되는 위치를 확인할 수 있는 유용한 디버깅 도구입니다. x축은 빨간색, y축은 녹색, z축은 파란색입니다.

 

chapter-01/js/01-02.js

function init() {
    <!--장면, 카메라 및 렌더러를 생성하기-->
    // 객체, 카메라, 조명과 같은 모든 요소를 담을 장면을 생성
    // THREE.Scene 객체가 없으면 Three.js는 아무 것도 렌더링할 수 없습니다. 
    var scene = new THREE.Scene();

    // 우리가 보고 있는 곳을 정의하는 카메라를 생성
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    // 렌더 생성 및 크기 설정
    var renderer = new THREE.WebGLRenderer(); // 그래픽 카드를 사용하여 장면을 렌더링하는 WebGLRenderer를 생성
    renderer.setClearColor(new THREE.Color(0x000000)); // 렌더러의 배경색을 검정색 설정
    renderer.setSize(window.innerWidth, window.innerHeight); // 장면을 랜더링해야 할 크기 설정
    // window.innerWidth 및 window.innerHeight를 전달하여 사용 가능한 모든 화면 공간을 사용

   <!--장면에 축과 평면을 보여주는 선을 추가하기-->
    // 화면에 축 표시
    var axes = new THREE.AxesHelper(20);
    scene.add(axes);

    // 지상 평면을 생성
    var planeGeometry = new THREE.PlaneGeometry(60, 20); // 평면의 크기 생성(너비가 60이고 높이가 20) 
    var planeMaterial = new THREE.MeshBasicMaterial({  // 평면의 재질 생성(색상이 0xAAAAAA, 기본 재질은 THREE.MeshBasicMaterial
        color: 0xAAAAAA
    });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial); // 평면의 크기와 재질을 Mesh 객체로 결합하고 plane 변수에 할당

    // 평면을 회전하고 배치
    plane.rotation.x = -0.5 * Math.PI; //x축을 중심으로 90도 회전
    plane.position.set(15, 0, 0); //장면에서 위치를 설정

    // 장면에 지면 추가
    scene.add(plane);

  <!-- 장면에 큐브 추가하기-->
    // 큐브를 생성
    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    var cubeMaterial = new THREE.MeshBasicMaterial({
        color: 0xFF0000,
        wireframe: true
    });
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    // 큐브 위치 지정
    cube.position.set(-4, 3, 0);

    // 장면에 큐브 추가
    scene.add(cube);

   <!-- 장면에 구 추가하기-->
    // 구체를 생성
    var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    var sphereMaterial = new THREE.MeshBasicMaterial({
        color: 0x7777FF,
        wireframe: true
    });
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

    // 구를 배치
    sphere.position.set(20, 4, 2);

    // 장면에 구 추가
    scene.add(sphere);

   <!- 렌더링하려는 모든 요소가 장면의 올바른 위치에 추가하기-->
    // 장면의 중심에 카메라를 배치하고 가리킵니다.
    camera.position.set(-30, 40, 30); //set 메소드로 장면 위에 마우스를 가져가도록 카메라를 배치
    camera.lookAt(scene.position); //카메라가 객체를 보고 있도록 함

    // html <div> 요소에 렌더러의 출력 추가
    document.getElementById("webgl-output").appendChild(renderer.domElement);

    // 장면을 렌더링
    renderer.render(scene, camera);
}

 

실행화면)

2. 재질, 조명 및 애니메이션으로 첫 번째 장면 개선

3. 통계 및 장면 제어를 위한 몇 가지 도우미 라이브러리 소개

'WebVR : Three.js' 카테고리의 다른 글

06. 기본구성요소 - 03 용도에 따라 다른 카메라  (0) 2021.09.25
05. 기본 구성 요소 - 02 지오메트리 및 메쉬  (0) 2021.07.19
04. 기본 구성 요소 - 01 장면 만들기  (0) 2021.07.15
01. Three.js 시작하기  (0) 2021.07.13
'WebVR : Three.js' Related Articles more
Comments