• Stars
    star
    296
  • Rank 140,464 (Top 3 %)
  • Language
    JavaScript
  • Created about 9 years ago
  • Updated about 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Oculus + Node.js + Three.js 打造VR世界

Oculus + Node.js + Three.js 打造VR世界

Oculus Rift 是一款为电子游戏设计的头戴式显示器。这是一款虚拟现实设备。这款设备很可能改变未来人们游戏的方式。

周五Hackday Showcase的时候,突然有了点小灵感,便将闲置在公司的Oculus DK2借回家了——已经都是灰尘了~~。

在尝试一个晚上的开发环境搭建后,我放弃了开发原生应用的想法。一是没有属于自己的电脑(如果Raspberry Pi II不算的话)——没有Windows、没有GNU/Linux,二是公司配的电脑是Mac OS。对于嵌入式开发和游戏开发来说,Mac OS简直是手机中的Windows Phone——坑爹的LLVM、GCC(Mac OS )、OpenGL、OGLPlus、C++11。并且官方对Mac OS和Linux的SDK的支持已经落后了好几个世纪。

说到底,还是Web的开发环境到底还是比较容易搭建的。这个repo的最后效果图如下所示:

最后效果图

效果:

  1. WASD控制前进、后退等等。
  2. 旋转头部 = 真实的世界。
  3. 附加效果: 看久了头晕。

现在,让我们开始构建吧。

Node Oculus Services

这里,我们所要做的事情便是将传感器返回来的四元数(Quaternions)与欧拉角(Euler angles)以API的形式返回到前端。

安装Node NMD

Node.js上有一个Oculus的插件名为node-hmd,hmd即面向头戴式显示器。它就是Oculus SDK的Node接口,虽说年代已经有些久远了,但是似乎是可以用的——官方针对 Mac OS和Linux的SDK也已经很久没有更新了。

在GNU/Linux系统下,你需要安装下面的这些东西的

freeglut3-dev
mesa-common-dev
libudev-dev
libxext-dev
libxinerama-dev
libxrandr-dev
libxxf86vm-dev

Mac OS如果安装失败,请使用Clang来,以及GCC的C标准库(PS: 就是 Clang + GCC的混合体,它们之间就是各种复杂的关系。。):

export CXXFLAGS=-stdlib=libstdc++

export CC=/usr/bin/clang
export CXX=/usr/bin/clang++

(PS: 我使用的是Mac OS El Captian + Xcode 7.0. 2)clang版本如下:

Apple LLVM version 7.0.2 (clang-700.1.81)
Target: x86_64-apple-darwin15.0.0
Thread model: posix

反正都是会报错的:

ld: warning: object file (Release/obj.target/hmd/src/platform/mac/LibOVR/Src/Service/Service_NetClient.o) was built for newer OSX version (10.7) than being linked (10.5)
ld: warning: object file (Release/obj.target/hmd/src/platform/mac/LibOVR/Src/Tracking/Tracking_SensorStateReader.o) was built for newer OSX version (10.7) than being linked (10.5)
ld: warning: object file (Release/obj.target/hmd/src/platform/mac/LibOVR/Src/Util/Util_ImageWindow.o) was built for newer OSX version (10.7) than being linked (10.5)
ld: warning: object file (Release/obj.target/hmd/src/platform/mac/LibOVR/Src/Util/Util_Interface.o) was built for newer OSX version (10.7) than being linked (10.5)
ld: warning: object file (Release/obj.target/hmd/src/platform/mac/LibOVR/Src/Util/Util_LatencyTest2Reader.o) was built for newer OSX version (10.7) than being linked (10.5)
ld: warning: object file (Release/obj.target/hmd/src/platform/mac/LibOVR/Src/Util/Util_Render_Stereo.o) was built for newer OSX version (10.7) than being linked (10.5)
[email protected] node_modules/node-hmd

不过,有最后一行就够了。

Node.js Oculus Hello,World

现在,我们就可以写一个Hello,World了,直接来官方的示例~~。

var hmd = require('node-hmd');

var manager = hmd.createManager("oculusrift");

manager.getDeviceInfo(function(err, deviceInfo) {
    if(!err) {
        console.log(deviceInfo);
    }
    else {
        console.error("Unable to retrieve device information.");
    }
});

manager.getDeviceOrientation(function(err, deviceOrientation) {
    if(!err) {
        console.log(deviceOrientation);
    }
    else {
        console.error("Unable to retrieve device orientation.");
    }
});

