3mod

by Halit Yurttas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.2.0/css/adminlte.min.css">
<script src="https://aframe.io/releases/1.4.1/aframe.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mindar-image-aframe.prod.js" crossorigin="anonymous"></script>
<script src="https://ardemo.rhpozitif.net/nv/assets/dist/aframe-chromakey-material.min.js"></script>
<div id="app" class="container-fluid">
  <div class="row">
    <div class="col-4">
      deneme
    </div>
    <div class="col-8">
      <!-- ko foreach: $root.items -->
      <div class="card">
        <div class="card-body">
          <div class="form-group row">
            <label class="col-form-label col-form-label-sm col-3">Model Type</label>
            <div class="col-9">
              <select class="form-control form-control-sm">
                <option value="video">Video</option>
                <option value="gldb">3D Object</option>
                <option value="image">Image</option>
              </select>
            </div>
          </div>

          <div class="form-group row">
            <label class="col-form-label col-form-label-sm col-3">File</label>
            <div class="col-9">
              <select class="form-control form-control-sm" data-bind="value: fileid, options: $root.files, optionsText: 'name', optionsValue: 'id'">
              </select>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-form-label-sm col-3">Material</label>
            <div class="col-9">
              <input type="text" class="form-control form-control-sm" data-bind="value: material">
            </div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-form-label-sm col-3">Scale</label>
            <div...

JavaScript

var SceneApp = function(files) {
    var self = this;
    self.items = ko.observableArray([]);
    self.itemModel = {
        modelType: "",
        fileid: "",
        material: "shader: chromakey; color: 0.1 0.9 0.2",
        scale: "1 1 1",
        position: "0 0 -25",
        width: "9",
        height: "16",
    };
    self.files = files;
    self.getFile = function(id) {
    	return self.files.filter(m => m.id == id)[0].url;
    }
};

window.sceneApp = new SceneApp([{id: 1, name: "video1", url: "https://avene.b-cdn.net/nv/assets/files/uzman2.mp4" }]);
ko.applyBindings(window.sceneApp);
window.sceneApp.items.push(ko.mapping.fromJS(Object.assign({}, window.sceneApp.itemModel)));