Three.js: ๋””๋ฒ„๊ทธ ๋ฉ”์‹œ์ง€๋ฅผ ๋น„ํ™œ์„ฑํ™”ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

์— ๋งŒ๋“  2015๋…„ 09์›” 06์ผ  ยท  6์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: mrdoob/three.js

์ €๋Š” ํ˜„์žฌ ๋‹จ์ผ ๋ฉ”์‰ฌ๋กœ ๊ฒฐํ•ฉ๋œ ๋งŽ์€ ํ‰๋ฉด ํ˜•์ƒ์„ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ ์ค‘์ž…๋‹ˆ๋‹ค.

๋‚ด ์ฝ”๋“œ๋ฅผ ๋””๋ฒ„๊ทธํ•˜๋ ค๊ณ  ํ•  ๋•Œ ๋””๋ฒ„๊ทธ ๋ฉ”์‹œ์ง€ "THREE.PlaneGeometry: ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ๋Ÿ‰์„ ์ค„์ด๊ธฐ ์œ„ํ•ด THREE.PlaneBufferGeometry ์‚ฌ์šฉ์„ ๊ณ ๋ คํ•˜์‹ญ์‹œ์˜ค." ์ฝ˜์†”์— ์ŠคํŒธ์„ ๋ณด๋‚ด๊ณ  ์ฝ˜์†”์— ์ฝ”๋“œ๋ฅผ ํ‘œ์‹œํ•˜์—ฌ ์ฝ”๋“œ ๋กœ๋“œ ์†๋„๋ฅผ ๋Šฆ์ถฅ๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ๋ฌธ์ œ์— ๋งค๋‹ฌ๋ ค ์žˆ์ง€๋งŒ ๋‹ค๋ฅธ ๋ฌธ์ œ์—์„œ ํŽ˜์ด์ง€๊ฐ€ ๊ณ ์ •๋œ ํ›„ ์˜ค๋ฅ˜๋ฅผ ๋ณด๊ธฐ ์œ„ํ•ด ์ฝ˜์†”์„ ์—ด ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ๊ฒฝ๊ณ  ๋ฉ”์‹œ์ง€๋ฅผ ์ธ์‡„ํ•˜์—ฌ ๋กœ๋“œ ์‹œ๊ฐ„์„ ํฌ๊ฒŒ ๋Šฆ์ถ”๊ธฐ ๋•Œ๋ฌธ์— ๋กœ๋“œํ•˜๋Š” ๋™์•ˆ ์ฝ˜์†”์„ ์—ด์–ด ๋‘˜ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ๋ฉ”์‹œ์ง€๋ฅผ ๋น„ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ? PlaneGeometry๋ฅผ PlaneBufferGeometry๋กœ ์ „ํ™˜ํ•˜๋ ค๊ณ  ์‹œ๋„ํ–ˆ์ง€๋งŒ ์ง€๊ธˆ ๋‹น์žฅ ์ฒ˜๋ฆฌํ•˜๊ณ  ์‹ถ์ง€ ์•Š์€ ๋‹ค๋ฅธ ์˜ค๋ฅ˜๊ฐ€ ์ฝ”๋“œ์— ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ๋‚˜๋Š” ํ˜„์žฌ ๋ฉ”๋ชจ๋ฆฌ์— ๋Œ€ํ•ด ๊ฑฑ์ •ํ•˜์ง€ ์•Š๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ ๋‚ด ์ƒ์‚ฌ์—๊ฒŒ ๋ฐœํ‘œํ•˜๊ธฐ ์œ„ํ•ด ๋ฉฐ์น  ์•ˆ์— ์ž‘์—… ์ค‘์ธ ๋‚ด ํ”„๋กœ์ ํŠธ์˜ ์ž‘๋™(์•ˆ์ •๋œ ์•ˆ์ • ๋ฒ„์ „) ๋ฒ„์ „์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

Suggestion

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

ํ•ฉ์˜์— ๋„๋‹ฌํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด ํ† ๋ก ์„ ๊ณ„์†ํ•˜์ง€๋Š” ์•Š๊ฒ ์ง€๋งŒ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋งํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์•ฑ์„ ๋ณด๊ณ  ์žˆ๋Š” ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด three.js๋กœ ๋นŒ๋“œ๋œ ์ฝ˜์†”๊ณผ ๋ฒ„์ „๋งŒ ๋ณด๊ณ  ์•Œ๋ฉด ๋งค์šฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” Vue, Moment, jQuery, Bootstrap์„ ์‚ฌ์šฉํ•˜๊ณ  ๊ทธ ์ค‘ ๋ˆ„๊ตฌ๋„ ์ฝ˜์†”์— ํ•„์ˆ˜ ๋ฉ”์‹œ์ง€๋ฅผ ๊ธฐ๋กํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  6 ๋Œ“๊ธ€

