{"id":10936,"date":"2021-03-13T18:19:23","date_gmt":"2021-03-13T09:19:23","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=10936"},"modified":"2022-10-30T08:38:33","modified_gmt":"2022-10-29T23:38:33","slug":"three-js-%eb%bc%88%eb%8c%80-%eb%a7%8c%eb%93%a4%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=10936","title":{"rendered":"three.js start project \ucf54\ub4dc"},"content":{"rendered":"

\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ubaa8\ub4c8 \uae30\ubc18\uc73c\ub85c three.js\ub97c \ub3c4\uc785\ud558\uae30 \uc704\ud55c \ubf08\ub300\uc785\ub2c8\ub2e4. App\uc774\ub77c\ub294 \ud074\ub798\uc2a4\ub97c \ud558\ub098 \ub9cc\ub4e4 \uac83\uc774\uace0 \uc774 App \ud074\ub798\uc2a4\ub97c \ud1b5\ud574 three.js\uc758 \ucd08\uae30\ud654 \ubc0f \uc815\uc721\uba74\uccb4\ub97c \ud68c\uc804\uc2dc\ucf1c \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

\uba3c\uc800 HTML \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <link rel=\"stylesheet\" href=\"style.css\">\r\n    <script type=\"module\" src=\"app.js\"><\/script>\r\n<\/head>\r\n<body>\r\n<\/body>\r\n<\/html> \r\n<\/pre>\n
DOM\uc740 \uc5c6\uace0 css\uc640 js \ud30c\uc77c\ub9cc\uc744 \ucc38\uc870\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. DOM\uc740 js \ud30c\uc77c\uc778 app.js\uc5d0\uc11c \ub3d9\uc801\uc73c\ub85c \ucd94\uac00\ud574 \uc90d\ub2c8\ub2e4. \uba3c\uc800 css\uc5d0 \ub300\ud55c style.css \ud30c\uc77c\uc758 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n* {\r\n    outline: none;\r\n    padding: 0;\r\n    margin: 0;\r\n}\r\n<\/pre>\n
3\ucc28\uc6d0 \ucd9c\ub825\uc774 \uc6f9 \ube0c\ub77c\uc774\uc800 \uc804\uccb4 \ud654\uba74\uc744 \ucc28\uc9c0\ud558\ub294 \uacbd\uc6b0\ub77c\uba74 html\uacfc css\ub294 \ubcc0\uacbd\ub418\uc9c0 \uc54a\uc73c\uba70 \ubaa8\ub4e0 \uc791\uc5c5\uc740 js \ud30c\uc77c\uc5d0\uc11c \ucc98\ub9ac\ub429\ub2c8\ub2e4. \uc774\uc81c app.js \ud30c\uc77c\uc744 \uc0b4\ud3b4\ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nimport * as THREE from 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r126\/three.module.min.js'\r\n\r\nclass App {\r\n    constructor() {\r\n        this.initialize();\r\n        this.render();\r\n    }\r\n\r\n    initialize() {}\r\n    update() {}\r\n    render() {}\r\n    resize() {}\r\n}\r\n\r\nwindow.onload = function() {\r\n    new App()\r\n}\r\n<\/pre>\n
App \ud074\ub798\uc2a4\ub294 4\uac1c\uc758 \ub9e4\uc11c\ub4dc\ub97c \uac16\uc2b5\ub2c8\ub2e4. initialize\ub294 WebGL\uc744 \uc704\ud55c \uac1d\uccb4 \ucd08\uae30\ud654 \ubc0f Mesh, Camera, \ud654\uba74 \ud06c\uae30 \ubcc0\uacbd\uc5d0 \ub530\ub978 \uc774\ubca4\ud2b8 \ub4f1\ub85d\uc744 \ub2f4\ub2f9\ud558\ub294\ub370 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\ninitialize() {\r\n    this.domWebGL = document.createElement('div');\r\n    document.body.appendChild(this.domWebGL);\r\n\r\n    let scene = new THREE.Scene();\r\n    let renderer = new THREE.WebGLRenderer();\r\n\r\n    renderer.setClearColor(0x000000, 1.0);\r\n    renderer.setPixelRatio(window.devicePixelRatio);\r\n    renderer.setSize(window.innerWidth, window.innerHeight);\r\n\r\n    this.domWebGL.appendChild(renderer.domElement);  \r\n    window.onresize = this.resize.bind(this); \r\n\r\n    let cubeGeometry = new THREE.BoxGeometry(1, 1, 1);\r\n    let cubeMaterial = new THREE.MeshNormalMaterial();\r\n    let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);\r\n\r\n    cube.position.x = 0;\r\n    cube.position.y = 0;\r\n    cube.position.z = 0;\r\n\r\n    scene.add(cube);\r\n\r\n    let camera = new THREE.PerspectiveCamera(40, window.innerWidth \/ window.innerHeight, 0.1, 100);\r\n    camera.position.x = 3;\r\n    camera.position.y = 3;\r\n    camera.position.z = 3;\r\n    camera.lookAt(scene.position);\r\n    scene.add(camera);\r\n\r\n    this.camera = camera;\r\n    this.renderer = renderer;\r\n    this.scene = scene;\r\n    this.cube = cube;\r\n}\r\n<\/pre>\n
render \ub9e4\uc11c\ub4dc\ub294 \uc2e4\uc81c 3\ucc28\uc6d0 \ud654\uba74\uc744 \ub80c\ub354\ub9c1\uc744 \uc218\ud589\ud558\uba70 \uc560\ub2c8\uba54\uc774\uc158 \ucc98\ub9ac\ub97c \uc704\ud574 \ub0b4\ubd80\uc801\uc73c\ub85c update\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4. \uc774 \ub450 \ub9e4\uc11c\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nupdate() {\r\n    this.cube.rotation.x += 0.01;\r\n    this.cube.rotation.y += 0.02;\r\n}\r\n\r\nrender() {\r\n    this.update();\r\n    this.renderer.render(this.scene, this.camera);\r\n    requestAnimationFrame(this.render.bind(this));\r\n\r\n}\r\n<\/pre>\n
\uc6f9 \ube0c\ub77c\uc6b0\uc800\uc758 \ud06c\uae30\uac00 \ubcc0\uacbd\ub420 \ub54c 3\ucc28\uc6d0 \ub80c\ub354\ub9c1 \ub418\ub294 \ud654\uba74 \ud06c\uae30\ub3c4 \uadf8\uc5d0 \ub9de\ucdb0 \ubcc0\uacbd\ud574\uc918\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud55c resize \ub9e4\uc11c\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nresize() {\r\n    let camera = this.camera;\r\n    let renderer = this.renderer;\r\n    let scene = this.scene;\r\n\r\n    camera.aspect = window.innerWidth \/ window.innerHeight;\r\n    camera.updateProjectionMatrix();\r\n    renderer.setSize(window.innerWidth, window.innerHeight);\r\n    renderer.render(scene, camera);\r\n}\r\n<\/pre>\n
\uc2e4\ud589\ud574 \ubcf4\uba74 \uc544\ub798\ucc98\ub7fc \uc815\uc721\uba74\uccb4\uc758 \ub9e4\uc26c\uac00 \ud68c\uc804\ud558\ub294 \ud654\uba74\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ubaa8\ub4c8 \uae30\ubc18\uc73c\ub85c three.js\ub97c \ub3c4\uc785\ud558\uae30 \uc704\ud55c \ubf08\ub300\uc785\ub2c8\ub2e4. App\uc774\ub77c\ub294 \ud074\ub798\uc2a4\ub97c \ud558\ub098 \ub9cc\ub4e4 \uac83\uc774\uace0 \uc774 App \ud074\ub798\uc2a4\ub97c \ud1b5\ud574 three.js\uc758 \ucd08\uae30\ud654 \ubc0f \uc815\uc721\uba74\uccb4\ub97c \ud68c\uc804\uc2dc\ucf1c \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uba3c\uc800 HTML \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”style.css”> <script type=”module” src=”app.js”> <\/head> <body> <\/body> <\/html> DOM\uc740 \uc5c6\uace0 css\uc640 js \ud30c\uc77c\ub9cc\uc744 \ucc38\uc870\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. DOM\uc740 js \ud30c\uc77c\uc778 … <\/p>\n
\ub354 \ubcf4\uae30 “three.js start project \ucf54\ub4dc”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145,139],"tags":[],"class_list":["post-10936","post","type-post","status-publish","format-standard","hentry","category-three-js","category-webgl"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/10936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10936"}],"version-history":[{"count":14,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/10936\/revisions"}],"predecessor-version":[{"id":11014,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/10936\/revisions\/11014"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10936"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}