3D美术的逆袭-从Web3D到桌面应用开发

文章

如今前端技术真是无所不能,不仅能做前端网页开发,还涉足后端服务器、移动应用,甚至于桌面应用开发,简直有一统天下的气魄。对于移动端我还能理解,html5具有天然的跨平台优势,开发一些C/S架构的移动应用也属于正常现象,但是,对于桌面应用这方天地,简直想都不敢想。但是,你知道Atom、VScode、wordpress都是用同样的技术开发出来的吗?它们背后的技术就是electron,按照官方的说法,“如果你可以建一个网站,你就可以建一个桌面应用程序。”

好了,原本以为我这个3D美术能待在前端混就不错了,没想到有朝一日还能开发桌面应用,真有些小激动呢。

1.web3d

从头说起,web3d是我进入编程世界的起点,从一个3D美术到一个能做交互的3D美术,这个跨越已经相当令人激动。原本只是出于对开源软件的热爱,投入了blender的世界,原本只是想着能让自己的作品以3D的形式直接展示在网页上,从此接触了blend4web、verge3d、three.js。随着webGL技术的成熟,浏览器性能的强大,网速的提升,如今在网页上展示一个3D模型已经是很平常的事了,当然,web3d还没有大规模用于实用,像3D电商、3D网页游戏、浏览器版VR应用,还没有普及,这项技术还在等待爆发。

2.electron

对于electron简单地说(或者对我来说),它就是一个本地版浏览器。官方说法,它是 基于 Chromium 和 Node.js, 可以使用 HTML, CSS 和 JavaScript 来构建应用的技术。经过测试,它非常简单易用,能直接对web3d应用进行封装,打包成一个exe文件,几乎不用写代码,按照官方文档复制代码即可。

(1)环境搭建

vscode:编程首先得有一个IDE。vscode本身就是electron开发出来的,免费开源,背后是微软,官方推荐。地址:https://code.visualstudio.com/

node.js:JS能在各个领域横行这背后黑手就是node.js,node给了js一个运行环境,使js不再局限于浏览器,使它成为一门真正的编程语言。安装node.js同时会安装npm,我们使用npm安装各种依赖。地址:https://nodejs.org/zh-cn/。windows环境搭建见官方文档,地址:https://electronjs.org/docs/tutorial/development-environment。

git:著名的版本控制工具。git和github是不同的,虽然我们经常用git从github上克隆代码库。地址:https://www.git-scm.com/download/

(2)快速上手

从官方提供的快速上手代码库开始比较容易,按照快速上手文档一步步操作。

首先,复制并运行这个库 electron/electron-quick-start,地址:https://github.com/electron/electron-quick-start

# 克隆代码库

$ git clone https://github.com/electron/electron-quick-start

# 进入库

$ cd electron-quick-start

# 安装依赖库

$ npm install

# 运行应用

$ npm start

(3)下载electron

使用npm安装

npm install –save-dev electron

或者从中国镜像下载,地址:https://npm.taobao.org/mirrors/electron

electron-v4.0.0-beta.7-win32-x64.zip

如果是手动下载,解压后,electron文件夹下有一个resources文件夹,将第1步克隆的快速启动库改名为app,然后双击运行electron.exe,即可启动窗口程序。

简单到不行。

然后将你已经开发好的前端代码放到app下,在main.js中修改入口文件即可。

(4)打包生成asar文件

为了避免代码暴露在外面,不让人看到你的前端代码,你可以使用asar将代码打包。

$ npm install -g asar

如果安装asar不成功,尝试npm init -y,继续。

$ asar pack your-app app.asar

这样会生成一个app.asar。将打包前的前端文件全部移除,双击electron.exe,程序会正常运行。

(5)定制应用程序,打包

虽然官方提供了很多打包工具,但是如果你不想写代码,下面是一些有可视化界面的小工具。

使用resedit(http://www.resedit.net/)修改electron.exe图标、版本、版权等信息。

使用HM NIS Edit(http://hmne.sourceforge.net/)、NSIS(http://hmne.sourceforge.net/)对应用程序打包,生成安装文件。

最后,提供一个我制作的小游戏——减肥熊,它的线上版在这里:https://zjbcool.com/bear.html

减肥熊桌面版:

链接: https://pan.baidu.com/s/1sIhOJyBbJfY9-AA2vyNBSA

提取码: d9kb

如果你想交流经验,可以通过我的博客加入交流群,大家一起学习。zjbcool.com

文章
“Failed to set referrer policy”错误解决办法

问题: wordpress搭建的网站有时在浏览器控制台会出现如下报错: Failed to set referrer policy: The value ” is not one of ‘no-referrer’, ‘no-referrer …

文章
Blender2.8 DEMO源文件下载

源文件均为blender社区用户制作,切勿用于商业(点击图片直接下载) 图片来自blendercn 宇宙飞船 作者: Alessandro Chiffi / ONdata Studio. 18 MB – 协议: CC-BY 爬树生物 作者: …

文章
BakeMyScan-为自动建模提供的模型优化工具

关于BakeMyScan BakeMyScan是一个免费的开源(GNU GPL v3)插件,基于blender2.79。该项目旨在为模型优化提供强大的工具箱,并可用于摄影测量和3D扫描,Sketchfab发布,游戏资产创建,雕刻,3D打印和 …