{"id":342,"date":"2019-01-09T14:01:15","date_gmt":"2019-01-09T14:01:15","guid":{"rendered":"http:\/\/themes.wip-themes.com\/aiteko\/?post_type=portfolio&#038;p=342"},"modified":"2021-08-18T16:28:45","modified_gmt":"2021-08-18T16:28:45","slug":"celonic-ag-3d","status":"publish","type":"portfolio","link":"https:\/\/team4design.com\/de\/portfolio\/celonic-ag-3d\/","title":{"rendered":"Celonic AG"},"content":{"rendered":"<h3>Das Ziel<\/h3>\n<p>Die Herausforderung unseres Teams bestand darin, einen 3D-Ball zu kreieren, der sich um sich selbst dreht und 360\u00b0 mit der Funktion des \u00d6ffnens beim Anklicken hat.<\/p>\n<p>https:\/\/team4design.com\/wp-content\/uploads\/2019\/02\/Celonic-3D-Animation-Le-challenge.mp4<br \/>\n\t\t\t\t<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"7dd37f2\" data-elementor-lightbox-title=\"celonic_3\" href=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_3-1.jpg\"><\/p>\n<figure><img src=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_3-1-1024x518.jpg\" alt=\"celonic_3\" \/><\/figure>\n<p><\/a><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"7dd37f2\" data-elementor-lightbox-title=\"celonic_4\" href=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_4-1.jpg\"><\/p>\n<figure><img src=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_4-1-1024x518.jpg\" alt=\"celonic_4\" \/><\/figure>\n<p><\/a><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"7dd37f2\" data-elementor-lightbox-title=\"celonic_5\" href=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_5-1.jpg\"><\/p>\n<figure><img src=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_5-1-1024x518.jpg\" alt=\"celonic_5\" \/><\/figure>\n<p><\/a><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"7dd37f2\" data-elementor-lightbox-title=\"celonic_6\" href=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_6-1.jpg\"><\/p>\n<figure><img src=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_6-1-1024x518.jpg\" alt=\"celonic_6\" \/><\/figure>\n<p><\/a><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"7dd37f2\" data-elementor-lightbox-title=\"celonic_7\" href=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_7-1.jpg\"><\/p>\n<figure><img src=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_7-1-1024x518.jpg\" alt=\"celonic_7\" \/><\/figure>\n<p><\/a><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"7dd37f2\" data-elementor-lightbox-title=\"celonic_8\" href=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_8-1.jpg\"><\/p>\n<figure><img src=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_8-1-1024x518.jpg\" alt=\"celonic_8\" \/><\/figure>\n<p><\/a><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"7dd37f2\" data-elementor-lightbox-title=\"celonic_9\" href=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_9-1.jpg\"><\/p>\n<figure><img src=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_9-1-1024x518.jpg\" alt=\"celonic_9\" \/><\/figure>\n<p><\/a><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"7dd37f2\" data-elementor-lightbox-title=\"celonic_10\" href=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_10-1.jpg\"><\/p>\n<figure><img src=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_10-1-1024x518.jpg\" alt=\"celonic_10\" \/><\/figure>\n<p><\/a><br \/>\n\t\t\t\t\t\tPr\u00e9c\u00e9dent<br \/>\n\t\t\t\t\t\tSuivant<\/p>\n<h3>Das Konzept<\/h3>\n<p>Die Sph\u00e4re-Elemente sind in 3D gebaut, w\u00e4hrend das Styling der Website mit dem ber\u00fchmten Bootstrap-Framework gesichert und das Ganze auf Three.js gebaut ist, was ein JavaScript-3D-Bibliothekshelfer f\u00fcr WebGL ist. Damit waren wir in der Lage die 3D in den Browser zu bringen. Die Website ist mehrstufig mit verschiedenen Kategorien f\u00fcr jedes F\u00fcnfeck \/ Sechseck der Sph\u00e4re, und jede Kategorie hat eine eigene Unterkategorie mit verschiedenen Details und Beschreibungen f\u00fcr jeden Prozess. Die Website hat auch eine Schalttafel f\u00fcr eine leichtere Verwaltung im Hintergrund, das auf laravel Framework gebaut ist.<\/p>\n<ul>\n<li>\n\t\t\t\t\t\t\t\t\t\tTyp : 3D Website\n\t\t\t\t\t\t\t\t\t<\/li>\n<li>\n\t\t\t\t\t\t\t\t\t\tTechnology : PHP, Java Scripts, CSS, Threejs, WebGL, 3D, CMS\n\t\t\t\t\t\t\t\t\t<\/li>\n<li>\n\t\t\t\t\t\t\t\t\t\tEigenschaften: 3D Animationen, Bootstrap-Framework, Schalttafel\n\t\t\t\t\t\t\t\t\t<\/li>\n<\/ul>\n<h2>Das Resultat<\/h2>\n<p>Celonic ist eine einzigartige Website und ein einzigartiges Projekt. Die Website ist mehrstufig mit verschiedenen Kategorien f\u00fcr jedes F\u00fcnfeck\/Sechseck der Kugel, und jede Kategorie hat ihre eigene Unterkategorie mit unterschiedlichen Details und Beschreibungen f\u00fcr jeden Prozess. Die Website verf\u00fcgt auch \u00fcber ein Bedienfeld f\u00fcr eine einfachere Verwaltung im Backend, das auf einem Laravel-Framework basiert.<\/p>\n<p>\u00a0<\/p>\n<ul>\n<li>\n\t\t\t\t\t<a href=\"http:\/\/team4design.com\/celonic\/unfolding\/web\/\"><br \/>\n\t\t\t\t\t\t\t\t\t\tDemo mit Entfaltungskugel<br \/>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n<li>\n\t\t\t\t\t<a href=\"http:\/\/team4design.com\/celonic\/hexagons\/web\/\" target=\"_blank\" rel=\"noopener\"><br \/>\n\t\t\t\t\t\t\t\t\t\tDemo mit rotierender Kugel<br \/>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n<\/ul>\n<p>\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"http:\/\/team4design.com\/new\/wp-content\/uploads\/2019\/01\/celonic_9-1.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"celonic_9\"><br \/>\n\t\t\t\t\t\t\t<img width=\"710\" height=\"359\" src=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_9-1-1024x518.jpg\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_9-1-1024x518.jpg 1024w, https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_9-1-300x152.jpg 300w, https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_9-1-768x389.jpg 768w, https:\/\/team4design.com\/wp-content\/uploads\/2019\/01\/celonic_9-1.jpg 1920w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/>\t\t\t\t\t\t\t\t<\/a><\/p>\n<p><strong>Jahr<\/strong><\/p>\n<p>Dec 2018<\/p>\n<p><strong>Typ<\/strong><\/p>\n<p>3D Website<\/p>\n<p><strong>Klient<\/strong><\/p>\n<p>Celonic AG<\/p>\n<p><strong>Link<\/strong><\/p>\n<p><a href=\"https:\/\/team4design.com\/celonic\/unfolding\/web\">Demo mit Entfaltungskugel<\/a><br \/><a href=\"https:\/\/team4design.com\/celonic\/hexagons\/web\/\">Demo mit rotierender Kugel<\/a><\/p>\n","protected":false},"featured_media":920,"template":"","portfolio-cat":[18],"translation":{"provider":"WPGlobus","version":"2.7.5","language":"de","enabled_languages":["fr","de","en"],"languages":{"fr":{"title":true,"content":true,"excerpt":false},"de":{"title":true,"content":true,"excerpt":false},"en":{"title":true,"content":true,"excerpt":false}}},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Celonic AG - Team 4 Design<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/team4design.com\/en\/portfolio\/celonic-ag-3d\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Celonic AG - Team 4 Design\" \/>\n<meta property=\"og:url\" content=\"https:\/\/team4design.com\/en\/portfolio\/celonic-ag-3d\/\" \/>\n<meta property=\"og:site_name\" content=\"Team 4 Design\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-18T16:28:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/02\/Celonic-Website.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"494\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/team4design.com\/#organization\",\"name\":\"Team 4 Design\",\"url\":\"https:\/\/team4design.com\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/team4design.com\/#logo\",\"inLanguage\":\"de-DE\",\"url\":\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/02\/Team4Design-Logo-Courrier.png\",\"contentUrl\":\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/02\/Team4Design-Logo-Courrier.png\",\"width\":300,\"height\":51,\"caption\":\"Team 4 Design\"},\"image\":{\"@id\":\"https:\/\/team4design.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/team4design.com\/#website\",\"url\":\"https:\/\/team4design.com\/\",\"name\":\"Team 4 Design\",\"description\":\"Web und Grafik-Design\",\"publisher\":{\"@id\":\"https:\/\/team4design.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/team4design.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/team4design.com\/en\/portfolio\/celonic-ag-3d\/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/02\/Celonic-Website.png\",\"contentUrl\":\"https:\/\/team4design.com\/wp-content\/uploads\/2019\/02\/Celonic-Website.png\",\"width\":1000,\"height\":494},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/team4design.com\/en\/portfolio\/celonic-ag-3d\/#webpage\",\"url\":\"https:\/\/team4design.com\/en\/portfolio\/celonic-ag-3d\/\",\"name\":\"Celonic AG - Team 4 Design\",\"isPartOf\":{\"@id\":\"https:\/\/team4design.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/team4design.com\/en\/portfolio\/celonic-ag-3d\/#primaryimage\"},\"datePublished\":\"2019-01-09T14:01:15+00:00\",\"dateModified\":\"2021-08-18T16:28:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/team4design.com\/en\/portfolio\/celonic-ag-3d\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/team4design.com\/en\/portfolio\/celonic-ag-3d\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/team4design.com\/en\/portfolio\/celonic-ag-3d\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/team4design.com\/\",\"url\":\"https:\/\/team4design.com\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/team4design.com\/portfolios\/\",\"url\":\"https:\/\/team4design.com\/portfolios\/\",\"name\":\"Portfolios\"}},{\"@type\":\"ListItem\",\"position\":3,\"item\":{\"@id\":\"https:\/\/team4design.com\/en\/portfolio\/celonic-ag-3d\/#webpage\"}}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/team4design.com\/de\/wp-json\/wp\/v2\/portfolio\/342"}],"collection":[{"href":"https:\/\/team4design.com\/de\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/team4design.com\/de\/wp-json\/wp\/v2\/types\/portfolio"}],"version-history":[{"count":127,"href":"https:\/\/team4design.com\/de\/wp-json\/wp\/v2\/portfolio\/342\/revisions"}],"predecessor-version":[{"id":2567,"href":"https:\/\/team4design.com\/de\/wp-json\/wp\/v2\/portfolio\/342\/revisions\/2567"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/team4design.com\/de\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/team4design.com\/de\/wp-json\/wp\/v2\/media?parent=342"}],"wp:term":[{"taxonomy":"portfolio-cat","embeddable":true,"href":"https:\/\/team4design.com\/de\/wp-json\/wp\/v2\/portfolio-cat?post=342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}