three.js를 이용해 웹에서 어떠한 플러그인 없이도 멋진 3차원 그래픽 웹페이지를 개발할 수 있는데요. 게임 느낌의 3D 웹 개발에 대한 컨텐츠입니다. 내용이 다소 길지만 차근 차근 따라하시다보면 금새 완성하실 수 있습니다.

공간정보시스템 / 3차원 시각화 / 딥러닝 기반 기술 연구소 @지오서비스(GEOSERVICE)
three.js를 이용해 웹에서 어떠한 플러그인 없이도 멋진 3차원 그래픽 웹페이지를 개발할 수 있는데요. 게임 느낌의 3D 웹 개발에 대한 컨텐츠입니다. 내용이 다소 길지만 차근 차근 따라하시다보면 금새 완성하실 수 있습니다.
프로젝트 폴더를 만들어 VS.Code에서 오픈 후 package.json 파일 생성을 위해 터미널에서 다음 명령을 실행한 뒤에 생성된 파일을 편집함
npm init -y
{
"name": "tstServer",
"version": "1.0.0",
"description": "",
"keywords": [],
"author": "",
"license": "ISC"
}
nodemon 설치를 위해 다음 명령 실행
npm i nodemon -D
babel.config.json 파일과 nodemon.json 파일을 생성하고 각각 다음 내용으로 입력
{
"presets": [ "@babel/preset-env" ]
}
{
"exec": "babel-node src/index.js"
}
babel 설치를 위해 다음 명령 실행
npm i @babel/core @babel/cli @babel/node @babel/preset-env -D
express 설치를 위해 다음 명령 실행
npm i express
필요할 경우 pug 설치를 위해 다음 명령 실행
npm i pug
package.json에 설치된 항목에 대한 종속성(Dependency)가 존재하는지 확인하고 다음처럼 scripts 속성을 추가(또는 변경)
{
"name": "tstServer",
..
"scripts": {
"dev": "nodemon"
},
"devDependencies": {
"@babel/cli": "^7.20.7",
"@babel/core": "^7.20.7",
"@babel/node": "^7.20.7",
"@babel/preset-env": "^7.20.2",
"nodemon": "^2.0.20"
},
"dependencies": {
"express": "^4.18.2",
"pug": "^3.0.2"
}
}
src 폴더 만들어 주고 index.js 파일 생성하고 다음처럼 입력
import express from "express";
const app = express();
const port = 7777;
const handleListen = () => console.log(`Listening on http://localhost:${port}`)
app.listen(port, handleListen);
다음 명령을 실행하여 서버 실행하고 웹브라우저에서 http://localhost:7777/로 접속해서 확인
npm run dev