{"id":1450,"date":"2015-05-07T10:10:17","date_gmt":"2015-05-07T10:10:17","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=1450"},"modified":"2015-08-03T06:11:22","modified_gmt":"2015-08-03T06:11:22","slug":"pluralsight-webgl-and-three-js-fundamentals-course-notes","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/javascript\/three-js\/pluralsight-webgl-and-three-js-fundamentals-course-notes\/","title":{"rendered":"Pluralsight WebGL and Three.js fundamentals course notes"},"content":{"rendered":"

Recently I bought a years worth subscription over at Pluralsight (here’s my portfolio of passed courses<\/a>), and here I’ll be posting my notes from the courses that I attended. Please note that this is not meant to be as a sort of tutorial, just as the name says – notes for myself :). However, one could get some useful content from these posts as I’m noting things that catch my attention.<\/p>\n

Here are my\u00a0notes from the WebGL and Three.js fundamentals<\/a> course. I rated the course 4\/5 and all in all it’s a good introduction to WebGL<\/a> with Three.js<\/a>.<\/p>\n

\/\/rant:\u00a0<\/em>I passed the exam with the whopping 100%, and actually I feel that since Pluralsight is\u00a0very famous and all that, that they could improve on the quality (it’s just too easy and does not go into detail) of these certification tests.<\/em><\/p>\n

var scene = new THREE.Scene(); \/\/acts like a container of all items<\/pre>\n
var renderer = new THREE.WebGLRenderer(); \/\/how our content will be displayed on the\u00a0page (WebGL, Canvas or\u00a0SVG renderers)<\/pre>\n
It uses a Cartesian cordinate system (x,y,z). If you don’t specify the position- it will be positioned at (0,0,0).<\/p>\n
It has a perspective<\/strong> and ortographic<\/strong> camera:<\/p>\n
camera = new THREE.PerspectiveCamera(\r\n35, =>fov\r\nwindow.innerWidth \/ window.innerHeight,\r\n1, => near\r\n1000 => far planes\r\n);<\/pre>\n
You can use your dev tools console (Chrome) or Firebug (Firefox) and access items if you properly export the objects in the code\u00a0(return {scene: scene});\u00a0<\/strong>code snippet in the listing below):<\/p>\n
\/\/app.js file\r\nvar example = (function(){\r\n\r\n    \"use strict\";\r\n    \r\n    var scene=new THREE.Scene(),\r\n    renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer(),\r\n    light= new THREE.AmbientLight(0xffffff),            \r\n    camera,        \r\n    box;\r\n\r\n    function initScene(){\r\n        renderer.setSize( window.innerWidth, window.innerHeight );\r\n        document.getElementById(\"webgl-container\").appendChild(renderer.domElement);\r\n\r\n        scene.add(light);\r\n                          \r\n        camera = new THREE.PerspectiveCamera(\r\n        35,\r\n        window.innerWidth \/ window.innerHeight,\r\n        1,\r\n        1000\r\n        );\r\n                            \r\n        camera.position.z= 100;            \r\n        scene.add( camera ); \r\n\r\n        box = new THREE.Mesh(\r\n        new THREE.BoxGeometry(20,20,20),\r\n        new THREE.MeshBasicMaterial({color: 0x00FF00})\r\n        );\r\n\r\n        box.name=\"box\";   \r\n\r\n        scene.add(box);\r\n\r\n        render();\r\n    }\r\n\r\n    function render(){\r\n        box.rotation.y +=0.01;\r\n        \r\n        renderer.render(scene, camera); \r\n        requestAnimationFrame(render);        \r\n    }\r\n\r\n    window.onload = initScene;\r\n    \r\n    return {\r\n        scene: scene\r\n    }\r\n\r\n})();<\/pre>\n
\/\/HTML file\r\n<!DOCTYPE html>\r\n\r\n<html>\r\n    <head>\r\n        <title>WebGL with three.js Fundamentals<\/title>       \r\n    <\/head>\r\n\r\n    <body>\r\n    \t<div id=\"webgl-container\"><\/div>\r\n    \t\r\n    \t<script src=\"scripts\/three.js\"><\/script><!--DL this from official site-->\r\n    \t<script src=\"scripts\/app.js\"><\/script>\r\n    <\/body>\r\n<\/html><\/pre>\n
Accessing it from Chrome Console as mentioned above:<\/p>\n
var a = example.scene.getObjectByName('box');\r\na.position.x = 10;\r\na.position.set(0,2,2);\r\n<\/pre>\n