Web components - drawing 3d komponent

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 353 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>