Skip to content
🚀Functional, High performance 3D Webgl Engine
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build/gulp_task chore(gulp): fix generatePerformanceBenchmark May 31, 2019
config feat(texture): remove basic material->map; rewrite map unit logic; Jun 17, 2019
examples example(flyCamera): add flyCamera example Jun 13, 2019
lib example(flyCamera): add flyCamera example Jun 13, 2019
server chore: change mode by chmod Jan 4, 2018
src
test Merge pull request #26 from Wonder-Technology/flyCamera Jun 17, 2019
.bumpedrc chore(bumped): remove "e2e:upgradeBaseCommitId" task May 3, 2018
.cz-config.js feat(asset-bundle): add "generate sab" logic Apr 15, 2019
.gitignore chore(gulp): add generateCorrectImage May 31, 2019
.npmignore chore(code-climate): fix duplication Nov 27, 2018
.travis.yml Revert "chore: remove code climate; add codecov for test coverage;" Feb 14, 2019
.yarnignore chore: fix npm ignore Aug 29, 2018
CHANGELOG.md chore(release): v1.1.0 May 31, 2019
LICENSE.txt fix(license): fix author and date Jan 9, 2018
README.md chore(readme): add link Mar 14, 2019
babel.config.js
bsconfig.json chore(compile): bsconfig.json add "commonjs" Jul 25, 2018
commitlint.config.js chore: fix "Permission denied" by chmod Jan 3, 2018
gulpfile.js chore(gulp): gulp->test.js->testInLocal add "yarn install" logic May 31, 2019
jest.json feat: update bs-platform to 4.0.18 Feb 27, 2019
jest_coverage.json test(coverage): increase rate May 31, 2019
package.json 1.2.0-alpha.1 Jun 14, 2019
webpack.config.js refactor(flyCameraType): change flyCameraControllerRecord->directionA… Jun 16, 2019
yarn.lock refactor(flyCameraType): change flyCameraControllerRecord->directionA… Jun 16, 2019

README.md

Wonder.js

Wonder.js is a Functional, High performance 3D WebGL Engine.

build Maintainability Test Coverage commit downloads-npm GitHub release GitHub Release Date npm

Showcases

showcase1

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

Getting Help

Support Environment

PC

  • Chrome

  • Firefox

  • 360 browser(v10.0)

  • qq browser(v10.4)

Usage

Here show a cube example(more is in examples/ folder):

<!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

sudo yarn install //execute in project root dir

for Chinese users

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

License

MIT Licence

You can’t perform that action at this time.