3drudder-js 中文文档教程

Question

Browsers	HTTP/WS	HTTPS/WSS	File://
Chrome	✔	✔	✔
FireFox	✔	✔	✔
Edge	✔	✔	:x:
Safari	✔	✔	:warning:

3dRudderjs v2.0.7

Installation

• Node npm install 3drudder-js

API Documentation on Wiki

Usage

Node.js

var Sdk3dRudder = require('3drudder-js');
// default options {host: "127.51.100.82", port: 15698, schemeWs: "wss", autoReconnect: true, autoReconnectInterval: 500 /*ms*/};
var SDK = new Sdk3dRudder(); 
or
// with options
var opts = {host: "127.0.0.0", port: 1234, schemeWs: "ws", autoReconnect: false, autoReconnectInterval: 1000 /*1 sec*/};
var SDK = new Sdk3dRudder(opts);

SDK.init();
var rudder = SDK.controllers[0];
// if you want to custom the behaviour of 3dRudder
/* by default {roll2YawCompensation: 0.0, nonSymmetricalPitch: true,
    curves: {
        leftright: {deadzone: 0.15, xSat: 1.0, exp: 1.0},
        forwardbackward: {deadzone: 0.15, xSat: 1.0, exp: 1.0},                    
        updown: {deadzone: 0.15, xSat: 1.0, exp: 1.0},
        rotation: {deadzone: 0.15, xSat: 1.0, exp: 1.0}
    }
}*/

controller.setAxesParam({
    roll2YawCompensation: 0.15,
    nonSymmetricalPitch: false,
    curves: {
        leftright: {deadzone: 0.15, xSat: 1.0, exp: 2.0},
        forwardbackward: {deadzone: 0.15, xSat: 1.0, exp: 2.0},                    
        updown: {deadzone: 0.15, xSat: 1.0, exp: 2.0},
        rotation: {deadzone: 0.15, xSat: 1.0, exp: 1.0}
    }
});
var x = rudder.axis.leftright;
...

Browser

包含在 html 页面

var SDK = new Sdk3dRudder();
SDK.init();
var rudder = SDK.controllers[0];
var x = rudder.axis.leftright;
...

Use the discovery

var SDK = new Sdk3dRudder({"schemeWs": "ws", "discovery": true});
SDK.startDiscovery();
SDK.on('discovery', function(urls) {    
    if (urls.length > 0) {
        for(i in urls) {
            console.log(`${decodeURIComponent(escape(urls[i].name))} [${urls[i].ip }]`);
        }
        // select your url
        SDK.init(urls[selected ID].ip);
    } else {
        console.log("servers not found");
    }    
});

See examples

• Axis
• WebGL (three.js)
• WebVR (A-Frame)
• WebGL/WebVR (BabylonJS)
• Youtube
• Poly
• Google Maps rotation experimental
• Sketchfab Viewer orbit mode
• npm run-script sample to see in local:
• Axis: http://localhost:3000/
• WebGL: http://localhost:3000/webgl/
• Youtube: http://localhost:3000/video/
• Maps: http://localhost:3000/maps/
• Google Poly: http://localhost:3000/poly or http://localhost:3000/poly?t=ID (ID of poly model)
• Sketchfab: http://localhost:3000/sketchfab or http://localhost:3000/sketchfab?t=ID (ID of sketchfab model)

Build for browser

• npm install --save-optional bufferutil (optionnal)
• npm install browserify -g -g is for global install
• npm install grunt-cli -g
• npm run build
• Result in dist/3dRudder-x.x.x.js

Unit Test

• Command npm test

TODO features

• add http request for the function