{"id":608,"date":"2017-02-01T17:19:56","date_gmt":"2017-02-01T16:19:56","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=608"},"modified":"2022-07-25T08:35:45","modified_gmt":"2022-07-25T07:35:45","slug":"javascript-3d-tools","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/javascript-3d-tools\/","title":{"rendered":"Javascript 3d tools"},"content":{"rendered":"<pre lang=\"javascript\">\r\n\r\ndefine([ 'jquery', 'tools\/numbers' ], function() {\r\n\t'use strict';\r\n\tvar module = {};\r\n\t\/\/var $ = require('jquery');\r\n\tvar numbers = require('tools\/numbers');\r\n\tvar round100 = numbers.round100;\r\n\r\n\tmodule.deg2rad = function(degrees) {\r\n\t\treturn degrees * (Math.PI \/ 180);\r\n\t};\r\n\tvar deg2rad = module.deg2rad;\r\n\r\n\tmodule.rad2deg = function(radians) {\r\n\t\treturn radians * (180 \/ Math.PI);\r\n\t};\r\n\t\/\/var rad2deg = module.rad2deg;\r\n\r\n\tmodule.rotate3dtransform = function($e, radius, property, angle, duration) {\r\n\t\t$e.css('transition', 'none');\r\n\r\n\t\t\/\/ setTimeout(function() {\r\n\r\n\t\tif (!radius || isNaN(radius)) {\r\n\t\t\tradius = 0;\r\n\t\t}\r\n\r\n\t\tvar rotate3d;\r\n\t\tif (property == 'rotateY') {\r\n\t\t\trotate3d = '0,1,0,' + angle + 'deg';\r\n\t\t} else {\r\n\t\t\trotate3d = '1,0,0,' + angle + 'deg';\r\n\t\t}\r\n\r\n\t\tvar transforms = [];\r\n\t\t\/\/ transforms.push('perspective(1000px)');\r\n\t\t\/\/ transforms.push('translate3d(0,0,'+ roundPerc(radius * -1) +'px)');\r\n\t\ttransforms.push('rotate3d(' + rotate3d + ')');\r\n\r\n\t\tvar transform = transforms.join(' ');\r\n\t\tvar origin = '50% 50% ' + (-round100(radius)) + 'px';\r\n\r\n\t\t$e.css({\r\n\t\t\t'transition' : 'all ' + duration + 'ms',\r\n\t\t\t'transform-origin' : origin,\r\n\t\t\t'transform' : transform\r\n\t\t});\r\n\t\t\/\/ }, 100);\r\n\t};\r\n\tvar rotate3dtransform = module.rotate3dtransform;\r\n\r\n  module.getRadius = function($element, numFaces, vertical) {\r\n      var $e = $element;\r\n      var $p = $e.parent();\r\n\r\n      var w = $p.width();\r\n      var h = $p.height();\r\n\r\n      var sideMargin = 0;\r\n      var maxWidth = w + (sideMargin * 2);\r\n      var maxHeight = h;\r\n      var radius = maxWidth \/ (2 * Math.tan(deg2rad(180 \/ numFaces)));\r\n\r\n      if (vertical) {\r\n        radius = maxHeight \/ (2 * Math.tan(deg2rad(180 \/ numFaces)));\r\n      }\r\n\r\n      return radius;\r\n  };\r\n\r\n\tmodule.create3dpanel = function($element, numFaces, vertical) {\r\n\t\tvar $e = $element;\r\n\t\tvar $p = $e.parent();\r\n\r\n\t\tvar w = $p.width();\r\n\t\tvar h = $p.height();\r\n\r\n\t\tvar sideMargin = 0;\r\n\t\tvar maxWidth = w + (sideMargin * 2);\r\n\t\tvar maxHeight = h;\r\n\t\tvar radius = maxWidth \/ (2 * Math.tan(deg2rad(180 \/ numFaces)));\r\n\r\n\t\tif (vertical) {\r\n\t\t\tradius = maxHeight \/ (2 * Math.tan(deg2rad(180 \/ numFaces)));\r\n\t\t}\r\n\r\n\t\t$p.css({\r\n\t\t\t'transform-style' : 'preserve-3d',\r\n\t\t\t'transform' : 'perspective(1000px)'\r\n\t\t});\r\n\t\t$e.css({\r\n\t\t\t'backface-visibility' : 'hidden'\r\n\t\t});\r\n\t\t$e.attr('data-radius', radius);\r\n\t\trotate3dtransform($e, radius, 'rotateY', 0, 0);\r\n\t};\r\n\r\n\t\/\/ module.create3dpoly = function($parent) {\r\n\t\/\/ \tvar $e = $parent;\r\n\t\/\/ \tvar $space3d = $new('div', $e);\r\n\t\/\/ \t$space3d.addClass('space3d');\r\n\t\/\/ \tcreatePolygon($space3d, 4);\r\n\t\/\/\r\n\t\/\/ \treturn $space3d;\r\n\t\/\/ };\r\n\r\n\r\n\t\/\/ module.createPolygon = function($e, numFaces) {\r\n\t\/\/ \tvar sideMargin = 0;\r\n\t\/\/\r\n\t\/\/ \tvar w = $(window).width();\r\n\t\/\/ \tvar h = $(window).height();\r\n\t\/\/\r\n\t\/\/ \tvar maxWidth = w + (sideMargin * 2);\r\n\t\/\/ \tvar maxHeight = h;\r\n\t\/\/ \tvar radius = maxWidth \/ (2 * Math.tan(deg2rad(180 \/ numFaces)));\r\n\t\/\/\r\n\t\/\/ \t$('.space3d').css('perspective', (radius + w) + 'px');\r\n\t\/\/ \tvar $poly = $new('div', $e);\r\n\t\/\/ \t$poly.addClass('poly');\r\n\t\/\/ \t$poly.width(w);\r\n\t\/\/ \t$poly.height(h);\r\n\t\/\/ \t$poly.css('transform', 'translateZ(-' + radius + 'px)');\r\n\t\/\/\r\n\t\/\/ \tvar rotation = 0;\r\n\t\/\/ \tvar faces = [];\r\n\t\/\/\r\n\t\/\/ \tfor (var i = 0; i < numFaces; i += 1) {\r\n\t\/\/ \t\tvar $face = $new('div', $poly);\r\n\t\/\/ \t\t$face.addClass('face');\r\n\t\/\/ \t\t$face.css({\r\n\t\/\/ \t\t\tposition : 'absolute',\r\n\t\/\/ \t\t\tleft : 0,\r\n\t\/\/ \t\t\ttop : 0,\r\n\t\/\/ \t\t\topacity : 1\r\n\t\/\/ \t\t}); \/\/ padding: '0 0 0 100px'\r\n\t\/\/ \t\t$face.width(w);\r\n\t\/\/ \t\t$face.height(h);\r\n\t\/\/ \t\t$face.css('transform', 'rotateY(' + rotation + 'deg) translateZ(' + radius + 'px)');\r\n\t\/\/ \t\tfaces.push({\r\n\t\/\/ \t\t\torigRotation : rotation,\r\n\t\/\/ \t\t\t$face : $face\r\n\t\/\/ \t\t});\r\n\t\/\/ \t\trotation += 360 \/ numFaces;\r\n\t\/\/ \t}\r\n\t\/\/ };\r\n\r\n\treturn module;\r\n});\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>define([ &#8216;jquery&#8217;, &#8216;tools\/numbers&#8217; ], function() { &#8216;use strict&#8217;; var module = {}; \/\/var $ = require(&#8216;jquery&#8217;); var numbers = require(&#8216;tools\/numbers&#8217;); var round100 = numbers.round100; module.deg2rad = function(degrees) { return degrees * (Math.PI \/ 180); }; var deg2rad = module.deg2rad; module.rad2deg = function(radians) { return radians * (180 \/ Math.PI); }; \/\/var rad2deg = module.rad2deg; module.rotate3dtransform [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-608","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=608"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/608\/revisions"}],"predecessor-version":[{"id":609,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/608\/revisions\/609"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}