cesiumでgltf

概要

cesiumでgltfを表示してみた。

写真

サンプルコード

var viewer = new Cesium.Viewer('cesiumContainer', {
});                               

var box0 = {
    "asset": {
        "generator": "COLLADA2GLTF",
        "version": "2.0"
    },
    "scene": 0,
    "scenes": [{
        "nodes": [0]
    }],
    "nodes": [{
        "children": [1],
        "matrix": [1.0, 0.0, 0.0, 0.0, 0.0, 0.0, -1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0]
    }, {
        "mesh": 0
    }],
    "meshes": [{
        "primitives": [{
            "attributes": {
                "NORMAL": 1,
                "POSITION": 2
             },
             "indices": 0,
             "mode": 4,
             "material": 0
         }],
         "name": "Mesh"
    }],
    "accessors": [{
         "bufferView": 0,
         "byteOffset": 0,
         "componentType": 5123,
         "count": 36,
         "max": [23],
         "min": [0],
         "type": "SCALAR"
    }, {
         "bufferView": 1,
         "byteOffset": 0,
         "componentType": 5126,
         "count": 24,
         "max": [1.0, 1.0, 1.0],
         "min": [-1.0, -1.0, -1.0],
         "type": "VEC3"
    }, {
         "bufferView": 1,
         "byteOffset": 288,
         "componentType": 5126,
         "count": 24,
         "max": [0.5, 0.5, 0.5],
         "min": [-0.5, -0.5, -0.5],
         "type": "VEC3"
    }],
    "materials": [{
         "pbrMetallicRoughness": {
             "baseColorFactor": [0.800000011920929, 0.0, 0.0, 1.0],
             "metallicFactor": 0.0
         },
         "name": "Red"
    }],
    "bufferViews": [{
         "buffer": 0,
         "byteOffset": 576,
         "byteLength": 72,
         "target": 34963
    }, {
         "buffer": 0,
         "byteOffset": 0,
         "byteLength": 576,
         "byteStride": 12,
         "target": 34962
    }],
    "buffers": [{
         "byteLength": 648,
         "uri": "http://jsrun.it/assets/k/4/P/h/k4Phi"
    }]
};
var json = JSON.stringify(box0); 
var url = URL.createObjectURL(new Blob([json]));
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(140.0, 38.0, 100000.0),
});
var scene = viewer.scene;
var origin = Cesium.Cartesian3.fromDegrees(140.0, 38.0, 10000.0);
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
var model = scene.primitives.add(Cesium.Model.fromGltf({
    url: url,
    modelMatrix: modelMatrix,
    scale: 200.0,
    minimumPixelSize: 128,
}));

成果物

以上。