Three.js: ๊ธฐํ•˜ํ•™์„ ๋นผ๋Š” ๋ฐฉ๋ฒ•?

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

ํ˜•์ƒ์„ ๋บ„ ์ˆ˜์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

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

๊ฐ์‚ฌ

Question

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

์ด๊ฒƒ์„ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/

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

๋‚˜๋Š” ๋‹ต์„ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค-๊ทธ๊ฒƒ์ด ์ตœ์„ ์˜ ๋ฐฉ๋ฒ•์ธ์ง€ ํ™•์‹คํ•˜์ง€๋Š” ์•Š์ง€๋งŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

๋ฐ”๊นฅ ์ชฝ ์ง€์˜ค๋ฉ”ํŠธ๋ฆฌ๋ฅผ ์‹œ๊ณ„ ๋ฐฉํ–ฅ์œผ๋กœ ์ถ”๊ฐ€ ํ•œ ๋‹ค์Œ ๋น„ํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ๋Œ์ถœ ํ•  ๋ชจ์–‘์œผ๋กœ ๋ณ€ํ™˜ํ•˜๊ธฐ ์ „์— ํŒจ์Šค์— ๋ฐ˜ ์‹œ๊ณ„ ๋ฐฉํ–ฅ์œผ๋กœ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.

        var path = new THREE.Path();
        // outer clockwise
        path.moveTo(-10, 10);
        path.lineTo(10, 10);
        path.lineTo(10, -10);
        path.lineTo(-10, -10);
        path.lineTo(-10, 10);
        // inner anti-clockwise
        path.moveTo(-5, 5);
        path.lineTo(-5, -5);
        path.lineTo(-2, -5);
        path.lineTo(-2, 5);
        path.lineTo(-5, 5);
        // inner anti-clockwise
        path.moveTo(2, 5);
        path.lineTo(2, -5);
        path.lineTo(5, -5);
        path.lineTo(5, 5);
        path.lineTo(2, 5);

        var height = 20;
        var shapes = path.toShapes();
        var solid = new THREE.ExtrudeGeometry(shapes, { amount: height, bevelEnabled: false });
        var mesh = new THREE.Mesh(solid, materials['building']);
        mesh.position.y = height;
        mesh.rotation.x = 90 * Math.PI * 2 / 360;
        scene.add(mesh);

์ด๊ฒƒ์„ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/

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