[0. 초기 설정]
1. 3d모델
- 별star 모양을 렌더링하기 위해 3d 객체를 블렌더를 통해 만들었다.
| 앞 | 옆 | 위 |
 |
 |
 |
- 아래 첨부파일을 통해 다운받으면 된다
- 이때 프로젝트 파일 내에 3dmodel이라는 폴더를 새로 생성하여 옮겨준다
기초 코드 (접은 글)
더보기
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module" src="/star.js"></script>
</body>
</html>star.js
import * as THREE from 'three';
//exposure
const scene = new THREE.Scene();
scene.background=new THREE.Color('0xffffff'); //배경화면을 하얀색으로 미리 바꿨다
//camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
[1. 3d객체를 불러올 환경 설정하기]
1. GLTFLoader
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
//gltf형 파일을 불러오는 GLTFLoader를 import
//난 경로를 저렇게 안써주면 오류가 나서 하나하나 다 써야 했다2. 로드해주는 변수 설정
- 닌 이름을 starLoader로 설정했다.
let starLoader = new GLTFLoader();
[2. 3d객체 불러오기]
1. load 메서드
- load를 사용해 loader를 렌더링할 수 있도록 한다.
- function(star)을 통해 모델이 렌더링될 수 있는 환경을 만들어준다.
starLoader.load(
'3dmodel/3dStar.gltf', function(star){
scene.position.set(0, 0, -5);
scene.add(star.scene);
renderer.render(scene, camera);
}
);그럼 아래와 같이 렌더링됨을 확인할 수 있다
까맣게 보이고 별 모양이 나오지 않는 이유는 빛이 없어서 그렇다
다음 글에는 빛을 생성하고 그 다음 글에서는 회전시켜 보겠다
'three js' 카테고리의 다른 글
| [three js] 개체 위치 설정하기, 이동시키기 (0) | 2023.10.09 |
|---|---|
| [three js] 정육면체 렌더링하기 (0) | 2023.09.05 |
| [three js] 카메라, 렌더링 (0) | 2023.09.05 |
| [three js] npm 기반 불러오기 (0) | 2023.09.05 |
