You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

wonder.js

Package Overview
Dependencies
Maintainers
1
Versions
287
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

wonder.js

3d webgl engine

1.2.0-alpha.26
latest
Source
npmnpm
Version published
Weekly downloads
356
49.58%
Maintainers
1
Weekly downloads
 
Created
Source

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

Donate

You are welcome to donate for Wonder.js project! Thanks very much!

微信支付: 下载.png-6.5kB

Donors

日期头像金额(元)
2020.02.13liuxin2322999
2020.03.04rong2000
2020.04.29谢员外1000
2020.04.29mko_io999

Keywords

wonder

FAQs

Package last updated on 16 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts