function createScene(canvas) 
{    
    // Create the Three.js renderer and attach it to our canvas
    renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );

    // Set the viewport size
    renderer.setSize(canvas.width, canvas.height);

    // Create a new Three.js scene
    scene = new THREE.Scene();

    scene.background = new THREE.Color( 0.2, 0.2, 0.2 );

    // Add  a camera so we can view the scene
    camera = new THREE.PerspectiveCamera( 45, canvas.width / canvas.height, 1, 4000 );
    camera.position.z = 10;
        
    // Create a group to hold the sphere
    group = new THREE.Object3D;

    // Add a directional light to show off the object
    const directionalLight = new THREE.DirectionalLight( 0xffffff, 1);

    // Position the light out from the scene, pointing at the origin
    directionalLight.position.set(.5, 0, 1);
    scene.add( directionalLight );

    const ambientLight = new THREE.AmbientLight ( 0xaaccbb, 0.3 );
    scene.add(ambientLight);
    
    // Create all the materials
    createMaterials(mapUrl);
    
    // Create the sphere geometry
    const geometry = new THREE.SphereGeometry(2, 20, 20);
    
    // And put the geometry and material together into a mesh
    sphere = new THREE.Mesh(geometry, materials["phong"]);
    sphere.visible = false;
        
    // And put the geometry and material together into a mesh
    sphereTextured = new THREE.Mesh(geometry, materials["phong-textured"]);
    sphereTextured.visible = true;
    setMaterial("phong-textured");
    
    // Add the sphere mesh to our group
    group.add( sphere );
    group.add( sphereTextured );
    
    // add mouse handling so we can rotate the elements in the scene
    addMouseHandler(canvas, group);
    
    scene.add(group);
}
/**
 * Creates a scene, camera, and adds lights and a sphere mesh
 * @param {canvas} canvas 
 */
Creates a scene, camera, and adds lights and a sphere mesh
@param {canvas} canvas
Creates a scene camera and adds lights and a sphere mesh @param { canvas } canvas
function createScene(canvas) 
{    
    renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
    renderer.setSize(canvas.width, canvas.height);
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0.2, 0.2, 0.2 );
    camera = new THREE.PerspectiveCamera( 45, canvas.width / canvas.height, 1, 4000 );
    camera.position.z = 10;
    group = new THREE.Object3D;
    const directionalLight = new THREE.DirectionalLight( 0xffffff, 1);
    directionalLight.position.set(.5, 0, 1);
    scene.add( directionalLight );
    const ambientLight = new THREE.AmbientLight ( 0xaaccbb, 0.3 );
    scene.add(ambientLight);
    createMaterials(mapUrl);
    const geometry = new THREE.SphereGeometry(2, 20, 20);
    sphere = new THREE.Mesh(geometry, materials["phong"]);
    sphere.visible = false;
    sphereTextured = new THREE.Mesh(geometry, materials["phong-textured"]);
    sphereTextured.visible = true;
    setMaterial("phong-textured");
    group.add( sphere );
    group.add( sphereTextured );
    addMouseHandler(canvas, group);
    scene.add(group);
}
function createScene ( canvas ) { renderer = new THREE . WebGLRenderer ( { canvas : canvas , antialias : true } ) ; renderer . setSize ( canvas . width , canvas . height ) ; scene = new THREE . Scene ( ) ; scene . background = new THREE . Color ( 0.2 , 0.2 , 0.2 ) ; camera = new THREE . PerspectiveCamera ( 45 , canvas . width / canvas . height , 1 , 4000 ) ; camera . position . z = 10 ; group = new THREE . Object3D ; const directionalLight = new THREE . DirectionalLight ( 0xffffff , 1 ) ; directionalLight . position . set ( .5 , 0 , 1 ) ; scene . add ( directionalLight ) ; const ambientLight = new THREE . AmbientLight ( 0xaaccbb , 0.3 ) ; scene . add ( ambientLight ) ; createMaterials ( mapUrl ) ; const geometry = new THREE . SphereGeometry ( 2 , 20 , 20 ) ; sphere = new THREE . Mesh ( geometry , materials [ "phong" ] ) ; sphere . visible = false ; sphereTextured = new THREE . Mesh ( geometry , materials [ "phong-textured" ] ) ; sphereTextured . visible = true ; setMaterial ( "phong-textured" ) ; group . add ( sphere ) ; group . add ( sphereTextured ) ; addMouseHandler ( canvas , group ) ; scene . add ( group ) ; }
Creates a scene, camera, and adds lights and a sphere mesh
 @param {canvas} canvas
Creates a scene camera and adds lights and a sphere mesh @param { canvas } canvas
// Create the Three.js renderer and attach it to our canvas // Set the viewport size // Create a new Three.js scene // Add  a camera so we can view the scene // Create a group to hold the sphere // Add a directional light to show off the object // Position the light out from the scene, pointing at the origin // Create all the materials // Create the sphere geometry // And put the geometry and material together into a mesh // And put the geometry and material together into a mesh // Add the sphere mesh to our group // add mouse handling so we can rotate the elements in the scene