WebGL์ด๋?
WebGL ํ์ฉ
Three.js ์์ํ๋ ๋ฒ
var scene
: ๋ฌด๋๋ฅผ ๋ง๋ค๊ณ var aspect
: camera์ ์ข
ํก๋น๋ฅผ ์ค์ ํ๊ณ var camera
: camrea๋ฅผ ์ค์นํ ๋คvar renderer
: ํ๋ฉด์ ํฌ๊ธฐ๋ ์ค์ ํ๊ณ document.body.appendChild
: body์ ๋ฃ์ ํvar axes
: AxesHelper๋var gridHelper
: GridHelper๋ฅผ ์ถ๊ฐํ๋ฉด 3D๊ฐ์ ๋ณด์ธ๋ค...!var geometry
: ๊ฐ์ฒด๋ฅผ ๋ง๋ค๊ณ var material
: ์ฌ์ง์ ์ง์ ํด์var boxMesh
~ scene.add( boxMesh )
: ์ ๋ ๊ฐ์ง๋ก ๋ง๋ ๊ฑธ scene์ ์ถ๊ฐvar OOlight
~ scene.add( OOLight )
: ์กฐ๋ช
์ ๋ง๋ค์ด์ scene์ ์ถ๊ฐknow-how
// ๐ต ํ
๋๋ฆฌ ๋งค๋ํ๊ฒ ๋ง๋ค๊ธฐ
renderer = new THREE.WebGLRenderer({ antialias : true });
// ๐ต ๊ธฐ๋ณธ ๋ํ์ ์์ฉํด ๋นจ๋ ๋ง๋ค๊ธฐ
var geometry = new THREE.CylinderGeometry(1, 1, 120, 10, 1, true);
var objectMaterial = new THREE.MeshToonMaterial( {
color: 0x000000,
side: THREE.DoubleSide,
transparent: true,
opacity: .8
} );
var cylinder = new THREE.Mesh( geometry, objectMateiral );
// ์
์ฒด๊ฐ์ ์ฃผ๊ธฐ ์ํ ์๊ฐ ์ง์
var seaColor = 0x002159;
scene.fog = new THREE.fog( seaColor, 0.005, 2000 );
// ํน์ scene.fog = new THREE.forExp2( seaColor, 5 );
Intro to WebGL with Three.js
three.js spher room
three.js - 3D Z๊ฐ์ ์ดํด
three.js camera setting
The JoongAng ๋์งํธ ์คํ์
FEConf Korea - [FEConf2018] ์๊ฐ๋ณด๋ค ์ฌ์ด webGL (feat. three.js)