node js로 웹 게임 보다는

 

node.js로 웹 게임 보다는 그냥 빌드가 되는 게임을 만들 생각이다. 

 

GPT한테 물으니 Electron이라는 걸  쓰면 된다고 한다. 일단 잘뜨는거 같은데 하얀 화면만 뜬다. 

 

Ctrl+Shift+I 이걸로 디버그 모드를 띠울수가 있다. 

 

 모듈을 삭제하고 구버전 문법을 쓰면 잘 작동한다. 

npm install --save-dev electron-builder

이걸로 패키징을 한다고 한다. 

 

{

"name": "electron",

"private": true,

"version": "0.0.0",

"main": "main.js",

"scripts": {

"dev": "vite",

"build": "vite build",

"preview": "vite preview",

"start": "electron .",

"dist": "electron-builder"

},

"build": {

"appId": "com.example.myapp",

"files": [

"dist/",

"node_modules/"

],

"linux": {

"target": [

"deb",

"rpm",

"appImage"

],

"icon": "path/to/icon.png"

}

},

"devDependencies": {

"electron": "^32.0.1",

"electron-builder": "^24.13.3",

"three": "^0.168.0",

"vite": "^5.4.1"

}

}

 

 이런식으로 dist와 build 세팅을 추가해줬다. 

A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot find module '/home/aigoia/Projects/electron/dist/linux-unpacked/resources/app.asar/main.js'
    at Module._resolveFilename (node:internal/modules/cjs/loader:1152:15)
    at s._resolveFilename (node:electron/js2c/browser_init:2:123374)
    at node:electron/js2c/browser_init:2:128981
    at node:electron/js2c/browser_init:2:129230
    at node:electron/js2c/browser_init:2:129234
    at BuiltinModule.compileForInternalLoader (node:internal/bootstrap/realm:398:7)
    at BuiltinModule.compileForPublicLoader (node:internal/bootstrap/realm:337:10)
    at loadBuiltinModule (node:internal/modules/helpers:104:7)
    at Module._load (node:internal/modules/cjs/loader:1009:17)
    at c._load (node:electron/js2c/node_init:2:17025)

 

 이런 오류가 뜨면서 실행이 안된다. 이런거 보면 유니티가 편하기는 편한 툴인거 같다. 

 

 이런식으로 폴더를 지정하니 잘 뜬다. 문제는 프리로드 하지 못한다는 거다. 

 

 일단 어떻게든 돌아가게 했다. 

 

랜더러

const THREE = require('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();
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();
window.addEventListener('resize', () => {
  const width = window.innerWidth;
  const height = window.innerHeight;

  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
});

 

메인이다.

const THREE = require('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();
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();
window.addEventListener('resize', () => {
  const width = window.innerWidth;
  const height = window.innerHeight;

  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
});

 

 문제는 빌드를 하면 안돌아간다는 거다. three모듈을 찾지 못했다고 한다. 

 

https://www.npmjs.com/package/electron-vite

electron-vite

 찾아 보니 이게 있더라. 다시 한번 시도해 보자. 

 

 오케이 내가 원하는 그거다. 이제 여기에 Three.js를 넣어서 프로그램을 동작하게 만들어 보자. 

 

 빌드도 완벽하게 된다. 이제 Three.js만 잘 작동하는지 확인해 보면 될듯 싶다. 이거 이거 유니티 버릴수도 있겠는걸.