๋กœ๊ทธ๋ฅผ ๋น„ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์ง€๋งŒ ํ”„๋กœ๋•์…˜ ๋นŒ๋“œ์—์„œ๋Š” ์›ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์•„๋งˆ๋„ ๊ทธ๋ž˜์•ผ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. (์–ด์ฉŒ๋ฉด ๋ฏธ๋‹ˆ์–ด์ฒ˜๊ฐ€ ๊ทธ๊ฒƒ์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค-๋ชจ๋ฆ„)

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์œผ๋กœ ๋ฉ”์‹œ๋ฅผ ๋กœ๋“œํ•˜๋Š” ๋™์•ˆ console.log ํ•จ์ˆ˜๋ฅผ ์žฌ์ •์˜ํ•œ ๋‹ค์Œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์žฌ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

var oldLogFunction = console.log;

console.log = function(){}; // noop

// ... load meshes

console.log = oldLogFunction; // reset console.log

// ... perform debugging

์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ์—๋Š” console.info์ž…๋‹ˆ๋‹ค. :)

์ƒ์‚ฐ์— ๊ด€ํ•œ ๋ง์”€์— ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด ํ”„๋กœ์ ํŠธ์—์„œ ํŒŒํŠธ๋„ˆ์—๊ฒŒ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ๋Š”์ง€ ๋งํ–ˆ๊ณ  ๊ทธ๋Š” ๋กœ๊ทธ ๋ฉ”์‹œ์ง€๋ฅผ ๋น„ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜์ด ์—†๋‹ค๋Š” ์‚ฌ์‹ค์— ๋†€๋ž์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์— +1. ์ €๋Š” stdout์—์„œ PNG๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ๋ช…๋ น์ค„ ๋„๊ตฌ์—์„œ ์ž‘์—… ์ค‘์ด๋ฉฐ console.log ๋ฎ์–ด์“ฐ๋Š” ๊ฒƒ์€ ๋ฌธ์ œ๊ฐ€ ๋˜์ง€ ์•Š์ง€๋งŒ ์•ฝ๊ฐ„์˜ ์‚ฌ๋งˆ๊ท€์ž…๋‹ˆ๋‹ค.

๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ํŠน์ • ๋ฉ”์‹œ์ง€๋Š” ๋‹ค์Œ ๊ณผ quiet ์™€ ๊ฐ™์€ ์˜ต์…˜์„ ์ƒ์„ฑ์ž์— ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์ถฉ๋ถ„ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ญ”๊ฐ€ ์ข€ ๋” ํฌ๊ด„์ ์ธ ๊ฒƒ์ด ์žˆ์œผ๋ฉด ๋” ์ข‹์„ ๊ฒƒ ๊ฐ™์•„์š”...

@crabmusket ๊ฐœ์ธ์ ์œผ๋กœ ๊ทธ ๋ฉ”์‹œ์ง€๋Š” ํ•ญ์ƒ ํ‘œ์‹œ๋˜์–ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์•ฑ์„ ๋ณด๊ณ  ์žˆ๋Š” ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด three.js๋กœ ๋นŒ๋“œ๋œ ์ฝ˜์†”๊ณผ ๋ฒ„์ „๋งŒ ๋ณด๊ณ  ์•Œ๋ฉด ๋งค์šฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฌด๋ฃŒ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ์ˆ˜ํ•ด์•ผ ํ•˜๋Š” ์•ฝ๊ฐ„์˜ ๊ด‘๊ณ ๋ผ๊ณ  ์ƒ๊ฐํ•˜์„ธ์š” ๐Ÿ˜‰

์›๋ž˜ ๋ฌธ์ œ์™€ ๊ด€๋ จํ•˜์—ฌ ์–ด์จŒ๋“  console.info ๋ฉ”์‹œ์ง€๊ฐ€ ๋” ์ด์ƒ ํ‘œ์‹œ๋˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฏ€๋กœ ์ด ๋ฌธ์ œ๋ฅผ ๋‹ซ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? @mrdoob @Mugen87

https://github.com/mrdoob/three.js/pull/5835 ์˜ ํ† ๋ก ์„

ํ•ฉ์˜์— ๋„๋‹ฌํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด ํ† ๋ก ์„ ๊ณ„์†ํ•˜์ง€๋Š” ์•Š๊ฒ ์ง€๋งŒ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋งํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์•ฑ์„ ๋ณด๊ณ  ์žˆ๋Š” ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด three.js๋กœ ๋นŒ๋“œ๋œ ์ฝ˜์†”๊ณผ ๋ฒ„์ „๋งŒ ๋ณด๊ณ  ์•Œ๋ฉด ๋งค์šฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” Vue, Moment, jQuery, Bootstrap์„ ์‚ฌ์šฉํ•˜๊ณ  ๊ทธ ์ค‘ ๋ˆ„๊ตฌ๋„ ์ฝ˜์†”์— ํ•„์ˆ˜ ๋ฉ”์‹œ์ง€๋ฅผ ๊ธฐ๋กํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