Three.js Basics

Three.js 이해하기

Three.js 이해하기

1. Canvas 찾기

const canvas = document.querySelector('canvas.webgl');

1. WebGLRenderer 생성

const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });

1. Camera 생성

const fov = 75;
const aspect = 2;
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

camera.position.z = 2;

1. Scene 생성

const scene = new THREE.Scene();

1. Mesh 생성 후, Scene에 추가

const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 });

const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

1. renderer.render 메서드에 scene, camera 추가

renderer.render(scene, camera);