Electron+Vue+ThreeJs

Electron：参考链接1，参考链接2

ThreeJs：参考链接

 定义vite插件

const esbuild = require("esbuild");
const build = () => {
  esbuild.buildSync({
    entryPoints: ["./src/electron/background.js"],
    bundle: true,
    platform: "node",
    outfile: "./dist/background.js",
    external: ["electron"],
  });
  esbuild.buildSync({
    entryPoints: ["./src/electron/perload.js"],
    bundle: true,
    platform: "node",
    outfile: "./dist/perload.js",
    external: ["electron"],
  });
};
export let devPlugin = () => {
  return {
    name: "dev-plugin",
    configureServer(server) {
      build();
      server.httpServer.once("listening", () => {
        let addressInfo = server.httpServer.address();
        let { spawn } = require("child_process");
        let httpAddress = `http://${
          addressInfo.address != "::" ? addressInfo.address : "localhost"
        }:${addressInfo.port}`;

        let electronProcess = spawn(
          require("electron").toString(),
          ["./dist/background.js", httpAddress],
          {
            cwd: process.cwd(),
            stdio: "inherit",
          }
        );
        electronProcess.on("close", () => {
          server.close();
          process.exit();
        });
      });
    },
  };
};

主程序background.js 

import { app, BrowserWindow, ipcMain, Menu } from "electron";
const fs = require("fs");
const path = require("path");
// 创建菜单
const createMenu = (win) => {
  const menu = [
    {
      label: "菜单",
      submenu: [
        {
          label: "菜单111",
          click() {   },
        },
      ],
    },
  ];
  Menu.setApplicationMenu(Menu.buildFromTemplate(menu));
};
// 创建窗口
const createWindow = () => {
  let mainWindow = new BrowserWindow({
    width: 666,
    height: 666,
    //alwaysOnTop: true,
    //perload文件作为通信桥梁
    webPreferences: {
      preload: path.join(__dirname, "perload.js"),
      //nodeIntegration: true,
    },
  });
  mainWindow.webContents.openDevTools();
  mainWindow.loadURL(process.argv[2]);
  createMenu(mainWindow);
};

app.whenReady().then(() => {
  createWindow();
});

进程通信

在vue文件中（渲染进程）

onMounted(() => {
  // 向perload通信
  window.api.render("渲染进程向perload的消息");
  // 接收perload消息
  window.api.perload((val) => {
    console.log(val);
  });
});

在background.js中（渲染主进程）

import { app, BrowserWindow, ipcMain, Menu } from "electron";
const fs = require("fs");
const path = require("path");
// 创建菜单
const createMenu = (win) => {
  const menu = [
    {
      label: "菜单",
      submenu: [
        {
          label: "菜单111",
          click() {
            //发送信息=====================
            win.webContents.send("main", "主进程向perload的消息");
          },
        },
      ],
    },
  ];
  Menu.setApplicationMenu(Menu.buildFromTemplate(menu));
};
// 创建窗口
const createWindow = () => {
  let mainWindow = new BrowserWindow({
    width: 666,
    height: 666,
    //alwaysOnTop: true,
    webPreferences: {
      preload: path.join(__dirname, "perload.js"),
      //nodeIntegration: true,
    },
  });
  mainWindow.webContents.openDevTools();
  mainWindow.loadURL(process.argv[2]);
  createMenu(mainWindow);
};

app.whenReady().then(() => {
  createWindow();
});

// 接收信息=====================
ipcMain.on("test", (e, val) => {
  console.log(val);
});

在perload文件中（中间桥梁）

const { contextBridge, ipcRenderer } = require("electron");
// 向主进程通信
ipcRenderer.send("test", "perload向主进程的消息");
ipcRenderer.on("main", (e, val) => {
  console.log(val);
});
// 向渲染进程通信
contextBridge.exposeInMainWorld("api", {
  render: (val) => {
    console.log(val);
  },
  perload: (callback) => {
    callback("perload向渲染进程的消息");
  },
});

ThreeJs

import { ref, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
const hellow = ref();
// 画布
const scene = new THREE.Scene();
// 相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 3;
camera.position.x = 3;
camera.position.y = 3;
camera.lookAt(0, 0, 0);
// 渲染场景
const render = new THREE.WebGL1Renderer();
render.setSize(window.innerWidth, window.innerHeight);

// 物体
const geometry = new THREE.BoxGeometry();
// 材质
const material = new THREE.MeshBasicMaterial({
  color: 0x999999,
});
// 网
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 坐标系
const xyz = new THREE.AxesHelper(10);
scene.add(xyz);
// 控制器
const orbitControls = new OrbitControls(camera, render.domElement);
orbitControls.enableDamping = true;
orbitControls.dampingFactor = 0.06;
// GUI
const GUIObj = {
  full() {
    document.documentElement.webkitRequestFullscreen();
  },
};
const gui = new GUI();
gui.add(GUIObj, "full").name("全屏");
const folder1 = gui.addFolder("位置");
folder1.add(mesh.position, "x").min(-10).max(10).step(1).name("X");
folder1.add(mesh.position, "y").min(-10).max(10).step(1).name("Y");
folder1.add(mesh.position, "z").min(-10).max(10).step(1).name("Z");
//渲染动画
const animate = () => {
  requestAnimationFrame(animate);
  orbitControls.update();
  render.render(scene, camera);
};
onMounted(() => {
  hellow.value.appendChild(render.domElement);
  animate();
  //窗口改变，重新设置场景大小
  window.addEventListener("resize", () => {
    render.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
  });
});