based upon
with references including
xxxxxxxxxx<meta charset="utf-8"><title>animas</title><head > <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } div#fps,svg { position: fixed; top:0; left:0; color: white; } </style></head><body style="cursor:crosshair"></body><div id="viewframe" class="viewframe"></div><script src='https://d3js.org/d3.v4.min.js'></script><script src='https://d3js.org/d3-geo.v1.min.js'></script><script src='https://d3js.org/d3-geo-projection.v2.min.js'></script><script src='https:////unpkg.com/d3-force-3d@1.0.7/build/d3-force-3d.bundle.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.min.js'></script><script src='https:////cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js'></script><script src='https:////unpkg.com/three-trackballcontrols-web@0.0.2/dist/three-trackballcontrols.min.js'></script><script src="enls.js"></script><script src="ents.js"></script><script>let muonAlima = function muonAlima(__mapper) { __mapper({"xs": xs.xs(__mapper)}) // PROXIES __mapper("xs").b("init")({svg:1,versor:0,wen:1,webgl:1}) let f = __mapper({"props": bosonProps.bosonProps()}).props() let g = __mapper("xs").m("geom") let w = __mapper("xs").m("wen") /********************** * @ */ let r = __mapper("xs").r("renderer"), width = r.width(), height = r.height() let rotInit = [0,45,0], rotation = [0,0,0], rotMatrix, stars = [] let versor = __mapper("xs").b("versor")() let wen = __mapper("xs").c("wen")({rotInit}) /******************************************* * @animas * */ let tim = {"td":19800,"t0":0,"t1":1000,"t2":1,"t3":1,} let aniCube = { "tim": tim, "ric": {"gid":"aniCube","cid":"aniCube","fid":"aniCube",}, "halo": "geojson", "boform":{ "csx":0,"cf":111,"cs":111,"cw":0.1,"co":0.9,"cp":0.9,}, "geoform": (p) => { let payload = p.payload let ric = p.ric let json = {type: "FeatureCollection", features: []} let vertices = payload.vertices // payload.vertices let faces = payload.faces // payload.faces for (let i = 0, l = faces.length; i < l; i++) { let face = faces[i] // face corners position let geometry = {type:"Polygon",coordinates:[]} geometry.coordinates = Array.of(face.corners.map(k=>vertices[k])) // eg [-1, 1, 1] let feature = {type:"Feature",geometry:{},properties:{}} feature.properties.ric = ric feature.properties.ric.cid = "face" feature.properties.ric.fid = i // face.name feature.properties.sort = "feature" feature.geometry = geometry feature.properties.boform = face.boform json.features.push(feature) } return json }, "proform": { "projection": "uniwen", "translate": [ 280 , 200], "scale": 60, "rotate": [ [[[-5,-60]]] ,[[[50,200]]],0], "focale": 4, "zafin": [ [[[0,0,1,1,1,0]]], [[[0,0,1,1,1,0]]] ], // [0,1], // [1,0] "dims": 3, "control": "wen", }, "payload": { vertices: [ [-1, -1, 1], // 0 [ 1, -1, 1], // 1 [ 1, 1, 1], // 2 [-1, 1, 1], // 3 [ 1, -1, -1], // 4 [-1, -1, -1], // 5 [-1, 1, -1], // 6 [ 1, 1, -1], // 7 ], faces: [ { corners: [0,1,2,3,0], name: "front", boform: { cf: 222, cs: 355, co: [[[0.2,0.09,0.9,0.2]]], cp: 1, }}, { corners: [4,5,6,7,4], name: "back", boform: { cf: 888, cs: 455, co: [[[0.2,0.09,0.9,0.2]]], cp: 1, }}, { corners: [1,4,7,2,1], name: "right", boform: { cf: 444, cs: 555, co: [[[0.2,0.09,0.9,0.2]]], cp: 1, }}, { corners: [5,0,3,6,5], name: "left", boform: { cf: 555, cs: 655, co: [[[0.2,0.09,0.9,0.2]]], cp: 1, }}, { corners: [3,2,7,6,3], name: "bottom", boform: { cf: 666, cs: 755, co: [[[0.2,0.09,0.9,0.2]]], cp: 1, }}, { corners: [5,4,1,0,5], name: "top", boform: { cf: 777, cs: 855, co: [[[0.2,0.09,0.9,0.2]]], cp: 1, }} ], } } // ------------------------------- img let img = { "tim": tim, "ric": {"gid":"img","cid":"img","fid":"img",}, "halo":"img", "boform": { "csx":0,"cf":[[[22,22]]],"cs":22,"cw":[[[0.7,0.7]]],"co":[[[0.7,0.7,]]],"cp":[[[0.5,0.5]]],}, "geoform": p => ({ type: "Feature", geometry: { "type": "Point", "coordinates": [0, 0] }, properties: { attr: { "width": p.payload.img.width, "height": p.payload.img.height, ["xlink:href"]: p.payload.img.url, } } }), "stace": { "x": [[[15, 15]]], "y": [[[20, 20]]], }, "payload": { "img": { "url":"ZIMG-501.jpg", "width": [[[60, 60]]], "height": [[[40 , 40]]], }, } } /******************************************* * @animas * */ let animas = [ aniCube, // h.geojson g.uniwen img, // h.img ] let animaApi = function animaApi() { __mapper("xs").m("store").apply({"type":"UPDANIMA","caller":"alima","animas":animas}) } return animaApi}let __mapper = bosonMapper.bosonMapper()__mapper({"muonAlima": muonAlima(__mapper)}).muonAlima(__mapper)</script><body style="cursor:crosshair"></body> https://d3js.org/d3.v4.min.js
https://d3js.org/d3-geo.v1.min.js
https://d3js.org/d3-geo-projection.v2.min.js
https:////unpkg.com/d3-force-3d@1.0.7/build/d3-force-3d.bundle.min.js
https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.min.js
https:////cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js
https:////unpkg.com/three-trackballcontrols-web@0.0.2/dist/three-trackballcontrols.min.js