기본장면 만들기 - Mesh

 

Mesh 만들기

 

src/main.js

import * as THREE from "three";

/* Renderer 만들기 : html에 캔버스 미리 만들기 */
const canvas = document.querySelector("#three-canvas");
const renderer = new THREE.WebGLRenderer({
  canvas,
  antialias: true // 부드러운 효과
});
renderer.setSize(window.innerWidth, window.innerHeight);

/*  Scene 만들기 */
const scene = new THREE.Scene();

/*  Camera 만들기 */

// PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
const camera = new THREE.PerspectiveCamera(
  75, // 시야각 (field of view)
  window.innerWidth / window.innerHeight, // 종횡비(aspect)
  0.1, // near
  1000 // far
);
camera.position.x = 2;
camera.position.y = 2;
camera.position.z = 5;
scene.add(camera);

/*  Messh 만들기 */
const geometry = new THREE.BoxGeometry(1, 1, 1); // 직육면체 지오메트리 만들기 BoxGeometry(1m, 1m, 1m)
// MeshBasicMaterial 는 빛의 영향을 받지 않아 조명이 없어도 보인다.
const material = new THREE.MeshBasicMaterial({
  color: "red" // 재질의 색상
});
const mesh = new THREE.Mesh(geometry, material); // 재질 = geometry(모양) + Material(재질)
scene.add(mesh); // 장면에 올리기

// 그리기
renderer.render(scene, camera);

 

• MeshBasicMaterial는 빛의 영향을 받지 않아 조명이 없어도 보인다.

 

• 도형을 확대 해보면 계단형식으로 깨져 보이는 것은 renderer에서 antialias: true 설정해주면 부드러운 효과가 된다. (단, 추가적인 작업이기 때문에 약간의 성능저하는 있을 수 있음.)