新規投稿
フォローする

3Dファイル(STL)をプレビュー表示

3DファイルであるSTLファイルを、kintone上でプレビュー表示してみました。

サンプル

添付ファイルフィールドに保存されたSTLファイルを、レコード詳細画面でプレビュー表示します。

フォーム設定

コード

「three.min.js」、「STLLoader.js」、「TrackballControls.js」を読み込み後、下記「sample.js」を読み込みます。

「three.min.js」、「STLLoader.js」、「TrackballControls.js」はいずれも、https://github.com/mrdoob/three.js/archive/master.zipから入手できます。
zipファイルを解凍し、下記を入手します。
・three.js-master/build/three.min.js
・three.js-master/examples/js/loaders/STLLoader.js
・three.js-master/examples/js/controls/TrackballControls.js

・sample.js

(function () {
  "use strict";
  kintone.events.on([
    'app.record.detail.show',
    'mobile.app.record.detail.show',
  ], function(event){
    event.record.添付ファイル.value.forEach(function(file){
      if(file.name.split(".").pop().toLowerCase() !== 'stl') return;
      var APP = {};
      APP.animate = function(){
        APP.renderer.render(APP.scene, APP.camera);
        APP.controls.update();
        requestAnimationFrame(APP.animate);
      };
      APP.renderer = new THREE.WebGLRenderer();
      APP.renderer.setSize(300, 300);
      APP.camera = new THREE.PerspectiveCamera();
      APP.camera.position.z = 100;
      var directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(1, 1, 1).normalize();
      var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      APP.scene = new THREE.Scene();
      APP.scene.add(APP.camera);
      APP.scene.add(directionalLight);
      APP.scene.add(ambientLight);
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '/k/v1/file.json?fileKey=' + file.fileKey);
      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      xhr.responseType = 'blob';
      var box = document.createElement('div');
      box.style.textAlign = 'center';
      (event.type === 'app.record.detail.show' ? kintone : kintone.mobile).app.record.getSpaceElement('space').appendChild(box);
      box.appendChild(APP.renderer.domElement);
      xhr.addEventListener('load', function(){
        var loader = new THREE.STLLoader();
        loader.load(URL.createObjectURL(xhr.response), function(geometry){
          var material = new THREE.MeshLambertMaterial();
          var mesh = new THREE.Mesh(geometry, material);
          APP.scene.add(mesh);
          APP.controls = new THREE.TrackballControls(APP.camera, box.childNodes[0]);
          APP.animate();
        });
      });
      xhr.send();
    });
  });
})();

※コード参考: http://navi-local.com/article/%E3%82%B5%E3%82%A4%E3%83%88%E4%B8%8A%E3%81%ABstl%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%93%E3%81%A7%E3%80%813d%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E8%A1%A8/

STLのほかにも、「three.js-master/examples/js/loaders/」にあるファイル形式であれば、プレビュー表示できそうです。

0

1件のコメント

Avatar
YangYe

これをご共有いただき、ありがとうございます。 この 3D ファイルを kintone でプレビューしようとしましたが、これまで失敗しました。

0
サインインしてコメントを残してください。