wonder.js
Version:
228 lines (126 loc) • 6.77 kB
Markdown
# Wonder.js
Wonder.js is a Functional, High performance 3D WebGL Engine.
[](https://travis-ci.org/Wonder-Technology/Wonder.js?branch%3Dmaster) [](https://codeclimate.com/github/Wonder-Technology/Wonder.js/maintainability) [](https://codeclimate.com/github/Wonder-Technology/Wonder.js/test_coverage) [](http://commitizen.github.io/cz-cli/) [](https://www.npmjs.com/package/wonder.js) [](https://github.com/Wonder-Technology/Wonder.js/releases) [](https://github.com/Wonder-Technology/Wonder.js/releases) [](https://github.com/Wonder-Technology/Wonder.js)
# Showcases
[ ](https://www.wonder-3d.com/docs/showcase1/publish/showcase_publish_noWorker/index.html)
# Design
- Functional Programming
- Functional Reactive Programming
- Microservice
- Job Pipeline
- Multi-Thread
- Data Oriented Design
- Data Driven
- ECS
# Feature
- GameObject And Component
- Multi-thread Render
- Texture
- Direction,Point Light
- Model and Scene
- Stream Load
- IMGUI
- Event
- Instance
# Document
- [Document](https://www.wonder-3d.com/docs/docs/doc1-1/)
# Getting Help
- [Official Site](https://www.wonder-3d.com/)
- [Forum](https://forum.wonder-3d.com/)
## Support Environment
### PC
- Chrome
- Firefox
- 360 browser(v10.0)
- qq browser(v10.4)
# Usage
- [Online Editor](https://editor.wonder-3d.com/)
Here show a cube example(more is in examples/ folder):
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cube</title>
</head>
<body>
<script src="https://wonder-technology.github.io/wonder-demo.github.io/examples/wd.js"></script>
<script>
window.onload = function () {
return wd.loadConfig(["https://wonder-technology.github.io/wonder-demo.github.io/examples/config/setting.json", "https://wonder-technology.github.io/wonder-demo.github.io/examples/config/"]).forEach(function (state) {
return initSample(wd.unsafeGetState());
})
function _createBox(state) {
var [state, material] = wd.createLightMaterial(state);
var state = wd.setLightMaterialDiffuseColor(material, [0.0, 0.5, 0.2], state);
var state = wd.setLightMaterialSpecularColor(material, [0.3, 0.1, 0.6], state);
var [state, meshRenderer] = wd.createMeshRenderer(state);
var [state, gameObject] = wd.createGameObject(state);
var state = wd.addGameObjectLightMaterialComponent(gameObject, material, state);
var state = wd.addGameObjectMeshRendererComponent(gameObject, meshRenderer, state);
var [state, geometry] = wd.createBoxGeometry(state);
var state = wd.addGameObjectGeometryComponent(gameObject, geometry, state);
return [state, gameObject];
};
function _createCamera(state) {
var [state, basicCameraView] = wd.createBasicCameraView(state);
var state =
wd.activeBasicCameraView(
basicCameraView, state
);
var [state, perspectiveCameraProjection] = wd.createPerspectiveCameraProjection(state);
var state = wd.setPerspectiveCameraProjectionNear(perspectiveCameraProjection, 0.1, state);
var state = wd.setPerspectiveCameraProjectionFar(perspectiveCameraProjection, 2000, state);
var state = wd.setPerspectiveCameraProjectionFovy(perspectiveCameraProjection, 60, state);
var [state, gameObject] = wd.createGameObject(state);
var state = wd.addGameObjectBasicCameraViewComponent(gameObject, basicCameraView, state);
var state = wd.addGameObjectPerspectiveCameraProjectionComponent(gameObject, perspectiveCameraProjection, state);
var transform = wd.unsafeGetGameObjectTransformComponent(gameObject, state);
var state = wd.setTransformLocalPosition(transform, [0, 10, 50], state);
return [state, gameObject];
};
function _createDirectionLight(state) {
var [state, light] = wd.createDirectionLight(state);
var state = wd.setDirectionLightColor(light, [1.0, 0.0, 0.0], state);
var [state, gameObject] = wd.createGameObject(state);
var transform = wd.unsafeGetGameObjectTransformComponent(gameObject, state);
var state = wd.setTransformLocalEulerAngles(transform, [0, 180, 0], state);
var state = wd.addGameObjectDirectionLightComponent(gameObject, light, state);
return [state, gameObject];
};
function initSample(state) {
var [state, box] = _createBox(state);
var state = wd.setAmbientLightColor([0.2, 0.2, 0.2], state);
var [state, directionLightGameObject] = _createDirectionLight(state);
var [state, cameraGameObject] = _createCamera(state);
wd.startDirector(state);
}
};
</script>
</body>
</html>
```
# How to build
```js
sudo yarn install //execute in project root dir
```
## for Chinese users
```js
npm install -g cyarn --registry=https://registry.npm.taobao.org
npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
cyarn install //execute in project root dir
```
- [Reason的介绍和搭建Reason开发环境](https://www.cnblogs.com/chaogex/p/10528737.html)
# License
MIT Licence
# Donate
You are welcome to donate for Wonder.js project! Thanks very much!
微信支付：
## Donors
| 日期 | 头像 | 金额（元） |
| ---- | ---- | ---- |
| 2020.02.13 | [](https://github.com/liuxin2322) | 999 |
| 2020.03.04 |  | 2000 |
| 2020.04.29 |  | 1000 |
| 2020.04.29 | [](https://github.com/mko-io) | 999 |