javascript - How to encapsule a THREE.js script into classes? -

i have complex three.js script shows human 3d body can select segments.

var container; var camera; var scene; var renderer; var mouse; var raycaster; var controls; var hemilight;  function init(containerid) {     // setup needed variables     container = document.getelementbyid(containerid);     camera = new three.perspectivecamera(1, window.innerwidth / window.innerheight, 1, 2000);     camera.position.z = 400;      // scene     scene = new three.scene();     hemilight = new three.hemispherelight(0xcc9966, 0xcc9966, 1);     hemilight.position.set(0, 500, 0);     scene.add(hemilight);      // camera behaviour     controls = new three.trackballcontrols(camera);     controls.rotatespeed = 5.0;     controls.zoomspeed = 5;     controls.panspeed = 2;     controls.nozoom = false;     controls.nopan = false;     controls.staticmoving = true;     controls.dynamicdampingfactor = 0.3;     controls.enabled = false;      // model     var onprogress = function ( xhr ) {         // necessary if obj-file-size large     };     var onerror = function ( xhr ) {         // went wrong during loading obj-file         console.log("error, please report devs");     };      three.loader.handlers.add(/\.dds$/i, new three.ddsloader());     var loader = new three.objmtlloader();      // load 3d files     loader.load( 'objects/head.obj', 'images/head.mtl', function ( object ) {         prepareobj( object, "head" );     }, onprogress, onerror );     loader.load( 'objects/torso.obj', 'images/torso.mtl', function ( object ) {         prepareobj( object, "torso" );     }, onprogress, onerror );     loader.load( 'objects/arm_left.obj', 'images/arm_left.mtl', function ( object ) {         prepareobj( object, "arm_left" );     }, onprogress, onerror );     loader.load( 'objects/arm_right.obj', 'images/arm_right.mtl', function ( object ) {         prepareobj( object, "arm_right" );     }, onprogress, onerror );     loader.load( 'objects/leg_right.obj', 'images/leg_right.mtl', function ( object ) {         prepareobj( object, "leg_right" );     }, onprogress, onerror );     loader.load( 'objects/leg_left.obj', 'images/leg_left.mtl', function ( object ) {         prepareobj( object, "leg_left" );     }, onprogress, onerror );      renderer = new three.webglrenderer();     renderer.setpixelratio(window.devicepixelratio);     renderer.setsize(500, 500);     renderer.setclearcolor(0xffffff, 1);     container.appendchild(renderer.domelement);      document.addeventlistener("mouseover", function(e) {         checkbodyactive(e);     }, false);     document.addeventlistener("click", onclick, false);     window.addeventlistener("resize", onwindowresize, false);      raycaster = new three.raycaster();     mouse = new three.vector2();      camera.aspect = 1;     camera.updateprojectionmatrix();     renderer.render(scene, camera);     animate(); }  function checkbodyactive(event) {     // checks, if current body active     if(document.elementfrompoint(event.clientx, event.clienty) == renderer.domelement) {         animate();         controls.enabled = true;     }     else {         controls.enabled = false;     } }  function changetexture(part) {     // change texture of selected body part     scene.children[part].traverse( function ( child ) {         if (child instanceof three.mesh) {             // texture must changed             if(scene.children[part].children[0].children[0].material.map.sourcefile=="images/texture2.jpg") {                 // texture2 equipped, unequip                 child.material.map = three.imageutils.loadtexture("images/texture.jpg");             } else {                 // equip texture2                 child.material.map = three.imageutils.loadtexture("images/texture2.jpg");             }             child.material.needsupdate = true;         }     }); }  function onwindowresize() {     // function make sure proportions correct after resizing window     camera.aspect = 1;     camera.updateprojectionmatrix(); }  function onclick(event) {     // mouse-click-event, used check if intersects hit     //event.preventdefault();     mouse.x = (getoffset(event).x / renderer.domelement.width) * 2 - 1;     mouse.y = - (getoffset(event).y / renderer.domelement.height) * 2 + 1;      // create intersect raycasting     raycaster.setfromcamera(mouse, camera);     var intersects = raycaster.intersectobjects(scene.children, true);     if(intersects.length) {         var name = intersects[0].object.parent.parent.name;         for(var j = 0; j < scene.children.length; j++ ) {             if(scene.children[j].name == name) {                 // found same model intersects, change texture                 changetexture(j);             }         }     } }  function getoffset(event) {     // calcs layerx / layery clicked element     var el = event.target,         x = 0,         y = 0;      while (el && !isnan(el.offsetleft) && !isnan(el.offsettop)) {         x += el.offsetleft - el.scrollleft;         y += el.offsettop - el.scrolltop;         el = el.offsetparent;     }      x = event.clientx - x;     y = event.clienty - y;      return { x: x, y: y }; }  function prepareobj(object, name){     // general configuration of .obj files while loading     object.position.y = -3;     object.traverse(function(child) {         if(child instanceof three.mesh) {             child.material.map = three.imageutils.loadtexture("images/texture.jpg");             child.material.needsupdate = true;         }     });     object.name = name;     scene.add(object); }  function animate() {     // on every frame need calculate new camera position     // , have @ center of our scene.     requestanimationframe(animate);     controls.update();     camera.lookat(scene.position);     renderer.render(scene, camera); } 

currently there situation need 2 or 3 of bodies per page. not possible because if calling init("myid"); , init("myid2"); override variables above.

so question is: how can rewrite class? if having in form of real class there should no name-clashes correct? tried adding this.variable everywhere , change structure got errors. there way rewrite class? thanks!