Three.js: ์—ฌ๋Ÿฌ ์žฌ๋ฃŒ์˜ ์ƒํƒœ

์— ๋งŒ๋“  2017๋…„ 08์›” 21์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: mrdoob/three.js

์ด์ œ ์—ฌ๋Ÿฌ ์ž๋ฃŒ๊ฐ€ ์–ด๋–ค ์‹์œผ๋กœ๋“  ์ง€์›๋˜๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

MultiMaterial์€ ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์ง€๋งŒ ์—ฌ๋Ÿฌ ์žฌ์งˆ๋กœ ์‚ฌ์šฉ์ž ์ง€์ • ๋ฉ”์‹œ(CUBE ์•„๋‹˜)๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ• ๋˜๋Š” ๋‚ด faceVertexUvs ๊ตฌ์กฐ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์•ผ ํ•˜๋Š”์ง€ ๋˜๋Š” ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ๋ฌธ์„œ๋‚˜ ๋„์›€๋ง์„ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

๋„์›€์ด๋‚˜ ๋งํฌ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Question

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

๋‹ฌ์„ฑํ•˜๋ ค๋Š” ๊ฒƒ์„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ดํ•ดํ•˜์ง€ ๋ชปํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ ๋ฐฐ์—ด์„ ์ œ๊ณตํ•˜๋ฉด ์ž‘๋™ํ•ฉ๋‹ˆ๊นŒ? THREE.MultiMaterial ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ˜์†”์— ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒฝ๊ณ ๊ฐ€ ๊ธฐ๋ก๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

THREE.MultiMaterial์ด ์ œ๊ฑฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋Œ€์‹  ๋ฐฐ์—ด์„ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.

์˜ˆ:

const geo = new THREE.BoxGeometry( 1, 1, 1 );
const mat = [
    new THREE.MeshBasicMaterial({ color: 0xFF00FF }),
    new THREE.MeshBasicMaterial({ color: 0x00FF00 }),
    new THREE.MeshBasicMaterial({ color: 0xFF00FF }),
    new THREE.MeshBasicMaterial({ color: 0x00FF00 }),
    new THREE.MeshBasicMaterial({ color: 0xFF00FF }),
    new THREE.MeshBasicMaterial({ color: 0x00FF00 }),
];
const mesh = new THREE.Mesh( geo, mat ); 

๋‚˜๋Š” ์ด๊ฒƒ์„ ๋‚ด ์ž์‹ ์˜ ์‚ฌ์šฉ์ž ์ •์˜ ๋ฉ”์‰ฌ์— ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

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

๋‹ฌ์„ฑํ•˜๋ ค๋Š” ๊ฒƒ์„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ดํ•ดํ•˜์ง€ ๋ชปํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ ๋ฐฐ์—ด์„ ์ œ๊ณตํ•˜๋ฉด ์ž‘๋™ํ•ฉ๋‹ˆ๊นŒ? THREE.MultiMaterial ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ˜์†”์— ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒฝ๊ณ ๊ฐ€ ๊ธฐ๋ก๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

THREE.MultiMaterial์ด ์ œ๊ฑฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋Œ€์‹  ๋ฐฐ์—ด์„ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.

์˜ˆ:

const geo = new THREE.BoxGeometry( 1, 1, 1 );
const mat = [
    new THREE.MeshBasicMaterial({ color: 0xFF00FF }),
    new THREE.MeshBasicMaterial({ color: 0x00FF00 }),
    new THREE.MeshBasicMaterial({ color: 0xFF00FF }),
    new THREE.MeshBasicMaterial({ color: 0x00FF00 }),
    new THREE.MeshBasicMaterial({ color: 0xFF00FF }),
    new THREE.MeshBasicMaterial({ color: 0x00FF00 }),
];
const mesh = new THREE.Mesh( geo, mat ); 

๋‚˜๋Š” ์ด๊ฒƒ์„ ๋‚ด ์ž์‹ ์˜ ์‚ฌ์šฉ์ž ์ •์˜ ๋ฉ”์‰ฌ์— ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

@imjasonmiller๊ฐ€ ๋งํ–ˆ๋“ฏ์ด ์œ ์ผํ•œ ์ฐจ์ด์ ์€ THREE.MultiMaterial ์ธ์Šคํ„ด์Šค ๋Œ€์‹  ์ผ๋ฐ˜ ๋ฐฐ์—ด ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ง€์˜ค๋ฉ”ํŠธ๋ฆฌ์˜ ์žฌ๋ฃŒ ์ธ๋ฑ์Šค ์„ค์ •์€ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์•Œ๊ฒ ์Šต๋‹ˆ๋‹ค ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค - ๋ชจ๋‘ ์ข‹์Šต๋‹ˆ๋‹ค

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