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();

    // Set the background color 
    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;
    scene.add(camera);

    // Create a group to hold all the objects
    const cubeGroup = new THREE.Object3D;
    
    // Add a directional light to show off the objects
    const light = new THREE.DirectionalLight( 0xffffff, 1.0);

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

    // This light globally illuminates all objects in the scene equally.
    // Cannot cast shadows
    const ambientLight = new THREE.AmbientLight(0xffccaa, 0.2);
    scene.add(ambientLight);

    const textureUrl = "../images/ash_uvgrid01.jpg";
    const texture = new THREE.TextureLoader().load(textureUrl);
    const material = new THREE.MeshPhongMaterial({ map: texture });

    // Create the cube geometry
    let geometry = new THREE.BoxGeometry(2, 2, 2);

    // And put the geometry and material together into a mesh
    cube = new THREE.Mesh(geometry, material);

    // Tilt the mesh toward the viewer
    cube.rotation.x = Math.PI / 5;
    cube.rotation.y = Math.PI / 5;

    // Add the cube mesh to our group
    cubeGroup.add( cube );

    cubeGroup.position.set(1, 0, -0.5);

    // Create a group for the sphere
    sphereGroup = new THREE.Object3D;
    cubeGroup.add(sphereGroup);
    
    // Move the sphere group up and back from the cube
    sphereGroup.position.set(0, 3, -4);

    // Create the sphere geometry
    geometry = new THREE.SphereGeometry(1, 20, 20);
    
    // And put the geometry and material together into a mesh
    sphere = new THREE.Mesh(geometry, material);

    // Add the sphere mesh to our group
    sphereGroup.add( sphere );

    // Create the cone geometry
    geometry = new THREE.CylinderGeometry(0, .333, .444, 20, 20);

    // And put the geometry and material together into a mesh
    cone = new THREE.Mesh(geometry, material);

    // Move the cone up and out from the sphere
    cone.position.set(1, 1, -.667);
        
    // Add the cone mesh to our group
    sphereGroup.add( cone );
    
    // Now add the group to our scene
    scene.add( cubeGroup );

    // add mouse handling so we can rotate the scene
    addMouseHandler(canvas, cubeGroup);

    // This code gets the world position of the cone.
    const coneWorldPosition = new THREE.Vector3();

    cubeGroup.updateMatrixWorld();
    sphereGroup.updateMatrixWorld();
    cone.updateMatrixWorld();

    console.log("Cone position:", cone.position);
    cone.getWorldPosition(coneWorldPosition);
    console.log("Cone world position", coneWorldPosition);
}
/**
 * Creates a basic scene with lights, a camera, and 3 objects
 * @param {canvas} canvas The canvas element to render on
 */
