graphoarty

<style>

       /* CSS applied on the body */
       body {
          
           /* Making sure that the body fills up the entire window */
           margin: 0px;

           /* If there is an overflow, which basically means if there is an object that goes outside the display, just hide it or hide the part that goes outside. These are the preferred options for Three.js */

graphoarty

<script>

       // initialize the renderer
       var renderer = new THREE.WebGLRenderer();

       // This is usually used for HiDPI device to prevent blurring output canvas (docs)
       renderer.setPixelRatio(window.devicePixelRatio);

       // sets the viewport size (docs)

graphoarty

// the geometry that we want the shape to be
// parameters are the radius, width segments, and height segments
var geometry = new THREE.SphereBufferGeometry( 3, 32, 32 );

// the material we want to put on the shape
// the colour parameter defines the colour the material is composed of
// currently it is green because the hex value of green is 00ff00
// we can also add images here instead of colours to wrap
// around the objects

graphoarty

// initialize the light with the color white, the intensity of 2 and a distance of influence of 100
var light = new THREE.PointLight(0xffffff, 2, 100);

// set the position of the light at 0, 0, 0 (where the camera is)
light.position.set(0, 0, 0);

// add the light to the scene
scene.add(light);

graphoarty

// initialize TextureLoader into loader
var loader = new THREE.TextureLoader();

// call the load function and pass in the parameters
// the first is the URL of the texture image to be loaded
// the second is the function to be called when the texture is loaded
// the texture reference is passed as a reference in this function
// the onError function call is called when there is an error
loader.load(

graphoarty

onLoad = function (texture) {

    var material = new THREE.MeshBasicMaterial({
        map: texture
    });

    var geometry = new THREE.SphereBufferGeometry(3, 32, 32);
    geometry.scale( -1, 1, 1 );
    var sphere = new THREE.Mesh(geometry, material);
    sphere.position = camera.position;

graphoarty

git add .
git commit -m "Sphere in place"
git push -u origin master

graphoarty

// Initialize OrbitControls on to the camera
// use the domElement from the renderer to catch the events from mouse and keyboard
var controls = new THREE.OrbitControls(camera, renderer.domElement);

// The behaviour we are looking for here is purely rotational
controls.target.set(camera.position.x + .1, camera.position.y, camera.position.z);

graphoarty

// Call the animate function
animate();

// The animated function updates the scene
// and updates the controls
function animate() {

    // The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. (docs)
    requestAnimationFrame(animate);

graphoarty

// Add an event listener that fires the function onWindowResize on resize
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    // Adjust the camera aspect ratio to the camera to suit the new height and width of the window
    camera.aspect = window.innerWidth / window.innerHeight;

    // Updates the camera's projection matrix. (docs) 
    camera.updateProjectionMatrix();