Move src files

src/js/model.js

@@ -0,0 +1,146 @@
+'use strict';
+
+// generate mixer
+var mixerList = [
+    {name: 'Tricopter',        pos: 3,  model: 'tricopter',  image: 'tri'},
+    {name: 'Quad +',           pos: 2,  model: 'quad_x',     image: 'quad_p'},
+    {name: 'Quad X',           pos: 0,  model: 'quad_x',     image: 'quad_x'},
+    {name: 'Bicopter',         pos: 16, model: 'custom',     image: 'bicopter'},
+    {name: 'Gimbal',           pos: 4,  model: 'custom',     image: 'custom'},
+    {name: 'Y6',               pos: 20, model: 'y6',         image: 'y6'},
+    {name: 'Hex +',            pos: 5,  model: 'hex_plus',   image: 'hex_p'},
+    {name: 'Flying Wing',      pos: 10, model: 'custom',     image: 'flying_wing'},
+    {name: 'Y4',               pos: 19, model: 'y4',         image: 'y4'},
+    {name: 'Hex X',            pos: 6,  model: 'hex_x',      image: 'hex_x'},
+    {name: 'Octo X8',          pos: 21, model: 'custom',     image: 'octo_x8'},
+    {name: 'Octo Flat +',      pos: 8,  model: 'custom',     image: 'octo_flat_p'},
+    {name: 'Octo Flat X',      pos: 9,  model: 'custom',     image: 'octo_flat_x'},
+    {name: 'Airplane',         pos: 11, model: 'custom',     image: 'airplane'},
+    {name: 'Heli 120',         pos: 12, model: 'custom',     image: 'custom'},
+    {name: 'Heli 90',          pos: 13, model: 'custom',     image: 'custom'},
+    {name: 'V-tail Quad',      pos: 17, model: 'quad_vtail', image: 'vtail_quad'},
+    {name: 'Hex H',            pos: 7,  model: 'custom',     image: 'custom'},
+    {name: 'PPM to SERVO',     pos: 22, model: 'custom',     image: 'custom'},
+    {name: 'Dualcopter',       pos: 15, model: 'custom',     image: 'custom'},
+    {name: 'Singlecopter',     pos: 14, model: 'custom',     image: 'custom'},
+    {name: 'A-tail Quad',      pos: 18, model: 'quad_atail', image: 'atail_quad'},
+    {name: 'Custom',           pos: 23, model: 'custom',     image: 'custom'},
+    {name: 'Custom Airplane',  pos: 24, model: 'custom',     image: 'custom'},
+    {name: 'Custom Tricopter', pos: 25, model: 'custom',     image: 'custom'},
+    {name: 'Quad X 1234',      pos: 1,  model: 'quad_x',     image: 'quad_x_1234'}
+];
+
+// 3D model
+var Model = function (wrapper, canvas) {
+    var useWebGLRenderer = this.canUseWebGLRenderer();
+
+    this.wrapper = wrapper;
+    this.canvas = canvas;
+
+    if (useWebGLRenderer) {
+        this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas[0], alpha: true, antialias: true });
+    } else {
+        this.renderer = new THREE.CanvasRenderer({ canvas: this.canvas[0], alpha: true });
+    }
+
+    // initialize render size for current canvas size
+    this.renderer.setSize(this.wrapper.width() * 2, this.wrapper.height() * 2);
+
+    // load the model including materials
+    var model_file = useWebGLRenderer ? mixerList[MIXER_CONFIG.mixer - 1].model : 'fallback';
+
+    // Temporary workaround for 'custom' model until akfreak's custom model is merged.
+    if (model_file == 'custom') { model_file = 'fallback'; }
+
+    // setup scene
+    this.scene = new THREE.Scene();
+
+    // modelWrapper adds an extra axis of rotation to avoid gimbal lock with the euler angles
+    this.modelWrapper = new THREE.Object3D();
+
+    // stationary camera
+    this.camera = new THREE.PerspectiveCamera(60, this.wrapper.width() / this.wrapper.height(), 1, 10000);
+
+    // move camera away from the model
+    this.camera.position.z = 125;
+
+    // some light
+    var light = new THREE.AmbientLight(0x404040);
+    var light2 = new THREE.DirectionalLight(new THREE.Color(1, 1, 1), 1.5);
+    light2.position.set(0, 1, 0);
+
+    // add camera, model, light to the foreground scene
+    this.scene.add(light);
+    this.scene.add(light2);
+    this.scene.add(this.camera);
+    this.scene.add(this.modelWrapper);
+
+    // Load model file, add to scene and render it
+    this.loadJSON(model_file, (function (model) {
+        this.model = model;
+
+        this.modelWrapper.add(model);
+        this.scene.add(this.modelWrapper);
+
+        this.render();
+    }).bind(this));
+};
+
+Model.prototype.loadJSON = function (model_file, callback) {
+    var loader = new THREE.JSONLoader();
+
+    loader.load('./resources/models/' + model_file + '.json', function (geometry, materials) {
+        var modelMaterial = new THREE.MeshFaceMaterial(materials),
+            model         = new THREE.Mesh(geometry, modelMaterial);
+
+        model.scale.set(15, 15, 15);
+
+        callback(model);
+    });
+};
+
+Model.prototype.canUseWebGLRenderer = function () {
+    // webgl capability detector
+    // it would seem the webgl "enabling" through advanced settings will be ignored in the future
+    // and webgl will be supported if gpu supports it by default (canary 40.0.2175.0), keep an eye on this one
+    var detector_canvas = document.createElement('canvas');
+
+    return window.WebGLRenderingContext && (detector_canvas.getContext('webgl') || detector_canvas.getContext('experimental-webgl'));
+};
+
+Model.prototype.rotateTo = function (x, y, z) {
+    if (!this.model) { return; }
+
+    this.model.rotation.x = x;
+    this.modelWrapper.rotation.y = y;
+    this.model.rotation.z = z;
+
+    this.render();
+};
+
+Model.prototype.rotateBy = function (x, y, z) {
+    if (!this.model) { return; }
+
+    this.model.rotateX(x);
+    this.model.rotateY(y);
+    this.model.rotateZ(z);
+
+    this.render();
+};
+
+Model.prototype.render = function () {
+    if (!this.model) { return; }
+
+    // draw
+    this.renderer.render(this.scene, this.camera);
+};
+
+// handle canvas resize
+Model.prototype.resize = function () {
+    this.renderer.setSize(this.wrapper.width() * 2, this.wrapper.height() * 2);
+
+    this.camera.aspect = this.wrapper.width() / this.wrapper.height();
+    this.camera.updateProjectionMatrix();
+
+    this.render();
+};