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;varAPP={};APP.animate=function(){APP.renderer.render(APP.scene,APP.camera);APP.controls.update();requestAnimationFrame(APP.animate);
};APP.renderer=newTHREE.WebGLRenderer();APP.renderer.setSize(300,300);APP.camera=newTHREE.PerspectiveCamera();APP.camera.position.z=100;vardirectionalLight=newTHREE.DirectionalLight(0xffffff);directionalLight.position.set(1,1,1).normalize();varambientLight=newTHREE.AmbientLight(0xffffff,0.5);APP.scene=newTHREE.Scene();APP.scene.add(APP.camera);APP.scene.add(directionalLight);APP.scene.add(ambientLight);varxhr=newXMLHttpRequest();xhr.open('GET','/k/v1/file.json?fileKey='+file.fileKey);xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');xhr.responseType='blob';varbox=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(){varloader=newTHREE.STLLoader();loader.load(URL.createObjectURL(xhr.response),function(geometry){varmaterial=newTHREE.MeshLambertMaterial();varmesh=newTHREE.Mesh(geometry, material);APP.scene.add(mesh);APP.controls=newTHREE.TrackballControls(APP.camera,box.childNodes[0]);APP.animate();
});
});xhr.send();
});
});
})();
STLのほかにも、「three.js-master/examples/js/loaders/」にあるファイル形式であれば、プレビュー表示できそうです。