How to use NPM in Blazor - YouTube
three js 를 사용하기 위한 npm install 셋팅을 준비한다.
우선 maui blazor 앱을 생성합니다.
다음과 같은 창이 생긴다면 잘 만들어 진 것입니다.
우선 three js를 사용하면 현제 프로젝트에 three js를 설치해야 하기에 저는 npm을 사용하여 three js를 설치하는 방법을 사용하겠습니다.
- 프로젝트 내에 npmjs 폴더를 만듭니다.
- 프로젝트에 오른쪽 마우스 클릭을 한후 터미널 창을 엽니다. cd npmjs로 npmjs 폴더로 들어갑니다.
npm init명령어를 사용하여 npm pakage 파일을 만들어 주도록 합니다.- 일단 기본적으로 다 default 값으로 설정하도록 하겠습니다.
- 그러면 생성된 package json의 내용을 변경해 보겠습니다.
- scripts에 webpack으로 빌드하는 부분을 추가해 주고 devDependencies에도 webpack을 추가해주겠습니다.
{
"name": "npmjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack ./src/index.js --output-path ../wwwroot/js --output-filename index.bundle.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.81.0",
"webpack-cli": "^5.0.2"
}
}npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save three 을 사용해서 package를 다운로드 합니다.
npm run build 명령어를 사용해서 webpack을 실행해야 하는데 그전에 사용하려는 javascript 파일을 간단하게 만들어 봅시다.
우선 npmjs 폴더 내에 src 폴더를 생성하고 그 안에index.js 파일을 만듭니다.
npmjs/src/index.js
index.js
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();그리고 이제 npm run build를 사용해 봅시다.
그리고 마지막으로 wwwroot/index.html 파일에서
<body>의 마지막 부분 script scr를 추가해 줍니다.
wwwroot/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>PointCloudViewer</title>
<base href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/app.css" rel="stylesheet" />
<link href="PointCloudViewer.styles.css" rel="stylesheet" />
</head>
<body>
<div class="status-bar-safe-area"></div>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webview.js" autostart="false"></script>
<script src="js/index.bundle.js"></script> <!--여기에 npm run build 후 생성된 index.bundle.js 파일을 넣어줍니다.-->
</body>
</html><script src="js/index.bundle.js"></script> <!--여기에 npm run build 후 생성된 index.bundle.js 파일을 넣어줍니다.-->
그리고 PointCloudViewer를 실행하면 blazor UI 아래에 three scene이 추가된 것을 확인할 수 있습니다.
매번 npm run build를 타이핑 하는 수고를 줄이기 위해서
프로젝트 오른쪽 클릭하여 속성에서 빌드 전 이벤트에 npm run build을 넣습니다.
그렇게 하면 프로젝트 이름을 더블클릭하면 나오는 프로젝트 파일에서 다음과 같은 코드가 추가 됩니다.
<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
<Exec Command="npm run build" />
</Target>해당 코드를 아래와 같이 바꿉니다.
<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
<Exec Command="npm install" WorkingDirectory="npmjs"/>
<Exec Command="npm run build" WorkingDirectory="npmjs"/>
</Target>
이렇게 하면 빌드 작업시 javascript 코드가 바뀌었을 때 매번 명령어를 입력할 필요 없이 바로 실행하시면 됩니다.
다음 글은 three js를 어떻게 blazor ui 내부에서 실행하는지에 관해 알아보겠습니다.
