SG의 개발 공부로그

#1 첫 시작하기 [Threejs] 본문

Three Js

#1 첫 시작하기 [Threejs]

DebeloperSG 2022. 12. 23. 17:19
728x90

Three.js 시작하기

번들러, 모듈 없이 HTML 파일과 약간의 javascript 만 사용해서 간단한 방식으로 Three.js 작동하도록 만들어 볼 겁니다.

 

 

index.html 파일을 만들고

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03 - Basic Scene</title>
</head>
<body>
    <script src="./script.js"></script>
</body>

script.js 파일 간단하게 만들고

console.log('Hello Three.js')

 

Three.js가 대부분의 브라우저에서 작동하더라도 Chrome 또는 Firefox 와 같은 개발자 친화적인 브라우저를 사용하는 것이 좋습니다 .

 마우스 오른쪽 버튼으로 클릭하고 선택 Inspect하거나 F12Windows 및 CMD + OPTION + IMacOS에서 눌러서 개발자 도구 를 엽니다.

그런 다음 Developer Tools 상단의 Console 탭으로 이동합니다 .
(잠재적인 오류 및 경고를 보려면 콘솔 을 항상 열어 두어야 합니다)

 

 

Three.js를 로드하는 방법

이제 Three.js 라이브러리를 로드해야 합니다. 

여러 가지 방법이 있습니다. 지금은 단순히 라이브러리를 다운로드해서 사용 할 겁니다. 

https://threejs.org/ 로 이동 하여 다운로드 버튼을 클릭 하여 zip 파일을 다운로드하고 압축을 풉니다. 
다음과 같은 폴더가 있어야 합니다.

폴더 로 이동하여 파일을 프로젝트에 build/   three.min.js   파일을 복사해옵니다.


다음과 같은 결과를 얻어야 합니다.

이제 Three.js 라이브러리를 로드할 수 있습니다.

 

<script src="./three.min.js"></script>
<script src="./script.js"></script>

 script.js 전에 로드 three.min.js해야 합니다.

그렇지 않으면 스크립트가 three.min.js 를 제대로 인식하지 못합니다.

 

 

Three.js를 사용하는 방법

파일 내에서 script.js이제 이라는 변수에 액세스할 수 있습니다. 

console.log()이 변수를 사용하면 내부에서 많은 작업이 진행되고 있음을 알 수 있습니다 .

(THREE. 는 항상 대문자로 써야 합니다.)

console.log(THREE)

 

 THREE변수에는 기존 Three.js 프로젝트에서 필요할 수 있는 대부분의 클래스와 속성이 포함되어 있습니다 .

이러한 클래스 중 하나를 사용하려면 인스턴스화해야 합니다. 

예를 들어 장면을 만들고 싶다면 

const scene = new THREE.Scene(). 

 

구 형상을 생성하려면 다음과 같이 작성해야 합니다

const sphereGeometry = new THREE.SphereGeometry(1.5, 32, 32)

 

728x90
저작자표시 변경금지 (새창열림)

'Three Js' 카테고리의 다른 글

#0 WebGL이란 무엇인가? [Threejs]  (0) 2022.12.15
'Three Js' Related Articles more