Three.js: ์žฌ๋ฃŒ ํฌ๊ธฐ ๊ฐ์‡ ๊ฐ€ FOV๋ฅผ ๊ณ ๋ คํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

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

PerspectiveCamera์™€ PointsMaterial์„ ์‚ฌ์šฉํ•˜๋Š” ์ผ๋ถ€ Points๋ฅผ ํฌํ•จํ•˜๋Š” ๋ชจ๋ธ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํฌ๊ณ  ๋ณต์žกํ•œ ๋ชจ๋ธ์„ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก OrbitControls.js์˜ ์‚ฌ์šฉ์ž ์ง€์ • ๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณ€๊ฒฝ ์‚ฌํ•ญ ์ค‘ ํ•˜๋‚˜๋Š” ์คŒ ๊ธฐ๋Šฅ์ด ์นด๋ฉ”๋ผ๋ฅผ ๋” ๊ฐ€๊นŒ์ด ์ด๋™ํ•˜๋Š” ๋Œ€์‹  ์นด๋ฉ”๋ผ์˜ FOV๋ฅผ ๋ณ€๊ฒฝํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์นด๋ฉ”๋ผ๊ฐ€ ์›€์ง์—ฌ ๋ชจ๋ธ์˜ ํŠน์ • ๋ถ€๋ถ„์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. ์นด๋ฉ”๋ผ๊ฐ€ ๋ชจ๋ธ์— ๋” ๊ฐ€๊นŒ์›Œ ์งˆ ๋•Œ PointsMaterial ๊ฐ์‡  ํฌ๊ธฐ๊ฐ€ ๋ณ€๊ฒฝ๋˜์ง€๋งŒ FOV๊ฐ€ ๋ณ€๊ฒฝ ๋  ๋•Œ๋Š” ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

ํฌ๊ธฐ ์•Œ๊ณ ๋ฆฌ์ฆ˜์ด FOV๊ฐ€ ์•„๋‹Œ ์นด๋ฉ”๋ผ๊นŒ์ง€์˜ ๊ฑฐ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๊นŒ? ๋‚˜๋Š” ์ „์—์ด ์ €์žฅ์†Œ์— ๊ฒŒ์‹œ ํ•œ ์ ์ด ์—†์œผ๋ฏ€๋กœ ๋ฌด์–ธ๊ฐ€๋ฅผ ๋†“์นœ ๊ฒฝ์šฐ ์‹ค๋ก€ํ•ฉ๋‹ˆ๋‹ค. IE๋กœ ํ…Œ์ŠคํŠธ๋ฅผ ์‹œ๋„ํ–ˆ์ง€๋งŒ ํ˜„์žฌ ํŽ˜์ด์ง€๋ฅผ๋กœ๋“œ ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ, ์ •ํ™•ํžˆ ์–ด๋–ค ๋ฒ„์ „์˜ Three์ธ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์ง€๋งŒ ์ž‘๋…„์— ์žˆ์Šต๋‹ˆ๋‹ค.

PointsMaterial์„ ์ƒ์„ฑํ•˜๋Š” ์ฝ”๋“œ :

var texFlame = new THREE.TextureLoader().load("textures/flame.png");
mtlFlame = new THREE.PointsMaterial ({size: 2, sizeAttenuation: true, color: 0xffffff, transparent: true,  blending: THREE.AdditiveBlending, depthWrite: false, map: texFlame});

FOV๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ์ฝ”๋“œ๋„ ๋น„์Šทํ•˜๊ฒŒ ํฅ๋ฏธ๋กญ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

this.camera.fov = fov;
this.camera.updateProjectionMatrix ();
Three.js ๋ฒ„์ „
  • [] ๊ฐœ๋ฐœ์ž
  • [] r87
  • [x] ...
๋ธŒ๋ผ์šฐ์ €
  • [] ๋ชจ๋‘
  • [x] ํฌ๋กฌ
  • [x] Firefox
  • [ ] ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ
OS
  • [] ๋ชจ๋‘
  • [x] Windows
  • [ ] ๋งฅ OS
  • [] Linux
  • [] Android
  • [] iOS
ํ•˜๋“œ์›จ์–ด ์š”๊ตฌ ์‚ฌํ•ญ (๊ทธ๋ž˜ํ”ฝ ์นด๋“œ, VR ์žฅ์น˜ ๋“ฑ)

์ด๊ฒƒ์ด ํ•˜๋“œ์›จ์–ด์™€ ๊ด€๋ จ๋œ ๊ฒƒ์ธ์ง€๋Š” ๋ชจ๋ฅด์ง€๋งŒ ๊ทธ๋Ÿด ๊ฒƒ ๊ฐ™์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. Windows 10์—์„œ GeForce GTX950์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

Question

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

PointsMaterial.size ์—๋Š” ์„ธ๊ณ„ ๋‹จ์œ„๊ฐ€ ์•„๋‹Œ ํ”ฝ์…€ ๋‹จ์œ„๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ํฌ๊ธฐ๋ฅผ ์ง์ ‘ ์กฐ์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

์ด ๊ด€๋ จ ๊ฒŒ์‹œ๋ฌผ์€ ์œ ์ต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค : https://github.com/mrdoob/three.js/issues/10385#issuecomment -267789138.

gl_PointSize ์€ ์ œํ•œ ๋  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์š”์ฒญํ•œ ํฌ๊ธฐ๊ฐ€ ์›ํ•˜๋Š” ํฌ๊ธฐ๊ฐ€ ์•„๋‹ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@WestLangley. FOV๋ฅผ ๋ณ€๊ฒฝํ•  ๋•Œ PointsMaterial์˜ ํฌ๊ธฐ ์†์„ฑ์„ ๋ณ€๊ฒฝํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ?

๋ฌผ์–ด๋ณด๊ธฐ ์ „์— ๊ทธ ๊ฒŒ์‹œ๋ฌผ์„ ์ฐพ์•˜์ง€๋งŒ ์™œ ๊ทธ๋ ‡๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ํฌ๊ธฐ๋Š” ํ”ฝ์…€์ด์ง€๋งŒ ๊ฐ์‡ ๋Š” ์ด๋ฏธ ์žฅ์น˜ ํ”ฝ์…€๊ณผ ๊ด€๋ จ์ด ์—†์œผ๋ฉฐ ํ•ด๋‹น ํ”„๋กœ์„ธ์Šค๋Š” ์–ด๋–ค ์˜๋ฏธ์—์„œ FOV์™€ ๊ด€๋ จ๋˜์–ด์•ผํ•˜๋Š” ์›๊ทผ๊ณผ ๊ด€๋ จ๋˜์–ด์•ผํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค.

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

PointsMaterial.size ์€ (๋Š”) ํ”ฝ์…€ ๋‹จ์œ„๋กœ ์œ ์ง€ ๋  ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒํ•˜๋ฏ€๋กœ ์ฐธ์กฐ๋ฅผ ์œ„ํ•ด์ด ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์—ฌ๊ธฐ์— ๊ฒŒ์‹œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด stackoverflow ๋‹ต๋ณ€์„ ๊ธฐ๋ฐ˜์œผ๋กœ camera.fov ์˜ ํ•ฉ๋ฆฌ์ ์ธ ๊ฐ’์— ๋Œ€ํ•ด ์ž‘๋™ํ•˜๋Š” ๋‹ค์Œ ํŒจํ„ด์„ ์‚ฌ์šฉํ•˜์—ฌ ํฌ์ธํŠธ๋ฅผ ํ™•์žฅ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

var defaultSize = 10;
points.material.size = defaultSize / Math.tan( ( Math.PI / 180 ) * camera.fov / 2 );
์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