wonder.js
Advanced tools
Wonder.js is a Functional, High performance 3D WebGL Engine.
Chrome
Firefox
360 browser(v10.0)
qq browser(v10.4)
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>
sudo yarn install //execute in project root dir
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
MIT Licence
You are welcome to donate for Wonder.js project! Thanks very much!
微信支付：
| 日期 | 头像 | 金额（元） |
|---|---|---|
| 2020.02.13 |  | 999 |
| 2020.03.04 |  | 2000 |
| 2020.04.29 |  | 1000 |
| 2020.04.29 |  | 999 |
FAQs
3d webgl engine
The npm package wonder.js receives a total of 356 weekly downloads. As such, wonder.js popularity was classified as not popular.
We found that wonder.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Popular npm packages like eslint-config-prettier were compromised after a phishing attack stole a maintainer’s token, spreading malicious updates.
Security News
/Research
A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.
Security News
Knip hits 500 releases with v5.62.0, refining TypeScript config detection and updating plugins as monthly npm downloads approach 12M.