Stronę tą wyświetlono już: 454 razy
Pobieranie modelu z API
Nadszedł najwyższy czas aby utworzyć nowy komponent, który pozwoli na rysowanie prostych obiektów 3W na stronie z możliwością ich obracania, powiększania i co tam jeszcze komu nie przyjdzie do głowy. Coby nie przydłużać zbyt długo poniżej prosty przykład ładowania definicji obiektu i sceny z API:
<obl-draw-3d resource="Żelazo alfa"></obl-draw-3d>
Wynikiem czego będzie wyświetlenie:
Definicja sceny i obiektów w niej zawartych zamyka się w następującym zapisie w formacie JSON:
{
"settings": {
"animate": true,
"camera": { "size": { "width": 400, "height": 400 } },
"orbiter": { "rotate": true, "pan": false, "zoom": false },
"scene": { "rotate": { "x": 30, "y": 30, "z": 0 }, "background": "#e0ecf0" }
},
"geometriesDef": [
{
"name": "Sphere 1",
"color": "#666666",
"point": { "x": 1, "y": 1, "z": 1 },
"type": "sphere",
"radialSegments": 32,
"heightSegments": 16,
"radius": 0.5
},
{
"name": "Sphere 2",
"color": "#666666",
"point": { "x": 1, "y": 1, "z": -1 },
"type": "sphere",
"radialSegments": 32,
"heightSegments": 16,
"radius": 0.5
},
{
"name": "Sphere 3",
"color": "#666666",
"point": { "x": 1, "y": -1, "z": -1 },
"type": "sphere",
"radialSegments": 32,
"heightSegments": 16,
"radius": 0.5
},
{
"name": "Sphere 4",
"color": "#666666",
"point": { "x": -1, "y": -1, "z": -1 },
"type": "sphere",
"radialSegments": 32,
"heightSegments": 16,
"radius": 0.5
},
{
"name": "Sphere 5",
"color": "#666666",
"point": { "x": 1, "y": -1, "z": 1 },
"type": "sphere",
"radialSegments": 32,
"heightSegments": 16,
"radius": 0.5
},
{
"name": "Sphere 6",
"color": "#666666",
"point": { "x": -1, "y": 1, "z": 1 },
"type": "sphere",
"radialSegments": 32,
"heightSegments": 16,
"radius": 0.5
},
{
"name": "Sphere 7",
"color": "#666666",
"point": { "x": -1, "y": 1, "z": -1 },
"type": "sphere",
"radialSegments": 32,
"heightSegments": 16,
"radius": 0.5
},
{
"name": "Sphere 8",
"color": "#666666",
"point": { "x": -1, "y": -1, "z": 1 },
"type": "sphere",
"radialSegments": 32,
"heightSegments": 16,
"radius": 0.5
},
{
"name": "Sphere 9",
"color": "#666666",
"point": { "x": 0, "y": 0, "z": 0 },
"type": "sphere",
"radialSegments": 32,
"heightSegments": 16,
"radius": 0.5
},
{
"name": "Cylinder 1",
"color": "#ff0000",
"point": { "x": -1, "y": -1, "z": -1 },
"end": { "x": 1, "y": 1, "z": 1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 2",
"color": "#ff0000",
"point": { "x": 1, "y": 1, "z": -1 },
"end": { "x": -1, "y": -1, "z": 1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 3",
"color": "#ffffff",
"point": { "x": 1, "y": 1, "z": 1 },
"end": { "x": -1, "y": 1, "z": 1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 4",
"color": "#ffffff",
"point": { "x": 1, "y": -1, "z": -1 },
"end": { "x": -1, "y": -1, "z": -1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 4",
"color": "#ffffff",
"point": { "x": 1, "y": 1, "z": -1 },
"end": { "x": -1, "y": 1, "z": -1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 4",
"color": "#ffffff",
"point": { "x": 1, "y": -1, "z": 1 },
"end": { "x": -1, "y": -1, "z": 1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 5",
"color": "#ffffff",
"point": { "x": 1, "y": 1, "z": -1 },
"end": { "x": 1, "y": -1, "z": -1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 6",
"color": "#ffffff",
"point": { "x": -1, "y": 1, "z": -1 },
"end": { "x": -1, "y": -1, "z": -1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 7",
"color": "#ffffff",
"point": { "x": -1, "y": 1, "z": 1 },
"end": { "x": -1, "y": -1, "z": 1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 8",
"color": "#ffffff",
"point": { "x": 1, "y": 1, "z": 1 },
"end": { "x": 1, "y": -1, "z": 1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 9",
"color": "#ffffff",
"point": { "x": 1, "y": 1, "z": 1 },
"end": { "x": 1, "y": 1, "z": -1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 10",
"color": "#ffffff",
"point": { "x": 1, "y": -1, "z": 1 },
"end": { "x": 1, "y": -1, "z": -1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 11",
"color": "#ffffff",
"point": { "x": -1, "y": 1, "z": 1 },
"end": { "x": -1, "y": 1, "z": -1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 12",
"color": "#ffffff",
"point": { "x": -1, "y": -1, "z": 1 },
"end": { "x": -1, "y": -1, "z": -1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 13",
"color": "#ff0000",
"point": { "x": 1, "y": -1, "z": 1 },
"end": { "x": -1, "y": 1, "z": -1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "Cylinder 14",
"color": "#ff0000",
"point": { "x": 1, "y": -1, "z": -1 },
"end": { "x": -1, "y": 1, "z": 1 },
"type": "cylinder",
"radiusTop": 0.05,
"radiusBottom": 0.05,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true
},
{
"name": "DirectionalLight 1",
"color": "#ffffff",
"point": { "x": 1, "y": 1, "z": 1 },
"type": "light",
"lightType": "directional",
"strength": 1
},
{
"name": "AmbientLight 1",
"color": "#666666",
"point": { "x": 1, "y": 1, "z": 1 },
"type": "light",
"lightType": "ambient"
}
]
}
Taki zasób można z poziomu kodu wrzucić np tak:
const obj = document.createElement('obl-draw-3d');
document.body.appendChild(obj);
obj.geometriesDef = myJson.geometriesDef;
obj.settings = myJson.settings;
gdzie myJson to oczywiście obiekt zawierający powyższą definicję.
Rysowanie złożonego kształtu z walców i sfer:
<obl-draw-3d
settings='{ "animate": false, "camera": { "position": { "x": 10, "y": 0, "z": 0 }, "lookAt": { "x": 0, "y": 0, "z": 0 }, "size": {"width": 800, "height": 600}}, "orbiter": { "rotate": true, "pan": true, "zoom": true }, "scene": { "rotate": { "x": 30, "y": 30, "z": 0 }, "background": "#e0ecf0" } }'
geometries-def='[
{
"name": "Pipe 1",
"color": "#aabbcc",
"type": "pipes",
"points": [
{ "x": 0, "y": 0, "z": 0 },
{ "x": 2, "y": 0, "z": 0 },
{ "x": 2, "y": 2, "z": 0 },
{ "x": 2, "y": 2, "z": 2 },
{ "x": 2, "y": 0, "z": 2 },
{ "x": 0, "y": 0, "z": 2 },
{ "x": 0, "y": 0, "z": 3 },
{ "x": 1, "y": 2, "z": 4 },
{ "x": 2, "y": 0, "z": 3 },
],
"radiusTop": 0.5,
"radiusBottom": 0.5,
"radialSegments": 32,
"heightSegments": 2,
"openEnded": true,
"point": { "x": 1, "y": 1, "z": 1 }
},
{
"name": "DirectionalLight 1",
"color": "#ffffff",
"point": { "x": 1, "y": 1, "z": 1 },
"type": "light",
"lightType": "directional",
"strength": 1
},
{
"name": "AmbientLight 1",
"color": "#666666",
"point": { "x": 1, "y": 1, "z": 1 },
"type": "light",
"lightType": "ambient"
}]'
></obl-draw-3d>
Animacja sprężyny
<obl-draw-3d
settings='{ "animate": false, "camera": { "position": { "x": 20, "y": 0, "z": "0" }, "lookAt": { "x": 0, "y": 0, "z": 0 }, "size": {"width": 800, "height": 600}}, "orbiter": { "rotate": true, "pan": true, "zoom": true }, "scene": { "rotate": { "x": 30, "y": 30, "z": 0 }, "background": "#e0ecf0" } }'
geometries-def='[
{
"type": "animated-spring",
"name": "animated spring",
"point": { "x": 0, "y": 0, "z": 0 },
"color": "#ff0000",
"radius": 0.5,
"ray": 5,
"height": 10,
"rounds": 5,
"tubularSegments": 100,
"radialSegments": 20,
"closed": false
},
{
"name": "DirectionalLight 1",
"color": "#ffffff",
"point": { "x": 1, "y": 1, "z": 1 },
"type": "light",
"lightType": "directional",
"strength": 1
},
{
"name": "AmbientLight 1",
"color": "#666666",
"point": { "x": 1, "y": 1, "z": 1 },
"type": "light",
"lightType": "ambient"
}]'
></obl-draw-3d>