运行之前,记得先连上你的Oculus。会有类似于下面的结果:

{ CameraFrustumFarZInMeters: 2.5,
  CameraFrustumHFovInRadians: 1.29154372215271,
  CameraFrustumNearZInMeters: 0.4000000059604645,
  CameraFrustumVFovInRadians: 0.942477822303772,
  DefaultEyeFov:
   [ { RightTan: 1.0923680067062378,
       LeftTan: 1.0586576461791992,
       DownTan: 1.3292863368988037,
       UpTan: 1.3292863368988037 },
     { RightTan: 1.0586576461791992,
       LeftTan: 1.0923680067062378,
       DownTan: 1.3292863368988037,
       UpTan: 1.3292863368988037 } ],
  DisplayDeviceName: '',
  DisplayId: 880804035,
  DistortionCaps: 66027,
  EyeRenderOrder: [ 1, 0 ],
  ...

接着,我们就可以实时返回这些数据了。

Node Oculus WebSocket

在网上看到http://laht.info/WebGL/DK2Demo.html这个虚拟现实的电影,并且发现了它有一个WebSocket,然而是Java写的,只能拿来当参考代码。

现在我们就可以写一个这样的Web Services,用的仍然是Express + Node.js + WS。

var hmd = require("node-hmd"),
    express = require("express"),
    http = require("http").createServer(),
    WebSocketServer = require('ws').Server,
    path = require('path');

// Create HMD manager object
console.info("Attempting to load node-hmd driver: oculusrift");
var manager = hmd.createManager("oculusrift");
if (typeof(manager) === "undefined") {
    console.error("Unable to load driver: oculusrift");
    process.exit(1);
}
// Instantiate express server
var app = express();
app.set('port', process.env.PORT || 3000);

app.use(express.static(path.join(__dirname + '/', 'public')));
app.set('views', path.join(__dirname + '/public/', 'views'));
app.set('view engine', 'jade');

app.get('/demo', function (req, res) {
    'use strict';
    res.render('demo', {
        title: 'Home'
    });
});

// Attach socket.io listener to the server
var wss = new WebSocketServer({server: http});
var id = 1;

wss.on('open', function open() {
    console.log('connected');
});

// On socket connection set up event emitters to automatically push the HMD orientation data
wss.on("connection", function (ws) {
    function emitOrientation() {
        id = id + 1;
        var deviceQuat = manager.getDeviceQuatSync();
        var devicePosition = manager.getDevicePositionSync();

        var data = JSON.stringify({
            id: id,
            quat: deviceQuat,
            position: devicePosition
        });

        ws.send(data, function (error) {
            //it's a bug of websocket, see in https://github.com/websockets/ws/issues/337
        });
    }

    var orientation = setInterval(emitOrientation, 1000);

    ws.on("message", function (data) {
        clearInterval(orientation);
        orientation = setInterval(emitOrientation, data);
    });

    ws.on("close", function () {
        setTimeout(null, 500);
        clearInterval(orientation);
        console.log("disconnect");
    });
});

// Launch express server
http.on('request', app);
http.listen(3000, function () {
    console.log("Express server listening on port 3000");
});

总之,就是连上的时候不断地发现设备的数据:

var data = JSON.stringify({
    id: id,
    quat: deviceQuat,
    position: devicePosition
});

ws.send(data, function (error) {
    //it's a bug of websocket, see in https://github.com/websockets/ws/issues/337
});

上面有一行注释是我之前一直遇到的一个坑,总之需要callback就是了。

Three.js + Oculus Effect + DK2 Control

在最后我们需要如下的画面:

Three.js Oculus Effect

当然,如果你已经安装了Web VR这一类的东西,你就不需要这样的效果了。如标题所说,你已经知道要用Oculus Effect,它是一个Three.js的插件。

在之前的版本中,Three.js都提供了Oculus的Demo,当然只能用来看。并且交互的接口是HTTP,感觉很难玩~~。

Three.js DK2Controls

这时,我们就需要根据上面传过来的四元数(Quaternions)与欧拉角(Euler angles)来作相应的处理。

{
    "position": {
        "x": 0.020077044144272804,
        "y": -0.0040545957162976265,
        "z": 0.16216422617435455
    },
    "quat": {
        "w": 0.10187230259180069,
        "x": -0.02359195239841938,
        "y": -0.99427556991577148,
        "z": -0.021934293210506439
    }
}

欧拉角与四元数

(ps: 如果没copy好,麻烦提出正确的说法,原谅我这个挂过高数的人。我只在高中的时候,看到这些资料。)

欧拉角是一组用于描述刚体姿态的角度,欧拉提出,刚体在三维欧氏空间中的任意朝向可以由绕三个轴的转动复合生成。通常情况下,三个轴是相互正交的。

对应的三个角度又分别成为roll(横滚角),pitch(俯仰角)和yaw(偏航角),就是上面的postion里面的三个值。。

roll = (rotation about Z);

pitch = (rotation about (Roll • Y));

yaw = (rotation about (Pitch • Raw • Z));”

-- 引自《Oculus Rift In Action》

转换成代码。。

this.headPos.set(sensorData.position.x * 10 - 0.4, sensorData.position.y * 10 + 1.75, sensorData.position.z * 10 + 10);

四元数是由爱尔兰数学家威廉·卢云·哈密顿在1843年发现的数学概念。

从明确地角度而言,四元数是复数的不可交换延伸。如把四元数的集合考虑成多维实数空间的话,四元数就代表着一个四维空间,相对于复数为二维空间。

反正就是用于描述三维空间的旋转变换

结合下代码:

this.headPos.set(sensorData.position.x * 10 - 0.4, sensorData.position.y * 10 + 1.75, sensorData.position.z * 10 + 10);
this.headQuat.set(sensorData.quat.x, sensorData.quat.y, sensorData.quat.z, sensorData.quat.w);

this.camera.setRotationFromQuaternion(this.headQuat);
this.controller.setRotationFromMatrix(this.camera.matrix);

就是,我们需要设置camera和controller的旋转。

这使我有足够的理由相信Oculus就是一个手机 + 一个6轴运动处理组件的升级板——因为,我玩过MPU6050这样的传感器,如图。。。

Oculus 6050

Three.js DK2Controls

虽然下面的代码不是我写的,但是还是简单地说一下。

/*
 Copyright 2014 Lars Ivar Hatledal
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */

THREE.DK2Controls = function (camera) {

    this.camera = camera;
    this.ws;
    this.sensorData;
    this.lastId = -1;

    this.controller = new THREE.Object3D();

    this.headPos = new THREE.Vector3();
    this.headQuat = new THREE.Quaternion();

    var that = this;
    var ws = new WebSocket("ws://localhost:3000/");
    ws.onopen = function () {
        console.log("### Connected ####");
    };

    ws.onmessage = function (evt) {
        var message = evt.data;
        try {
            that.sensorData = JSON.parse(message);
        } catch (err) {
            console.log(message);
        }
    };

    ws.onclose = function () {
        console.log("### Closed ####");
    };

    this.update = function () {

        var sensorData = this.sensorData;
        if (sensorData) {
            var id = sensorData.id;
            if (id > this.lastId) {
                this.headPos.set(sensorData.position.x * 10 - 0.4, sensorData.position.y * 10 + 1.75, sensorData.position.z * 10 + 10);
                this.headQuat.set(sensorData.quat.x, sensorData.quat.y, sensorData.quat.z, sensorData.quat.w);

                this.camera.setRotationFromQuaternion(this.headQuat);
                this.controller.setRotationFromMatrix(this.camera.matrix);
            }
            this.lastId = id;
        }


        this.camera.position.addVectors(this.controller.position, this.headPos);
        if (this.camera.position.y < -10) {
            this.camera.position.y = -10;
        }

        if (ws) {
            if (ws.readyState === 1) {
                ws.send("get\n");
            }
        }

    };
};

打开WebSocket的时候,不断地获取最新的传感器状态,然后update。谁在调用update方法?Three.js

我们需要在我们的初始化代码里初始化我们的control:

var oculusControl;

function init() {
        ...
	oculusControl = new THREE.DK2Controls( camera );
	...
}

并且不断地调用update方法。

function animate() {
    requestAnimationFrame( animate );
    render();
    stats.update();
}
function render() {
    oculusControl.update( clock.getDelta() );
    THREE.AnimationHandler.update( clock.getDelta() * 100 );

    camera.useQuaternion = true;
    camera.matrixWorldNeedsUpdate = true;

    effect.render(scene, camera);
}

最后,添加相应的KeyHandler就好了~~。

Three.js KeyHandler

KeyHandler对于习惯了Web开发的人来说就比较简单了:

this.onKeyDown = function (event) {
    switch (event.keyCode) {
        case 87: //W
            this.wasd.up = true;
            break;
        case 83: //S
            this.wasd.down = true;
            break;
        case 68: //D
            this.wasd.right = true;
            break;
        case 65: //A
            this.wasd.left = true;
            break;
    }
};

this.onKeyUp = function (event) {
    switch (event.keyCode) {
        case 87: //W
            this.wasd.up = false;
            break;
        case 83: //S
            this.wasd.down = false;
            break;
        case 68: //D
            this.wasd.right = false;
            break;
        case 65: //A
            this.wasd.left = false;
            break;
    }
};

然后就是万恶的if语句了:

if (this.wasd.up) {
    this.controller.translateZ(-this.translationSpeed * delta);
}

if (this.wasd.down) {
    this.controller.translateZ(this.translationSpeed * delta);
}

if (this.wasd.right) {
    this.controller.translateX(this.translationSpeed * delta);
}

if (this.wasd.left) {
    this.controller.translateX(-this.translationSpeed * delta);
}

this.camera.position.addVectors(this.controller.position, this.headPos);

if (this.camera.position.y < -10) {
    this.camera.position.y = -10;
}

快接上你的HMD试试吧~~

结语

如我在《RePractise前端篇: 前端演进史》一文中所说的,这似乎就是新的"前端"。

License

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。© 2015 Phodal Huang

待我代码编成,娶你为妻可好 @花仲马

More Repositories

1

github

GitHub 漫游指南- a Chinese ebook on how to build a good project on Github. Explore the users' behavior. Find some thing interest.
Rich Text Format
9,132
star
2

growth-ebook

Growth Engineering: The Definitive Guide。全栈增长工程师指南
HTML
7,688
star
3

awesome-iot

Awesome IoT. A collaborative list of great resources about IoT Framework, Library, OS, Platform
Python
4,042
star
4

ideabook

一个全栈增长工程师的练手项目集. A Growth Engineering Idea in Action.
HTML
3,729
star
5

migration

《系统重构与迁移指南》手把手教你分析、评估现有系统、制定重构策略、探索可行重构方案、搭建测试防护网、进行系统架构重构、服务架构重构、模块重构、代码重构、数据库重构、重构后的架构守护
Java
3,232
star
6

microfrontends

Micro-frontend Architecture in Action-微前端的那些事儿
3,012
star
7

prompt-patterns

Prompt 编写模式:如何将思维框架赋予机器,以设计模式的形式来思考 prompt
2,810
star
8

growth-in-action

全栈增长工程师实战
HTML
2,492
star
9

designiot

教你设计物联网系统。构建自己的Internet of Things 。
HTML
2,192
star
10

growth-ionic

[v2.0 DEPRECATED, please update to Growth 3.0] Growth - App to help you Be Awesome Developer & Awesome Hacker
TypeScript
2,158
star
11

ledge

Ledge —— DevOps knowledge learning platform. DevOps、研发效能知识和工具平台,是我们基于在 ThoughtWorks 进行的一系列 DevOps 实践、敏捷实践、软件开发与测试、精益实践提炼出来的知识体系。它包含了各种最佳实践、操作手册、原则与模式、度量、工具,用于帮助您的企业在数字化时代更好地前进,还有 DevOps 转型。
TypeScript
2,142
star
12

fe

《我的职业是前端工程师》 - Ebook:I'm a FrontEnd Developer
HTML
2,004
star
13

serverless

Serverless 架构应用开发指南 - Serverless Architecture Application Development Guide with Serverless Framework.
HTML
1,729
star
14

developer

developer roadmap. use growth https://github.com/phodal/growth replace this
Makefile
1,712
star
15

aigc

《构筑大语言模型应用:应用开发与架构设计》一本关于 LLM 在真实世界应用的开源电子书,介绍了大语言模型的基础知识和应用,以及如何构建自己的模型。其中包括Prompt的编写、开发和管理,探索最好的大语言模型能带来什么,以及LLM应用开发的模式和架构设计。
Rust
1,354
star
16

growth

Growth 3.0 with React Native - an app to help you to be Awesome Developer
JavaScript
1,231
star
17

iot

IoT, 这是一个最小Internet of Things ,一个Internet of Things相关的毕业设计产生的一个简化的物联网系统。 。
Python
1,129
star
18

booktree

A Book Tree
JavaScript
1,044
star
19

skilltree

Web Developer 技能树
JavaScript
952
star
20

ideas

Ideas of Phodal
940
star
21

articles

Article Publish in Wechat & Toutiao
Makefile
911
star
22

toolbox

Phodal's Toolbox
HTML
906
star
23

coca

Coca is a toolbox which is design for legacy system refactoring and analysis, includes call graph, concept analysis, api tree, design patterns suggest. Coca 是一个用于系统重构、系统迁移和系统分析的工具箱。它可以分析代码中的测试坏味道、模块化分析、行数统计、分析调用与依赖、Git 分析以及自动化重构等。
Go
881
star
24

mooa

Mooa 是一个为 Angular 服务的微前端框架。A independent-deployment micro-frontend Framework for Angular from single-spa.
TypeScript
841
star
25

clean-frontend

Clean Frontend Architecture:整洁前端架构
TypeScript
805
star
26

tangping

躺平即正义。Nothing is true, everything is permitted
708
star
27

repractise

RePractise
HTML
699
star
28

sherlock

Skill Tree Sherlock
JavaScript
675
star
29

lan

Internet of Things Server Layer with CoAP, WebSocket, MQTT, HTTP Protocol.
JavaScript
559
star
30

eks

嵌入式知识总汇 Embedded Knowledge Structure
552
star
31

weapp-quick

微信小应用示例代码
JavaScript
474
star
32

ebook-boilerplate

A Markdown convert to Ebook ➡️ html、mobi、epub、pdf、rtf Template
CSS
426
star
33

quake

Quake is a knowledge management meta-framework for geeks. Use meta-data + Transflow to CRUD data, Git + markdown to management content, Web Component for frontend-custom. Quake 是面向极客的知识管理元框架。
Rust
423
star
34

growth-roadmap

Growth APP' Project, Links, Blogs, Books, Resources
CSS
407
star
35

aofe.code

《前端架构:从入门到微前端》源码,code for Architecture of Frontend
JavaScript
370
star
36

new-project-checklist

🥳🥳🥳🥳 a checklist & tool for new project setup for developer. 新项目检查清单及其工具。
JavaScript
347
star
37

awesome-iot-document

Awesome IoT Documents. [Deprecated] Internet of Things Document
340
star
38

phodit

Phodal's markdown/ebook editor with MicroFrontend & Web Components
TypeScript
330
star
39

lowcode

Low-code platform design rule
275
star
40

weapp-webdemo

A Hack of Weapp Framework
JavaScript
268
star
41

dx-book

《开发者体验:探索与重塑》电子书。book of research and refactoring in developer experience (WIP)
SCSS
259
star
42

evolution

Growth:增长工程师修炼之道——读书、写作、编程
HTML
244
star
43

licenses

OpenSource License Explains
HTML
243
star
44

adr

Architecture Decision Records in Node.js with Reporter, supported Windows, GNU/Linux, macOS - 轻量级架构决策记录工具
TypeScript
240
star
45

cloud-dev

云研发,是一种生于云上的闭环 + 代码化的软件开发方式。它可以让业务人员、开发人员、运营人员等在同一个云端共同协作、透明化地完成整个软件的生命周期(需求、设计、编码、构建、部署、运营),而非相互隔离,又或者是借助于多个软件才能完成工作。
225
star
46

mole

Mole - based-git cloud note | 墨乐 - GitHub上的云笔记
JavaScript
222
star
47

techlead

Tech Lead Toolbox
TypeScript
197
star
48

make

📖📖📖📖📖 写给软件工程师看的硬件编程指南
HTML
193
star
49

fde

前端体系规划指南。Architecture of Frontend Development Efficiency
192
star
50

vmap

location:china, GitHub most popular Chinese user in Map
JavaScript
185
star
51

md

A Markdown Editor for Wechat Media Platform
JavaScript
183
star
52

aofe.images

《前端架构:从入门到微前端》原图,image for Architecture of Frontend
161
star
53

smart-home

Phodal's Smart Home Setup Guide:HomeBridge + Home Assistant + Amazon Echo
C++
152
star
54

2md

A Converter for Copy/Paste content to Markdown
JavaScript
151
star
55

trusted

10 factor to build trusted system - 构建可信系统的 10 元素
138
star
56

diaonan

MQTT协议,CoAP协议,WebSocket,物联网协议测试平台
CSS
137
star
57

frontend

《大前端:前端的扩张》
HTML
137
star
58

mifa

Mifa Design
CSS
134
star
59

wecode

A Serverless Gist Application in WeChat. 微信群里的代码协作小程序
JavaScript
125
star
60

lettuce

Mobile Framework for Romantic. 简约的移动开发框架
JavaScript
124
star
61

iot-coap

IoT Learning with CoAP Protocol
JavaScript
121
star
62

awesome-iot-projects

Awesome IoT Projects. A collaborative list of great resources about IoT Demos
112
star
63

setup.guide

前端程序员的 macOS 搭建指南
111
star
64

echoesworks

Next-Generation Tech Blog/Presentation/Slider Framework
JavaScript
109
star
65

water

Water 是开源的下一代软件架构模式,专为云研发/云开发时代设计的软件架构。由实时开发环境 + 云编译、云转译、编程语言数据库等核心要素构建的新一代软件架构模式。
98
star
66

brand

Design for Fun
Python
97
star
67

winv

A mini compatible MINA for web
CSS
91
star
68

growth-in-30-minutes

A Introduction for Growth Paper in Minutes - 真实世界的全栈工程师的十八项必备技能
91
star
69

moqi.mobi

开源移动CMS框架——墨颀移动CMS
JavaScript
86
star
70

javascript-refactor

前端工程师技能训练之重构
JavaScript
82
star
71

ascode.ink

Everything as code architecture design patten and rules。本系列文章是根据《云研发:研发即代码》一文编写的具体实现,将文档、需求、设计、代码、构建、部署、运营变成代码化。
82
star
72

phodaldev

person website
JavaScript
75
star
73

valentine

程序员情人节礼物示例, Valentine's Day Example
JavaScript
75
star
74

layer-architecture

DDD & Clean Architecture in Java, JavaScript, TypeScript, Python, Golang, Cpp
Java
70
star
75

congee

A Web Editor design for Baimizhou
JavaScript
68
star
76

stepping

Stepping - a tools for code design, event storming, domain model generate.
TypeScript
66
star
77

fed

Ebook of Frontend.《我的职业是前端工程师》姐妹篇《前端进阶指南》
HTML
61
star
78

daily

日常练习
CSS
61
star
79

moform

A Serverlesss form builder
JavaScript
58
star
80

dore

React Native-base Hybrid Framework, for migrating Cordova and WebView application to React Native.
JavaScript
55
star
81

growth-code

The Source Code of Growth Paper - 《全栈应用开发:精益实践》源码
Python
55
star
82

summary

Awesome articles, tools, OS project, design of Phodal - collections in path of Phodal's way for new geek & nerd to quick growth
51
star
83

skillwheel

A Skill List for Web Developer
CSS
51
star
84

dou2

一份面向残疾地区的,简单的无障碍上网指南
50
star
85

ionic-elasticsearch

Django ElasticSearch Ionic 打造 GIS 移动应用
JavaScript
49
star
86

awesome-practise-project

Awesome Practise Project
JavaScript
47
star
87

backbone-react

Backbone React in Practice
JavaScript
47
star
88

oan

Another Web Components Framework . A Spike of Web Components Design
TypeScript
45
star
89

mopass

A OpenSource Clientless & Serverless Password Manager
JavaScript
42
star
90

designiot-app

Internet of Things APP
JavaScript
42
star
91

django-elasticsearch

Django ElasticSearch Ionic 打造 GIS 移动应用
JavaScript
41
star
92

awesome-smart-speaker

A Awesome List for Smart Speaker(智能音箱)
41
star
93

growth-in-action-code

Growth In Action Django Code
Python
40
star
94

componentless

Componentless is a architecture pattern which is means component as a services. 无组件(Componentless)架构是一种架构模式,它是指大量依赖于三方组件(运行时依赖的组件而非编译时依赖的组件,即编译即服务)或暂存容器中运行的自定义代码的前端应用。
39
star
95

romantic

待我代码编成,娶你为妻可好
JavaScript
38
star
96

thesis

TeX
36
star
97

design

Design as Code, a DSL for UX & backend modeling. DSL to Sketch file, Sketch to DSL, DSL to code.
Go
36
star
98

designiot-code

Source Code of Design IoT
JavaScript
31
star
99

mooa-boilerplate

microfrontends framewrok mooa's boilerplate.前端微服务化框架 Mooa 脚手架示例
TypeScript
30
star
100

mest

契约测试框架。A TypeScript Contract Test for Interface base project.
TypeScript
29
star