[three js] 정육면체 렌더링하기

<이전>

[three js] 카메라, 렌더링 (tistory.com)

 

[1. 큐브 생성]

1. BoxGeometry(width, height, depth)

- 큐브를 생성하는 기능

- width = 너비

- height = 높이

- depth = 깊이

2. MeshBasicMaterial()

- 객체의 색상 설정

3. Mesh

- 객체에 재질을 적용하고 움직일 수 있게 하는 역할

4. scene.add(객체)

- scene=THREE.Scene

- 장면에 객체 삽입

5. 코드

- BoxGeometry의 명칭 = geometry

- MeshBasicMaterial의 명칭 = material

- Mesh의 명칭 = cube

// main.js

const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );	//초록색
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

 

6. 카메라 위치 조정

위와 같이 작성하면 큐브가 보이지 않는다.

카메라의 z값을 조정하여 큐브가 보이도록 한다

// main.js

camera.position.z = 5;

 

[2. 장면 나타내기]

1. 렌더링하기 위해 함수(function)를 하나 만들어준다

2. requestAnimationFrame(callback: FrameRequestCallback)

- loop 생성을 위해 괄호 안에 1번에서 작성한 함수명을 넣어준다

- 1초에 10번 렌더링하는 기능

- 사용자가 화면을 벗어났을 때에는 잠시 멈춰 에너지 소비를 막는다

3. render

- WebGLRenderer(renderer)을 렌더링한다.4. 코드

function animate() {
	requestAnimationFrame(animate);
	renderer.render( scene, camera );
}
animate();

 

[3. 화면 확인하기]

여기까지 작성하면 아래와 같이 보인다.

(접은 글: main.js 전체 코드)

import * as THREE from 'three';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//Cube
const geometry = new THREE.BoxGeometry(1,1,1);  //width, height, depth
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

//카메라 포지션
camera.position.x = 0;	//작성하지 않아도 된다
camera.position.y = 0;	//작성하지 않아도 된다
camera.position.z = 5;

//렌더링
function animate() {
	requestAnimationFrame(animate);

	renderer.render( scene, camera );
}
animate();