{"id":749,"date":"2020-06-22T13:37:31","date_gmt":"2020-06-22T13:37:31","guid":{"rendered":"http:\/\/adrianbell.me\/?p=749"},"modified":"2020-06-22T13:37:31","modified_gmt":"2020-06-22T13:37:31","slug":"gl-lines","status":"publish","type":"post","link":"https:\/\/adrianbell.me\/?p=749","title":{"rendered":"GL Lines"},"content":{"rendered":"\r\n<p>Thought I'd play a bit more with WebGL through three.js. I wanted to play with lines a bit more, as wireframe just looks cool.<\/p>\r\n\r\n\r\n<!--\r\n<canvas id=\"canvas\" width=\"550\" height=\"375\">\r\n-->\r\n<p><canvas id=\"canvas\" width=\"375\" height=\"375\"> Your browser does not support the canvas tag. This is a static example of what would be seen. <\/canvas> <script src=\"js\/three.js\"><\/script> <script type=\"text\/javascript\"> \r\n    var canvas = document.getElementById('canvas');\r\n    var renderer = new THREE.WebGLRenderer({canvas: canvas});    \r\n    canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;\r\n    renderer.setViewport(0, 0, canvas.clientWidth, canvas.clientHeight);\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    \r\n    \/\/var camera = new THREE.PerspectiveCamera( 45, window.innerWidth \/ window.innerHeight, 1, 500 );\r\n\r\n\/\/ THIS WORKS\r\n    \/\/var camera = new THREE.PerspectiveCamera( 45, 1, 1, 500 );\r\n\r\nvar camera = new THREE.PerspectiveCamera(75, canvas.clientWidth\/canvas.clientHeight, 0.1, 1000);\r\n\r\n    camera.position.set( 0, 0, 50 );\r\n    camera.lookAt( 0, 0, 0 );\r\n\r\n    var scene = new THREE.Scene();\r\n\r\n    var geometry = new THREE.BoxGeometry(1, 1, 1);\r\n\r\n    \/\/var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );\r\n    var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );\r\n    \r\n    \/\/var cube = new THREE.Mesh(geometry, material);\r\n    var points = [];\r\n    \/\/points.push( new THREE.Vector3( - 10, 0, 0 ) );\r\n    \/\/points.push( new THREE.Vector3( 10, 0, 0 ) );\r\n    \/\/points.push( new THREE.Vector3( 0, 8.66025, 0 ) );\r\n    \/\/points.push( new THREE.Vector3( - 10, 0, 0 ) );\r\n    points.push( new THREE.Vector3( 10, 0, 0 ) );\r\n    points.push( new THREE.Vector3( -5, -8.66025, 0 ) );\r\n    points.push( new THREE.Vector3( -5, 8.66025, 0 ) );\r\n    points.push( new THREE.Vector3( 10, 0, 0 ) );\r\n\r\n    var geometry = new THREE.BufferGeometry().setFromPoints( points );\r\n    var line = new THREE.Line( geometry, material );\r\n\r\n\r\n    \/\/scene.add(cube);\r\n    scene.add( line );\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        line.rotation.x += 0.01;\r\n        line.rotation.y += 0.01;\r\n        line.rotation.z += 0.01;\r\n        renderer.render(scene, camera);\r\n    };\r\n    animate();\r\n<\/script><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Thought I'd play a bit more with WebGL through three.js. I wanted to play with lines a bit more, as wireframe just looks cool. Your browser does not support the canvas tag. This is a static example of what would be seen.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[42],"class_list":["post-749","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\/749","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=749"}],"version-history":[{"count":49,"href":"https:\/\/adrianbell.me\/index.php?rest_route=\/wp\/v2\/posts\/749\/revisions"}],"predecessor-version":[{"id":799,"href":"https:\/\/adrianbell.me\/index.php?rest_route=\/wp\/v2\/posts\/749\/revisions\/799"}],"wp:attachment":[{"href":"https:\/\/adrianbell.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/adrianbell.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/adrianbell.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}