[3JS] First Three.js Project

Build Tool

• builds the final website after writing web code like HTML/CSS/JS.

• do the optimizations, cache breaking, source mapping, running a local server, etc.

• lots of build tools like Vite, Gulp, Parcel etc

Vite

• Faster to install
• Faster to run
• Less prone to bugs
• Much better dev. experience

Though the lectures are recorded using Webpack, the config. is the same

설치

npm init -y

npm i vite
npm i three

package.json 의 scripts 변경

  "scripts": {
    "dev" : "vite",
    "build" : "vite build"
  },

---

import * as THREE from 'three';

console.log(THREE)

아래처럼 다양한 클래스와 속성들이 존재함

---

First Scene

번들러나 디펜던시, 그 어떤 모듈 없이 Html과 JS 만으로 three.js를 활용해볼 것

< 4 elms for basic scene >

1. Scene
2. Objects
3. Camera
4. Renderer

1. Scene

scene은 three.js에서 콘테이너. Obj, models, particle, lights 등을 담음

// Scene
const scene = new THREE.Scene();

2. Object

Obj에는 기본적인 geometries 부터 import된 model, particles, lights 등 무지무지 많다

Mesh 는 geometry(the shape)와 material(how it looks)의 결합

만드는 순서

1. geometry, material 각각 생성
2. Mesh를 통해 둘을 결합
3. 결합한 Mesh를 Scene에 추가하기 (scene에 안 넣으면 확인 불가능)

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

3. Camera

카메라는 눈에 보이지 않고, 사실상 '시점'에 가까움. 여러 개의 카메라를 쓸 수도 있고, 여러 타입의 카메라가 존재. 여기선 원근감이 있는 perspectiveCamera만 다룸

// Sizes 
const sizes = {
    width: 800,
    height: 600
}

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
camera.position.z = 3;
scene.add(camera);

PerspectiveCamera

두 가지 param을 가짐

1. the field of view (시야각 조절)

• 큰 앵글 사용하면 모든 방향을 한 번에 볼 수 있지만, 왜곡 생김
• 작은 앵글 => 사물 확대된 것처럼 보임
• 사람의 시야와 유사한 건 75도

2. the aspect ratio (= width / height)

• 캔버스 넓이 / 캔버스 높이

Renderer

• 아직까지 아무것도 안 보임 👀 => Renderer 필요
• Renderer에게 render 요청하면 Renderer는 카메라 시점에서 보이는 모습을 캔버스 위에 그려냄

1. 일단 Renderer가 그림을 그릴 canvas를 html에 추가
2. Renderer의 setSize메서드로 캔버스 크기 조정
3. render 메서드에 scene과 camera를 param으로 넘겨주기

• render the scene seenf rom the camera's point of view

• result will be drawn into canvas
  

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height);

// take the picture of the scene, from the camera point of view
renderer.render(scene, camera);

Render!!

both the obj. and camera are in the default position, the center of the scene
=> cannot see an obj from its inside (기본적으로 object의 내부에서는 물체를 확인할 수 없음)

때문에 object의 위치를 변경해주어야 하는데, can transform objs using position, rotation, scale

⭐️ 중요한 것은 render 전에 위치를 변경해줘야함!!

< 옵션 두 가지 >
1. Move Mesh forward
2. Move Camera backward

퀴즈 인증

참고 :
[9rganizedChaos님 강의노트](https://velog.io/@9rganizedchaos/Three.js-journey-%EA%B0%95%EC%9D%98%EB%85%B8%ED%8A%B8-01-03

---

❤️ Webpack이란?

번들링(bundle)을 먼저 알아야

번들

js 파일들, 이미지, css 등 이런 것들을 하나의 모듈로 보고 이 모듈들을 배포용으로 병합하고 포장하는 작업

번들링 작업을 수행하는 툴을 번들러라고 함. 번들러 중에서 Webpack이 현재 시점 가장 인기 많은 아이

babel

최신 문법으로 개발한 js를 예전 파일에서도 잘 돌아가는 파일로 변환해줌(트랜스파일러)

웹팩이랑 같이 쓰면 좋음. 그래서 바벨을 로더로 불러와서 같이 실행해줌

// babel.config.js

module.exports = {
	presets: [
		['@babel/preset-env', {
			targets: {
				chrome: '58',
				ie: '11',
			},
			useBuiltIns: 'usage',
			corejs: {
				version: 3,
			}
		}]
	]
};

// webpack.config.js

const webpackMode = process.env.NODE_ENV || 'development';

module.exports = {
	mode: webpackMode,
	entry: {
		main: './src/main.js',
	},
	output: {
		path: path.resolve('./dist'),
		filename: '[name].min.js'
	},
	// es5로 빌드 해야 할 경우 주석 제거
	// 단, 이거 설정하면 webpack-dev-server 3번대 버전에서 live reloading 동작 안함
	// target: ['web', 'es5'],
	devServer: {
		liveReload: true
	},
	optimization: {
		minimizer: webpackMode === 'production' ? [
			new TerserPlugin({
				terserOptions: {
					compress: {
						drop_console: true
					}
				}
			})
		] : [],
		splitChunks: {
			chunks: 'all'
		}
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				loader: 'babel-loader',
				exclude: /node_modules/
			},
			{
				test: /\.js$/,
				enforce: 'pre',
				use: ['source-map-loader'],
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			minify: process.env.NODE_ENV === 'production' ? {
				collapseWhitespace: true,
				removeComments: true,
			} : false
		}),
		new CleanWebpackPlugin(),
		// CopyWebpackPlugin: 그대로 복사할 파일들을 설정하는 플러그인
		// 아래 patterns에 설정한 파일/폴더는 빌드 시 dist 폴더에 자동으로 생성됩니다.
		// patterns에 설정한 경로에 해당 파일이 없으면 에러가 발생합니다.
		// 사용하는 파일이나 폴더 이름이 다르다면 변경해주세요.
		// 그대로 사용할 파일들이 없다면 CopyWebpackPlugin을 통째로 주석 처리 해주세요.
		new CopyWebpackPlugin({
			patterns: [
				{ from: "./src/main.css", to: "./main.css" },
				{ from: "./src/images", to: "./images" },
			],
		})
	]
};