帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:electron  Transparent  
Transparent three.js examples on top of electron

  • 源代码名称:electron-threejs-example
  • 源代码网址:http://www.github.com/jeromeetienne/electron-threejs-example
  • electron-threejs-example源代码文档
  • electron-threejs-example源代码下载
  • Git URL:
    git://www.github.com/jeromeetienne/electron-threejs-example.git
  • Git Clone代码到本地:
    git clone http://www.github.com/jeromeetienne/electron-threejs-example
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jeromeetienne/electron-threejs-example
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 基于电子的 Three.js

    这篇文章是 Three.js 游戏作为本机应用程序的一个例子。 这个想法来自于 @Nazariglez,在这个 tweet,一个不错的家伙,一定要查看一下 ! 我喜欢这个想法并尝试复制它。 你可以以使用 Three.js 编码轻松编写 3d 游戏,并且可以以使用本机应用程序获得相同的控件。

    首先什么是电子? 这是原子壳的新 NAME 。 它是运行 Atom 编辑器的'平台'。 这篇文章介绍了在 Atom 博客上的介绍。 这是构建原生应用程序的一种新。 在引擎盖下,电子正在运行 Chromium 和 node.js 。 要获得更多信息,请检查电子邮件的主页。 简单,用网络技术编写桌面应用是一种简单的方式。

    现在让我们看看如何与 Three.js 混合使用:)

    如何编写代码

    我们需要先安装电子应用程序,然后再安装存储库 README.md 服务器,然后才有一个 Three.js 本地应用程序。 它很简单,只是一个简单的npm命令。

    npm install electron-prebuilt -g

    你只需要跟着快速启动,你就会得到在年运行的东西,最多。

    然后添加 three.js, 只是用一个网页来替换他们的index.html 。 作为电子运行 Chromium,它支持 web,WebAudio或者 WebRTC,无问题。 你有很多自由。 在我们的示例中,我简单地从 Three.js examples/ 调用 webgl_buffergeometry_uint

    如何使这里页面透明

    为了让我们的演示显得更好,我们可以以尝试使窗口 background 透明并且不显示窗口框架。 这将给 3 d 带来一个不错的浮动效果。

    TODO包括屏幕截图

    要做同样的事情,首先要修改电子 main.js 。

    //mainWindow = new BrowserWindow({width: 800, height: 600});mainWindow =newBrowserWindow({width:800, height:600, transparent:true, frame:false});

    其次,确保使用css使 body background 透明。

    body {
     background-color: rgba(0,0,0,0);
    }

    那么让 Three.js 保持透明。 只需设定 alpha 和清晰的颜色。

    renderer =newTHREE.WebGLRenderer( { antialias:false, alpha :true } );renderer.setClearColor(0x000000, 0);

    现在一切都是透明的,你可以看到 3d 浮动在顶部:)



    文章标签:electron  Transparent  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语