Creates a basic scene with lights, a camera, and 3 objects
@param {canvas} canvas The canvas element to render on
Creates a basic scene with lights a camera and 3 objects @param { canvas } canvas The canvas element to render on
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;
    scene.add(camera);
    const cubeGroup = new THREE.Object3D;
    const light = new THREE.DirectionalLight( 0xffffff, 1.0);
    light.position.set(-.5, .2, 1);
    light.target.position.set(0,-2,0);
    scene.add(light);
    const ambientLight = new THREE.AmbientLight(0xffccaa, 0.2);
    scene.add(ambientLight);
    const textureUrl = "../images/ash_uvgrid01.jpg";
    const texture = new THREE.TextureLoader().load(textureUrl);
    const material = new THREE.MeshPhongMaterial({ map: texture });
    let geometry = new THREE.BoxGeometry(2, 2, 2);
    cube = new THREE.Mesh(geometry, material);
    cube.rotation.x = Math.PI / 5;
    cube.rotation.y = Math.PI / 5;
    cubeGroup.add( cube );
    cubeGroup.position.set(1, 0, -0.5);
    sphereGroup = new THREE.Object3D;
    cubeGroup.add(sphereGroup);
    sphereGroup.position.set(0, 3, -4);
    geometry = new THREE.SphereGeometry(1, 20, 20);
    sphere = new THREE.Mesh(geometry, material);
    sphereGroup.add( sphere );
    geometry = new THREE.CylinderGeometry(0, .333, .444, 20, 20);
    cone = new THREE.Mesh(geometry, material);
    cone.position.set(1, 1, -.667);
    sphereGroup.add( cone );
    scene.add( cubeGroup );
    addMouseHandler(canvas, cubeGroup);
    const coneWorldPosition = new THREE.Vector3();
    cubeGroup.updateMatrixWorld();
    sphereGroup.updateMatrixWorld();
    cone.updateMatrixWorld();
    console.log("Cone position:", cone.position);
    cone.getWorldPosition(coneWorldPosition);
    console.log("Cone world position", coneWorldPosition);
}
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 ; scene . add ( camera ) ; const cubeGroup = new THREE . Object3D ; const light = new THREE . DirectionalLight ( 0xffffff , 1.0 ) ; light . position . set ( - .5 , .2 , 1 ) ; light . target . position . set ( 0 , - 2 , 0 ) ; scene . add ( light ) ; const ambientLight = new THREE . AmbientLight ( 0xffccaa , 0.2 ) ; scene . add ( ambientLight ) ; const textureUrl = "../images/ash_uvgrid01.jpg" ; const texture = new THREE . TextureLoader ( ) . load ( textureUrl ) ; const material = new THREE . MeshPhongMaterial ( { map : texture } ) ; let geometry = new THREE . BoxGeometry ( 2 , 2 , 2 ) ; cube = new THREE . Mesh ( geometry , material ) ; cube . rotation . x = Math . PI / 5 ; cube . rotation . y = Math . PI / 5 ; cubeGroup . add ( cube ) ; cubeGroup . position . set ( 1 , 0 , - 0.5 ) ; sphereGroup = new THREE . Object3D ; cubeGroup . add ( sphereGroup ) ; sphereGroup . position . set ( 0 , 3 , - 4 ) ; geometry = new THREE . SphereGeometry ( 1 , 20 , 20 ) ; sphere = new THREE . Mesh ( geometry , material ) ; sphereGroup . add ( sphere ) ; geometry = new THREE . CylinderGeometry ( 0 , .333 , .444 , 20 , 20 ) ; cone = new THREE . Mesh ( geometry , material ) ; cone . position . set ( 1 , 1 , - .667 ) ; sphereGroup . add ( cone ) ; scene . add ( cubeGroup ) ; addMouseHandler ( canvas , cubeGroup ) ; const coneWorldPosition = new THREE . Vector3 ( ) ; cubeGroup . updateMatrixWorld ( ) ; sphereGroup . updateMatrixWorld ( ) ; cone . updateMatrixWorld ( ) ; console . log ( "Cone position:" , cone . position ) ; cone . getWorldPosition ( coneWorldPosition ) ; console . log ( "Cone world position" , coneWorldPosition ) ; }
Creates a basic scene with lights, a camera, and 3 objects
 @param {canvas} canvas The canvas element to render on
Creates a basic scene with lights a camera and 3 objects @param { canvas } canvas The canvas element to render on
// Create the Three.js renderer and attach it to our canvas // Set the viewport size // Create a new Three.js scene // Set the background color  // Add  a camera so we can view the scene // Create a group to hold all the objects // Add a directional light to show off the objects // Position the light out from the scene, pointing at the origin // This light globally illuminates all objects in the scene equally. // Cannot cast shadows // Create the cube geometry // And put the geometry and material together into a mesh // Tilt the mesh toward the viewer // Add the cube mesh to our group // Create a group for the sphere // Move the sphere group up and back from the cube // Create the sphere geometry // And put the geometry and material together into a mesh // Add the sphere mesh to our group // Create the cone geometry // And put the geometry and material together into a mesh // Move the cone up and out from the sphere // Add the cone mesh to our group // Now add the group to our scene // add mouse handling so we can rotate the scene // This code gets the world position of the cone.