Create, Compete & Win at Redbrick Connect 2024! ๐ŸŽ‰

API

๋ ˆ๋“œ๋ธŒ๋ฆญ ์ŠคํŠœ๋””์˜ค์˜ API ๊ฐœ์š”์— ๋Œ€ํ•ด ์•ˆ๋‚ดํ•ฉ๋‹ˆ๋‹ค.

THREE Default API

Redbrick Studio๋Š” 3D ๊ทธ๋ž˜ํ”ฝ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ three.js ๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“ค์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ ๋‚ด์˜ ๋ชจ๋“  ์˜ค๋ธŒ์ ํŠธ๋Š” Mesh, Audio, Light ๋“ฑ three.js์˜ ๋‹ค์–‘ํ•œ ์˜ค๋ธŒ์ ํŠธ๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค.

์ด์— ๋”ฐ๋ผ ์Šคํฌ๋ฆฝํŠธ ๋‚ด์—์„œ three.js์˜ API๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

three.js ์˜ค๋ธŒ์ ํŠธ ํด๋ž˜์Šค๋“ค์€ ๋ชจ๋‘ ๊ธฐ๋ณธ์ด ๋˜๋Š” Object3D ํด๋ž˜์Šค๋กœ๋ถ€ํ„ฐ ํ™•์žฅ๋ฉ๋‹ˆ๋‹ค. ๋ช‡๋ช‡ three.js ์˜ค๋ธŒ์ ํŠธ๋Š” ๋”์šฑ ์„ธ๋ถ„ํ™”๋˜์–ด ํ™•์žฅ๋˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด Light ํด๋ž˜์Šค์˜ ๊ฒฝ์šฐ AmbientLight, PointLight ๋“ฑ์œผ๋กœ ํ™•์žฅ๋ฉ๋‹ˆ๋‹ค. ํด๋ž˜์Šค๊ฐ€ ํ™•์žฅ๋˜๋Š” ๊ฒƒ์€ ํด๋ž˜์Šค์˜ ์„ฑ๊ฒฉ์ด ๋” ๊ตฌ์ฒดํ™”๋˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•˜๋ฉฐ ๊ทธ์— ๋”ฐ๋ผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” API ๋˜ํ•œ ๋”์šฑ ๊ตฌ์ฒด์ ์ธ ๋ฐฉํ–ฅ์œผ๋กœ ํ™•์žฅ๋ฉ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ Object3D ํด๋ž˜์Šค๋งŒ์œผ๋กœ๋„ ๋ชจ๋“  ์˜ค๋ธŒ์ ํŠธ์˜ ๊ธฐ๋ณธ์ ์ธ ๋ถ€๋ถ„์€ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— Object3D ํด๋ž˜์Šค์— ๋จผ์ € ์ต์ˆ™ํ•ด์ง€๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

API Extensions

๊ธฐ๋ณธ์ ์œผ๋กœ ๋ชจ๋“  ์˜ค๋ธŒ์ ํŠธ๋Š” ๊ฐ๊ฐ์˜ ํด๋ž˜์Šค์— ๋งž๋Š” three.js์˜ API๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์ผ๋ถ€ ์˜ค๋ธŒ์ ํŠธ์˜ ๊ฒฝ์šฐ ์˜ค๋ธŒ์ ํŠธ์˜ ํŠน์ˆ˜ํ•œ ๋ชฉ์ ์„ ์œ„ํ•ด, ํ˜น์€ ์‚ฌ์šฉ ํŽธ์˜๋ฅผ ์œ„ํ•ด API Extension์„ ์ถ”๊ฐ€ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ API Extensions ํŽ˜์ด์ง€์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โ„น๏ธ

Redbrick Studio์˜ Object Library์—๋Š” ๋ช‡๊ฐ€์ง€ ์นดํ…Œ๊ณ ๋ฆฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ ์นดํ…Œ๊ณ ๋ฆฌ์˜ ์˜ค๋ธŒ์ ํŠธ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ three.js ์˜ค๋ธŒ์ ํŠธ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์œผ๋‹ˆ ์ฐธ๊ณ  ๋ฐ”๋ž๋‹ˆ๋‹ค.

Redbrick Objectthree.js Object
AssetGroup | Mesh | Object3D
CameraCamera
MeshMesh
GUISprite | CSS2DObject
VideoMesh
SoundObject3D | Audio
LightLight
EffectObject3D | Sprite
SpawnGroup | Mesh
Ad AssetGroup | Mesh | Object3D
โ„น๏ธ

์ถ”๊ฐ€์ ์œผ๋กœ, ๋ชจ๋“  ์˜ค๋ธŒ์ ํŠธ๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” Scene๊ณผ ์ด๋ฅผ ๋ณด๊ธฐ ์œ„ํ•œ ๋ˆˆ ์—ญํ• ์„ ํ•˜๋Š” Camera๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ three.js ์˜ค๋ธŒ์ ํŠธ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

Redbrick Objectthree.js Object
WORLDScene

Built-in Module

์œ„์—์„œ ์†Œ๊ฐœํ•œ three.js ๊ธฐ๋ฐ˜ API๋กœ ์˜ค๋ธŒ์ ํŠธ๋ฅผ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ฒŒ ๋์ง€๋งŒ ์›”๋“œ๋ฅผ ์ œ์ž‘ํ•˜๋‹ค๋ณด๋ฉด ๋‹จ์ˆœํžˆ ์˜ค๋ธŒ์ ํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ฒƒ ์™ธ์—๋„ ์ด๋ฅผ ์œตํ•ฉํ•˜์—ฌ ๊ฒŒ์ž„์ ์ธ ์š”์†Œ๋ฅผ ๋งŒ๋“ค๊ฑฐ๋‚˜ ํ๋ฆ„์„ ์„ค๊ณ„ํ•˜๊ณ  ๋ฉ€ํ‹ฐํ”Œ๋ ˆ์ด๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๋“ฑ ๋‹ค์–‘ํ•œ ์ž‘์—…์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด์— ํ•„์š”ํ•œ API๋“ค์„ ๋ชจ์•„์„œ Builtin Module๋กœ์จ ์ œ๊ณตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ Builtin Modules ํŽ˜์ด์ง€์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.