{"id":401,"date":"2018-08-23T12:27:12","date_gmt":"2018-08-23T12:27:12","guid":{"rendered":"http:\/\/adrianbell.me\/?p=401"},"modified":"2020-06-22T13:30:49","modified_gmt":"2020-06-22T13:30:49","slug":"webgl-test","status":"publish","type":"post","link":"https:\/\/adrianbell.me\/?p=401","title":{"rendered":"WebGL Test!"},"content":{"rendered":"\r\n<p>Under the assumption that this may be useful at some point, I spent a while hunting online for the best way to get WebGL running in WordPress.<\/p>\r\n\r\n\r\n\r\n<canvas id=\"canvas\" width=\"550\" height=\"375\">Your browser does not support the canvas tag. This is a static example of what would be seen.<\/canvas>\r\n\r\n<script src=\"js\/three.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n   var canvas = document.getElementById('canvas');    \r\n    \r\n      var renderer = new THREE.WebGLRenderer({canvas: canvas});\r\n      canvas.width  = canvas.clientWidth;\r\n      canvas.height = canvas.clientHeight;\r\n     \r\n\r\n\trenderer.setViewport(0, 0, canvas.clientWidth, canvas.clientHeight);\r\n\t\r\n      var scene = new THREE.Scene();\r\n      \r\n      var camera = new THREE.PerspectiveCamera(75, canvas.clientWidth\/canvas.clientHeight, 0.1, 1000);\r\n      camera.position.z = 3;\r\n      var geometry = new THREE.BoxGeometry(1, 1, 1);\r\n     \r\n\tvar material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );\r\n      var cube = new THREE.Mesh(geometry, material);\r\n      scene.add(cube);\r\n    \r\n      function animate() {\r\n        requestAnimationFrame( animate );\r\n        cube.rotation.x += 0.01;\r\n        cube.rotation.y += 0.01;\r\n        renderer.render(scene, camera);\r\n      };\r\n      animate();\r\n\r\n    <\/script>\r\n\r\n\r\n\r\n<hr class=\"wp-block-separator\"\/>\r\n\r\n\r\n\r\n<p>After reading lots of articles, blog posts, stackoverflow posts and doing my own editing, I ended up with the code below!<\/p>\r\n\r\n\r\n\r\n<p>First, upload three.js to your \/js directory on your webserver. Then paste all the code below into a blog post as HTML.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>&lt;canvas id=\"canvas\" width=\"550\" height=\"375\">Your browser does not support the canvas tag. This is a static example of what would be seen.&lt;\/canvas>\r\n\r\n&lt;script src=\"js\/three.js\">&lt;\/script>\r\n\r\n&lt;script type=\"text\/javascript\">\r\n   var canvas = document.getElementById('canvas');    \r\n    \r\n   var renderer = new THREE.WebGLRenderer({canvas: canvas});\r\n   canvas.width  = canvas.clientWidth;\r\n   canvas.height = canvas.clientHeight;\r\n\r\n   renderer.setViewport(0, 0, canvas.clientWidth, canvas.clientHeight);\r\n\t\r\n   var scene = new THREE.Scene();\r\n      \r\n   var camera = new THREE.PerspectiveCamera(75, canvas.clientWidth\/canvas.clientHeight, 0.1, 1000);\r\n   camera.position.z = 3;\r\n   var geometry = new THREE.BoxGeometry(1, 1, 1);\r\n     \r\n   var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );\r\n   var cube = new THREE.Mesh(geometry, material);\r\n   scene.add(cube);\r\n    \r\n   function animate() {\r\n      requestAnimationFrame( animate );\r\n      cube.rotation.x += 0.01;\r\n      cube.rotation.y += 0.01;\r\n      renderer.render(scene, camera);\r\n   };\r\n   animate();\r\n\r\n&lt;\/script><\/code><\/pre>\r\n\r\n\r\n\r\n<p><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Under the assumption that this may be useful at some point, I spent a while hunting online for the best way to get WebGL running in WordPress. Your browser does not support the canvas tag. This is a static example of what would be seen. After reading lots of articles, blog posts, stackoverflow posts and &hellip; <a href=\"https:\/\/adrianbell.me\/?p=401\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">WebGL Test!<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[42],"class_list":["post-401","post","type-post","status-publish","format-standard","hentry","category-webgl","tag-webgl"],"_links":{"self":[{"href":"https:\/\/adrianbell.me\/index.php?rest_route=\/wp\/v2\/posts\/401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adrianbell.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/adrianbell.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/adrianbell.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adrianbell.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=401"}],"version-history":[{"count":1,"href":"https:\/\/adrianbell.me\/index.php?rest_route=\/wp\/v2\/posts\/401\/revisions"}],"predecessor-version":[{"id":403,"href":"https:\/\/adrianbell.me\/index.php?rest_route=\/wp\/v2\/posts\/401\/revisions\/403"}],"wp:attachment":[{"href":"https:\/\/adrianbell.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/adrianbell.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/adrianbell.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}