{"id":1912,"date":"2018-02-21T20:07:59","date_gmt":"2018-02-21T20:07:59","guid":{"rendered":"http:\/\/websterart.com\/wordpress\/?p=1912"},"modified":"2018-02-21T21:01:34","modified_gmt":"2018-02-21T21:01:34","slug":"rotate-3d-javascript","status":"publish","type":"post","link":"https:\/\/websterart.com\/wordpress\/2018\/02\/rotate-3d-javascript\/","title":{"rendered":"Rotate in 3D with JavaScript"},"content":{"rendered":"<p>I&#8217;m taking <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Client-side_web_APIs\/Drawing_graphics\" target=\"_blank\" rel=\"noopener\">online classes in Javascript<\/a>\u00a0for a few months while I&#8217;m between contracts. I learned how to animate a cube in 3 dimensions today. It uses a library called three.js. As with Jquery libraries, we plug them in (three.js) to make things easier.<\/p>\n\n<!-- iframe plugin v.6.0 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/www.websterart.com\/html\/study-js\/canvas\/rotate3d.html\" width=\"400\" height=\"400\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>I wrote these 50 lines of code that makes it work. It&#8217;s a fun lesson, but the full credit needs to go developer.mozilla.org. A lot of that stuff makes no sense to me. I gotta be honest&#8230;some of these lessons are so far above my head I wonder sometimes if I&#8217;m totally wasting my time learning this stuff. I mean these people are geniuses, probably with masters degrees in computer science. I can write their code and make the lesson work&#8230;but full understanding would only come with doing it full time.<\/p>\n<pre class=\"lang:default decode:true\">var scene = new THREE.Scene();\r\n\r\n\/*1. field of view in degree; 2. aspect ratio; 3. Minimum render distance; 4. Max render distance\r\n*\/\r\n\/\/takes 4 arguments                       1                     2                     3     4\r\nvar camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\r\n\r\n\/*set the camera's position to be 5 distance\r\n units out of the Z axis, which, like in CSS,\r\n is out of the screen towards you, the viewer.*\/\r\ncamera.position.z = 5;\r\n\r\nvar renderer = new THREE.WebGLRenderer();\/\/creates a &lt;canvas&gt;\r\nrenderer.setSize(window.innerWidth, window.innerHeight);\r\n\r\ndocument.body.appendChild(renderer.domElement);\/\/appends &lt;canvas&gt;\r\n\r\nvar cube;\r\nvar loader = new THREE.TextureLoader();\r\n\r\nloader.load(\r\n  'metal003.png',\r\n  function (texture) {\r\n    texture.wrapS = THREE.RepeatWrapping;\r\n    texture.wrapT = THREE.RepeatWrapping;\r\n    texture.repeat.set(2,2);\r\n\r\n    var geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4);\r\n    var material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } );\r\n    cube = new THREE.Mesh(geometry, material);\r\n    scene.add(cube);\r\n    draw();\r\n  }\/\/end function (texture)\r\n);\/\/end loader.load\r\n\r\nvar light = new THREE.AmbientLight('rgb(255, 255, 255)');\/\/soft white\r\nscene.add(light);\r\n\r\nvar spotLight = new THREE.SpotLight('rgb(255, 255, 255)');\r\nspotLight.position.set( 100, 1000, 1000 );\r\nspotLight.castShadow = true;\r\nscene.add(spotLight);\r\n\r\nfunction draw(){\r\n  cube.rotation.x += 0.01;\r\n  cube.rotation.y += 0.01;\r\n  renderer.render(scene, camera);\r\n  requestAnimationFrame(draw);\/\/self loop at 60fps call\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>In other news, I removed my woocomerce store and shopping cart. I had zero sales from it, and it was always worrisome that I would have a purchase while I wasn&#8217;t paying attention&#8230;which could lead to an unhappy customer. I&#8217;m thinking I might try etsy at some point as some artists are selling there.<\/p>\n<p><iframe title=\"ETSY SELLING PROS &amp; CONS Selling Art | Katie Jobling Art\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/qZNpEgCgc4I?start=476&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Selling my paintings is very low on my priority list right now. I think of myself as being in college full-time. I&#8217;m hitting the books every weekday, 9 to 5. The only unusual thing is that I&#8217;m not enrolled anywhere. I&#8217;m doing self study. This stuff is all free online&#8230;no need to pay a teacher. Hmmm, that might be a contributing factor to why I&#8217;m not working this quarter as a teacher. Go figure.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m taking online classes in Javascript\u00a0for a few months while I&#8217;m between contracts. I learned how to animate a cube in 3 dimensions today. It uses a library called three.js. As with Jquery libraries, we plug them in (three.js) to make things easier. I wrote these 50 lines of code that makes it work. It&#8217;s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1912","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1912"}],"version-history":[{"count":7,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1912\/revisions"}],"predecessor-version":[{"id":1921,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1912\/revisions\/1921"}],"wp:attachment":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}