locked
how do i make this javascript function to appear on button click n disppear and another function when 2nd button is clicked RRS feed

  • Question

  • User186897 posted

    I have this below 3js javascript function...I want a button to be clicked and then this function to take place..how do I do that on button click....this right comes up when page is opened but I want it to come up only when a button is clicked and I want function init1() to happen when second button is clicked...I want 1st one to disappear..how do I do that?

    <asp:button runat="server" id="submit1" Text="submit1" />
    <asp:button runat="server" id="submit2" Text="submit2" />

    <script src="js/three.min.js"></script> <script src="js/three.js"></script> <script src="js/controls/TrackballControls.js"></script> <script src="js/libs/stats.min.js"></script> <script> var container, stats; var camera, controls, scene, renderer; var objects = []; var plane = new THREE.Plane(); var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(), offset = new THREE.Vector3(), intersection = new THREE.Vector3(), INTERSECTED, SELECTED; init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; // camera.position.y = 1500; controls = new THREE.TrackballControls( camera ); controls.rotateSpeed = 1.0; controls.zoomSpeed = 1.2; controls.panSpeed = 0.8; controls.noZoom = false; controls.noPan = false; controls.staticMoving = true; controls.dynamicDampingFactor = 0.3; scene = new THREE.Scene(); scene.add( new THREE.DirectionalLight( 0x505050 ) ); // var light = new THREE.PointLight( 0xffffff, 0.9 ); // camera.add(light); scene.add( camera ); var geometry = new THREE.BoxGeometry(250, 250, 250); for (var i = 0; i < 1; i++) { var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff })); var ax = ay = az = 0 object.position.x = ax; object.position.y = ay; object.position.z = az; object.scale.x = 2; object.scale.y = 2; object.scale.z = 2; //object.position.x = Math.random() * 1000 - 500; //object.position.y = Math.random() * 600 - 300; //object.position.z = Math.random() * 800 - 400; //object.rotation.x = Math.random() * 2 * Math.PI; //object.rotation.y = Math.random() * 2 * Math.PI; //object.rotation.z = Math.random() * 2 * Math.PI; //object.scale.x = Math.random() * 2 + 1; //object.scale.y = Math.random() * 2 + 1; //object.scale.z = Math.random() * 2 + 1; //object.castShadow = true; //object.receiveShadow = true; //top scene.add(object); light = new THREE.DirectionalLight(0x0DEDDF); light.position.set(0, 1, 0); scene.add(light); //bottom light = new THREE.DirectionalLight(0x0DEDDF); light.position.set(0, -1, 0); scene.add(light); //back light = new THREE.DirectionalLight(0xB685F3); light.position.set(1, 0, 0); scene.add(light); // front light = new THREE.DirectionalLight(0xB685F3); light.position.set(-1, 0, 0); scene.add(light); //right light = new THREE.DirectionalLight(0x89A7F5); light.position.set(0, 0, 1); scene.add(light); //left light = new THREE.DirectionalLight(0x89A7F5); light.position.set(0, 0, -1); scene.add(light); objects.push(object); } //var material = new THREE.MeshBasicMaterial({ // map: dynamicTexture.texture //}) //var mesh = new THREE.Mesh(geometry, material); //scene.add(mesh); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setClearColor( 0xf0f0f0 ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.sortObjects = false; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFShadowMap; container.appendChild( renderer.domElement ); //var info = document.createElement( 'div' ); //info.style.position = 'absolute'; //info.style.top = '10px'; //info.style.width = '100%'; //info.style.textAlign = 'center'; //info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - draggable cubes'; //container.appendChild( info ); stats = new Stats(); container.appendChild( stats.dom ); //renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false ); //renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false ); //renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false ); window.addEventListener('resize', onWindowResize, false); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); render(); stats.update(); } function render() { controls.update(); renderer.render(scene, camera); }
    function init1()
    {

    Wednesday, November 23, 2016 10:00 AM

All replies

  • User-707554951 posted

    Hi Lexi85,

    From your description and code, I suggest you could try the following code:

     <script src="../Scripts/jquery-3.1.1.min.js"></script>
        <script src="js/three.min.js"></script> <script src="js/three.js"></script>
        <script src="js/controls/TrackballControls.js"></script>
        <script src="js/libs/stats.min.js"></script>
        <script type="text/javascript">
            var flag=true;
            $(document).ready(function () {
                $("#submit1").click(function () {
                    if (flag) {
                        // your code here
                     // var container, stats; var camera, controls, scene ......
                        function init1() {
                            //your code here
                        }
                    }
                });
                $("#submit2").click(function () {               
                    // your code here
                   // var container, stats; var camera, controls, scene ......
                        function init1() {
                            //your code here                  
                        }
                        flag = false;
                })
            } )
        </script>

    Best regards

    Cathy

    Thursday, November 24, 2016 7:11 AM
  • User186897 posted

    sorry the first funtion init() is on page load and funtion init1() is on button click..how do I do that?

    Also where do i find jquery-3.1.1.min.js?

    Also it shows error $ undefined...

    Thursday, November 24, 2016 8:08 AM
  • User-707554951 posted

    Hi Lexi85,

    sorry the first funtion init() is on page load and funtion init1() is on button click..how do I do that?

    I read your description, but I not sure what you want to tell me. would you please explain on this in detail?

    Also where do i find jquery-3.1.1.min.js?

    For your problem, you need to install Jquery through NuGet in your webApplication.

    Then you could find an folder named scripts create automatically. you will find Jquery file in it.

    Best regards

    Cathy

    Thursday, November 24, 2016 9:03 AM
  • User186897 posted

    Thanks...

     <script type="text/javascript">
            var flag=true;
            $(document).ready(function () {
                $("#submit1").click(function () {
                    if (flag) {
                        // your code here
                     // var container, stats; var camera, controls, scene ......
                        function init1() {
                            //your code here
                        }
                    }
                });
                $("#submit2").click(function () {               
                    // your code here
                   // var container, stats; var camera, controls, scene ......
                        function init1() {
                            //your code here                  
                        }
                        flag = false;
                })
            } )
        </script>


    I mean funtion init() should happen on pageload and functioninit1() should happen when page is loaded and a button is clicked....how do I change above javascript code for that?Because the below code is for submit1 and submit2 how do I chnage submit 1 to pageload?

    I will explain the situation I want

    On page load..function init() should take place....and after that when a button"submit2" is clicked I want the function init() result to disappear and functioinit1() result should appear..how do I do that?

    Right now I have below code but even after clicking submit button the result is the same as function init() it doesnot change to function init1() result

      <script src="/Scripts/jquery-3.1.1.min.js"></script>
            <script src="js/three.min.js"></script>
             <script src="js/three.js"></script>
            <script src="js/controls/TrackballControls.js"></script>
    
    
            <script src="js/libs/stats.min.js"></script>
            <script type="text/javascript">
            var flag=true;
            $(document).ready(function () {
                
                $("#submit2").click(function () {               
                    var container //   , stats;
                    var camera, controls, scene, renderer;
                    var objects = [];
                    var plane = new THREE.Plane();
                    var raycaster = new THREE.Raycaster();
                    var mouse = new THREE.Vector2(),
                    offset = new THREE.Vector3(),
                    intersection = new THREE.Vector3(),
                    INTERSECTED, SELECTED;
    
                    init1();
                    animate();
    
                    function init1() {
    //code here
     }
                  
                      
                        flag = false;
                })
            } )
        </script>
            <script>
                var container, stats;
    
                var camera, controls, scene, renderer;
    
                var objects = [];
    
                var plane = new THREE.Plane();
    
                var raycaster = new THREE.Raycaster();
    
                var mouse = new THREE.Vector2(),
    
    			offset = new THREE.Vector3(),
    
    			intersection = new THREE.Vector3(),
    
    			INTERSECTED, SELECTED;
    
    
    
                init();
    
                animate();
                function init() {
    

    Thursday, November 24, 2016 9:08 AM
  • User-707554951 posted

    Hi Lexi85,

    from your description, following  code may is what you want. please refer to it.

      <script src="../Scripts/jquery-3.1.1.min.js"></script>
        <script src="js/three.min.js"></script> <script src="js/three.js"></script>
        <script src="js/controls/TrackballControls.js"></script>
        <script src="js/libs/stats.min.js"></script>
        <script type="text/javascript">
            //init() should happen on pageload 
            $(document).ready(function () {
                
                init();
            })
            function init() {
                document.getElementById("Label1").innerHTML = "NewLabel";
            }
            //init() result to disappear through calling the following function
    function Concelinit() { document.getElementById("Label1").innerHTML = "Label1"; } var flag = true function submit1Method() {
    // call following to make init() result disapper Concelinit(); alert("button1"); if (flag == true) { function init1() { alert("button1init1"); } init1(); } return false; } function submit2Method() { function init1() { alert("button2flag"); //your code here } init1(); // after click the submit2 button, the init1() function will not be hit next time we click submit1 button flag = false; return false; } </script>

    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            <asp:button runat="server" id="submit1" Text="submit1" OnClientClick="return submit1Method();"/>
            <asp:button runat="server" id="submit2" Text="submit2" OnClientClick="return submit2Method();"/>

    Best regards

    Cathy

    Thursday, November 24, 2016 11:04 AM
  • User186897 posted

    Thanks Cathy...but can you please explain me what is flag used for here?

    Thursday, November 24, 2016 11:26 AM
  • User-707554951 posted

    Hi Lexi85,

    The usage of flag variable is  aim to realize that after click the submit2 button, the init1() function will not be hit next time we click  submit1 button.

    At beginning, the flag be set to true.  So init1() function in submit1 button will be hit when we click submit1 button.

    However, after we click submit2  button. the flag be set to false, So, if we click submit1 button next. if (flag) statement not pass. So init1() function in submit1 button will not be hit.

    perhaps this is not what you want. I display it with you for I am not sure whether you need it. If you doesn't need it. Just ignore it.

    Best regards

    Cathy

    Thursday, November 24, 2016 11:40 AM
  • User186897 posted

    Thank Cathy I am still not geting what I need..ok let me start over again...I am displaying a cube using 3js...when page is loaded...which is in function start() there is another button on the page saying different cube....when the user click this button...the previous cube which is displayed should disappear and different cube should appear which is in funtion startdiffcube()

    now I have used below format but even then it remain the same after clicking button different cube doesn't appear. I know it must be simple issue with javascript but I am not sure how to to do it...I really appreciate ur help..but plz help me figure this out

    <script type="text/javascript">
         $(document).ready(function () {	
             start();
         })
         function start() {
    function init() {
    //creates cube here
    }
    }
    function startdiffcube() {
    function init1() {
    //should create diff cube
    }
    }
    
    
     <asp:button ID="submit2" runat="server" Text="submit"  align="right" OnClientClick="return startdiffcube();"/>
    

    It is in the above format, so when page is loaded cube is formed, but when I click "submit" button different cube is not formed..the page shows same again..so dont know what syntax is wrong in above code

    Thursday, November 24, 2016 12:19 PM
  • User-707554951 posted

    Hi Lexi85,

    I have got what you want to say and what you want to do.  

    <script type="text/javascript">
         $(document).ready(function () {	
             start();
         })
         function start() {
    function init() {
    //creates cube here
    }

    function Removecube() {
    //remove cube you have create from scene here } function startdiffcube() {
    //remove cube from scene firstly
    Removecube(); function init1() { //should create diff cube } init1() ; } <asp:button ID="submit2" runat="server" Text="submit" align="right" OnClientClick="return startdiffcube();"/>

    Best regards

    Cathy

    Thursday, November 24, 2016 12:49 PM
  • User186897 posted

    the below way i created the cube...how do I remove it?

    <script>
                var container, stats;
    
                var camera, controls, scene, renderer;
    
                var objects = [];
    
                var plane = new THREE.Plane();
    
                var raycaster = new THREE.Raycaster();
    
                var mouse = new THREE.Vector2(),
    
    			offset = new THREE.Vector3(),
    
    			intersection = new THREE.Vector3(),
    
    			INTERSECTED, SELECTED;
    
    
    
                init();
    
                animate();
                function init() {
    
    
    
                    container = document.createElement( 'div' );
    
                    document.body.appendChild( container );
    
    
    
                    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
    
                    camera.position.z = 1000;
                  
    
    
                    controls = new THREE.TrackballControls( camera );
    
                    controls.rotateSpeed = 1.0;
    
                    controls.zoomSpeed = 1.2;
    
                    controls.panSpeed = 0.8;
    
                    controls.noZoom = false;
    
                    controls.noPan = false;
    
                    controls.staticMoving = true;
    
                    controls.dynamicDampingFactor = 0.3;
    
    
    
                    scene = new THREE.Scene();
    
    
    
                    scene.add( new THREE.DirectionalLight( 0x505050 ) );
    
    
    
                
    
                    scene.add( camera );
    
    
    
                    var geometry = new THREE.BoxGeometry(250, 250, 250);
                  
                    
                    for (var i = 0; i < 1; i++) {
    
    
    
                       // var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }));
                        var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ ambient: 0xffffff,map: THREE.ImageUtils.loadTexture( '/imgs/12.jpg' ) }));
                        var ax = ay = az = 0
    
                        object.position.x = ax;
                        object.position.y = ay;
                        object.position.z = az;
                        object.scale.x = 2;
                        object.scale.y = 2;
                        object.scale.z = 2;
    
                        //object.position.x = Math.random() * 150 - 70;
    
                        //object.position.y = Math.random() * 80 - 30;
    
                        //object.position.z = Math.random() * 80 - 40;
    
    
    
                        //object.rotation.x = Math.random() * 1 * Math.PI;
    
                        //object.rotation.y = Math.random() * 1 * Math.PI;
    
                        //object.rotation.z = Math.random() * 1 * Math.PI;
    
    
    
                        //object.scale.x = Math.random() * 2 + 1;
    
                        //object.scale.y = Math.random() * 2 + 1;
    
                        //object.scale.z = Math.random() * 2 + 1;
    
    
    
                        //object.castShadow = true;
    
                        //object.receiveShadow = true;
    
    
                        //top
                        scene.add(object);
                        light = new THREE.DirectionalLight(0xD3D3D3);
                        light.position.set(0, 1, 0);
                        scene.add(light);
                        //bottom
                        light = new THREE.DirectionalLight(0xD3D3D3);
                        light.position.set(0, -1, 0);
                        scene.add(light);
                        //back
                        light = new THREE.DirectionalLight(0xD3D3D3);
                        light.position.set(1, 0, 0);
                        scene.add(light);
                        // front
                        light = new THREE.DirectionalLight(0xD3D3D3);
                        light.position.set(-1, 0, 0);
                        scene.add(light);
                        //right
                        light = new THREE.DirectionalLight(0xD3D3D3);
                        light.position.set(0, 0, 1);
                        scene.add(light);
                        //left
                        light = new THREE.DirectionalLight(0xD3D3D3);
                        light.position.set(0, 0, -1);
                        scene.add(light);
                        objects.push(object);
    
                    }
    
    
                    var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('/1.png') });
                    var mesh = new THREE.Mesh(geometry, material);
    
                    scene.add(mesh);
    
                    renderer = new THREE.WebGLRenderer( { antialias: true } );
    
                    renderer.setClearColor( 0xf0f0f0 );
    
                    renderer.setPixelRatio( window.devicePixelRatio );
    
                    renderer.setSize( window.innerWidth, window.innerHeight );
    
                    renderer.sortObjects = false;
    
    
    
                    renderer.shadowMap.enabled = true;
    
                    renderer.shadowMap.type = THREE.PCFShadowMap;
    
    
    
                    container.appendChild( renderer.domElement );
    
    
    
                    
    
    
    
                    stats = new Stats();
    
                    container.appendChild( stats.dom );
    
    
    
                    //renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
    
                    //renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
    
                    //renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
                    window.addEventListener('resize', onWindowResize, false);
    
    
    
                }
    
    
    
                function onWindowResize() {
    
    
    
                    camera.aspect = window.innerWidth / window.innerHeight;
    
                    camera.updateProjectionMatrix();
    
    
    
                    renderer.setSize(window.innerWidth, window.innerHeight);
    
    
    
                }
                function animate() {
    
    
    
                    requestAnimationFrame(animate);
    
    
    
                    render();
    
                    stats.update();
    
    
    
                }
    
    
    
                function render() {
    
    
    
                    controls.update();
    
    
    
                    renderer.render(scene, camera);
    
    
    
                }
                </script>

    Thursday, November 24, 2016 1:10 PM
  • User186897 posted

    Can someone plz help me remove cube code?

    Friday, November 25, 2016 7:55 AM
  • User186897 posted

    I have done below code..but when I click submit the cube just comes and goes away it doesnot stay on the page...what do I do..how do I change this code?

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm4.aspx.vb" Inherits="Cubeapp.WebForm4" %>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
    	</head>
    	<body>
            <form id="form1" runat="server">
         <script src="/Scripts/jquery-3.1.1.min.js"></script>
            <script src="js/three.min.js"></script>
             <script src="js/three.js"></script>
            <script src="js/controls/TrackballControls.js"></script>
    
    
            <script src="js/libs/stats.min.js"></script>
    <!-- 		<script src="stats.min.js"></script>    -->
    <!-- Controls Panel -->
       
     
                           
    
          
               
                    <asp:Label ID="resultvalue" runat="server" Text="0" style="display:none"/>
                <br />
                <br />
                <br />
                <br />
                 <asp:button ID="submit1" runat="server" Text="submit1"  align="right" autopostback="true"  />
             <asp:button ID="submit2" runat="server" Text="submit2"  align="right"  />
    
              
               
                    
    <!-- 3js canvas -->
        
       
           <div id='canvas'  ></div>
       
            <div></div>
     <script type="text/javascript">
         $(document).ready(function () {	
             //    start();
             //})
             $("#submit1").click(function () {
    
                 var container, stats;
    
                 var camera, controls, scene, renderer;
    
                 var objects = [];
    
                 var plane = new THREE.Plane();
    
                 var raycaster = new THREE.Raycaster();
    
                 var mouse = new THREE.Vector2(),
    
                 offset = new THREE.Vector3(),
    
                 intersection = new THREE.Vector3(),
    
                 INTERSECTED, SELECTED;
    
    
    
                 init();
    
                 animate();
                 function init() {
    
    
    
                     //container = document.createElement( 'div' );
                     container = document.getElementById('canvas');
                     // document.body.appendChild( container );
    
    
    
                     camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
    
                     camera.position.z = 1000;
    
    
    
                     controls = new THREE.TrackballControls(camera);
    
                     controls.rotateSpeed = 1.0;
    
                     controls.zoomSpeed = 1.2;
    
                     controls.panSpeed = 0.8;
    
                     controls.noZoom = false;
    
                     controls.noPan = false;
    
                     controls.staticMoving = true;
    
                     controls.dynamicDampingFactor = 0.3;
    
    
    
                     scene = new THREE.Scene();
    
    
    
                     scene.add(new THREE.DirectionalLight(0x505050));
    
    
    
    
    
                     scene.add(camera);
    
    
    
                     var geometry = new THREE.BoxGeometry(250, 250, 250);
    
    
                     for (var i = 0; i < 1; i++) {
    
    
    
    
                         var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ ambient: 0xffffff, map: THREE.ImageUtils.loadTexture('/imgs/12.jpg') }));
                         var ax = ay = az = 0
    
                         object.position.x = ax;
                         object.position.y = ay;
                         object.position.z = az;
                         object.scale.x = 2;
                         object.scale.y = 2;
                         object.scale.z = 2;
    
    
                         //top
                         scene.add(object);
                         light = new THREE.DirectionalLight(0xD3D3D3);
                         light.position.set(0, 1, 0);
                         scene.add(light);
                         //bottom
                         light = new THREE.DirectionalLight(0xD3D3D3);
                         light.position.set(0, -1, 0);
                         scene.add(light);
                         //back
                         light = new THREE.DirectionalLight(0xD3D3D3);
                         light.position.set(1, 0, 0);
                         scene.add(light);
                         // front
                         light = new THREE.DirectionalLight(0xD3D3D3);
                         light.position.set(-1, 0, 0);
                         scene.add(light);
                         //right
                         light = new THREE.DirectionalLight(0xD3D3D3);
                         light.position.set(0, 0, 1);
                         scene.add(light);
                         //left
                         light = new THREE.DirectionalLight(0xD3D3D3);
                         light.position.set(0, 0, -1);
                         scene.add(light);
                         objects.push(object);
    
                     }
    
    
                     var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('/1.png') });
                     var mesh = new THREE.Mesh(geometry, material);
    
                     scene.add(mesh);
    
                     renderer = new THREE.WebGLRenderer({ antialias: true });
    
                     renderer.setClearColor(0xf0f0f0);
    
                     renderer.setPixelRatio(window.devicePixelRatio);
    
                     renderer.setSize(window.innerWidth, window.innerHeight);
    
                     renderer.sortObjects = false;
    
    
    
                     renderer.shadowMap.enabled = true;
    
                     renderer.shadowMap.type = THREE.PCFShadowMap;
    
    
    
                     container.appendChild(renderer.domElement);
    
    
    
    
    
    
    
                     stats = new Stats();
    
                     container.appendChild(stats.dom);
    
    
    
    
                     window.addEventListener('resize', onWindowResize, false);
    
    
    
                 }
    
    
    
                 function onWindowResize() {
    
    
    
                     camera.aspect = window.innerWidth / window.innerHeight;
    
                     camera.updateProjectionMatrix();
    
    
    
                     renderer.setSize(window.innerWidth, window.innerHeight);
    
    
    
                 }
                 function animate() {
    
    
    
                     requestAnimationFrame(animate);
    
    
    
                     render();
    
                     stats.update();
    
    
    
                 }
    
    
    
                 function render() {
    
    
    
                     controls.update();
    
    
    
                     renderer.render(scene, camera);
    
    
    
                 }
    
             });
           
             function Removecube() {
    
                 var container, stats;
    
                 var camera, controls, scene, renderer;
    
                 var objects = [];
    
                 var plane = new THREE.Plane();
    
                 var raycaster = new THREE.Raycaster();
    
                 var mouse = new THREE.Vector2(),
    
                 offset = new THREE.Vector3(),
    
                 intersection = new THREE.Vector3(),
    
                 INTERSECTED, SELECTED;
    
    
    
                 init();
    
               
                 function init() {
    
    
    
                     //container = document.createElement( 'div' );
                     container = document.getElementById('canvas');
                     // document.body.appendChild( container );
    
    
    
                     camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
    
                     camera.position.z = 1000;
    
    
    
                     controls = new THREE.TrackballControls(camera);
    
                     controls.rotateSpeed = 1.0;
    
                     controls.zoomSpeed = 1.2;
    
                     controls.panSpeed = 0.8;
    
                     controls.noZoom = false;
    
                     controls.noPan = false;
    
                     controls.staticMoving = true;
    
                     controls.dynamicDampingFactor = 0.3;
    
    
    
                     scene = new THREE.Scene();
    
    
    
                     scene.add(new THREE.DirectionalLight(0x505050));
    
    
    
    
    
                     scene.add(camera);
    
    
    
                     var geometry = new THREE.BoxGeometry(250, 250, 250);
    
    
                     for (var i = 0; i < 1; i++) {
    
    
    
    
                         var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ ambient: 0xffffff, map: THREE.ImageUtils.loadTexture('/imgs/12.jpg') }));
                         var ax = ay = az = 0
    
                         object.position.x = ax;
                         object.position.y = ay;
                         object.position.z = az;
                         object.scale.x = 2;
                         object.scale.y = 2;
                         object.scale.z = 2;
    
    
                         //top
                         scene.add(object);
                         light = new THREE.DirectionalLight(0xD3D3D3);
                         light.position.set(0, 1, 0);
                         scene.add(light);
                         //bottom
                         light = new THREE.DirectionalLight(0xD3D3D3);
                         light.position.set(0, -1, 0);
                         scene.add(light);
                         //back
                         light = new THREE.DirectionalLight(0xD3D3D3);
                         light.position.set(1, 0, 0);
                         scene.add(light);
                         // front
                         light = new THREE.DirectionalLight(0xD3D3D3);
                         light.position.set(-1, 0, 0);
                         scene.add(light);
                         //right
                         light = new THREE.DirectionalLight(0xD3D3D3);
                         light.position.set(0, 0, 1);
                         scene.add(light);
                         //left
                         light = new THREE.DirectionalLight(0xD3D3D3);
                         light.position.set(0, 0, -1);
                         scene.add(light);
                         objects.push(object);
    
                     }
    
    
                     var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('/1.png') });
                     var mesh = new THREE.Mesh(geometry, material);
    
                     scene.add(mesh);
    
                     renderer = new THREE.WebGLRenderer({ antialias: true });
    
                     renderer.setClearColor(0xf0f0f0);
    
                     renderer.setPixelRatio(window.devicePixelRatio);
    
                     renderer.setSize(window.innerWidth, window.innerHeight);
    
                     renderer.sortObjects = false;
    
    
    
                     renderer.shadowMap.enabled = true;
    
                     renderer.shadowMap.type = THREE.PCFShadowMap;
    
    
    
                     container.appendChild(renderer.domElement);
    
    
    
    
    
    
    
                     stats = new Stats();
    
                     container.appendChild(stats.dom);
    
    
    
    
                   //  window.addEventListener('resize', onWindowResize, false);
    
                     scene.remove(mesh);
                     scene.remove(light);
                     scene.remove(camera);
    
    
                 }
    
             }
            
    
             $("#submit2").click(function () {   
                
                     Removecube();
                     var container //   , stats;
                     var camera, controls, scene, renderer;
                     var objects = [];
                     var plane = new THREE.Plane();
                     var raycaster = new THREE.Raycaster();
                     var mouse = new THREE.Vector2(),
                     offset = new THREE.Vector3(),
                     intersection = new THREE.Vector3(),
                     INTERSECTED, SELECTED;
    
                     init1();
                     animate();
    
                     function init1() {
    
                         //container = document.createElement( 'div' );
                         container = document.getElementById('canvas');  ///////
                         // document.body.appendChild( container );
    
                         camera = new THREE.PerspectiveCamera(70, container.offsetWidth / container.offsetHeight, 1, 10000);  ///////
                         camera.position.z = 2000;
    
                         controls = new THREE.TrackballControls(camera, container); //**
                         controls.rotateSpeed = 1.0;
                         controls.zoomSpeed = 1.2;
                         controls.panSpeed = 0.8;
                         controls.noZoom = false;
                         controls.noPan = false;
                         controls.staticMoving = true;
                         controls.dynamicDampingFactor = 0.3;
    
                         scene = new THREE.Scene();
    
                         scene.add(new THREE.AmbientLight(0x505050));
    
                         var light = new THREE.SpotLight(0xffffff, 1.5);
                         light.position.set(0, 500, 2000);
                         light.castShadow = true;
    
                         light.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(50, 1, 200, 10000));
                         light.shadow.bias = -0.00022;
    
                         light.shadow.mapSize.width = 2048;
                         light.shadow.mapSize.height = 2048;
    
                         scene.add(light);
                         var resultlabel = (document.getElementById('resultvalue').innerHTML);
                         if (resultlabel == 0) {
    
                             var geometry = new THREE.BoxGeometry(40, 40, 40);
                             var ax = ay = az = -400;
                             for (var i = 0; i < 512; i++) {
                                 //var newColor = (Math.random() * 0x1) * 0x100 + (Math.random() * 0x1) * 0x10000 + (Math.random() * 0x1) * 0x1000000;
                                 var newColor;
                                 // var opaqueness = 0.8;
                                 var colornum = Math.floor(Math.random() * 4);
                                 if (colornum == 0) newColor = 0x550055;
                                 if (colornum == 1) newColor = 0x555500;
                                 if (colornum == 2) newColor = 0x003355;
                                 if (colornum == 3) newColor = 0x022755;
    
                                 if (colornum == 4) newColor = 0x555501;
    
    
                                 if (colornum == 5) newColor = 0x552E55;
    
    
                                 var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: newColor }));
    
    
                                 object.position.x = ax;
                                 object.position.y = ay;
                                 object.position.z = az;
    
                                 object.scale.x = 2;
                                 object.scale.y = 2;
                                 object.scale.z = 2;
    
                                 object.castShadow = true;
                                 object.receiveShadow = true;
    
                                 scene.add(object);
    
                                 objects.push(object);
    
                                 ax = ax + 100;
                                 if (ax > 300) {
                                     ax = -400;
                                     ay = ay + 100;
                                 }
                                 if (ay > 300) {
                                     ay = -400;
                                     az = az + 100;
                                 }
    
                             }
                         }
    
                         if (resultlabel == 1) {
                             var geometry = new THREE.BoxGeometry(40, 40, 40);
    
                             var ax = ay = az = -400;
    
    
    
                             for (var i = 0; i < 512; i++) {
                                 var newColor;
                                 var opaqueness = 0.8;
                                 var colornum = Math.floor(Math.random() * 12);
                                 if (colornum == 0)
                                     newColor = 0x555500;
    
                                 if (colornum == 1) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 2) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 3) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 4) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 5) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 6) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 7) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 8) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 7) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 8) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 9) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 10) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 11) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 12) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 13) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 14) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 15) {
                                     newColor = 0x555500;
                                     opaqueness = 0.05;
                                 }
    
    
                                 var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: newColor, transparent: true, opacity: opaqueness }));
    
    
                                 object.position.x = ax;
                                 object.position.y = ay;
                                 object.position.z = az;
    
                                 object.scale.x = 2;
                                 object.scale.y = 2;
                                 object.scale.z = 2;
    
                                 object.castShadow = true;
                                 object.receiveShadow = true;
    
                                 scene.add(object);
    
                                 objects.push(object);
    
                                 ax = ax + 100;
                                 if (ax > 300) {
                                     ax = -400;
                                     ay = ay + 100;
                                 }
                                 if (ay > 300) {
                                     ay = -400;
                                     az = az + 100;
                                 }
    
                             }
    
                         }
                         if (resultlabel == 2) {
                             var geometry = new THREE.BoxGeometry(40, 40, 40);
    
                             var ax = ay = az = -400;
    
    
    
                             for (var i = 0; i < 512; i++) {
                                 var newColor;
                                 var opaqueness = 0.8;
                                 var colornum = Math.floor(Math.random() * 12);
                                 if (colornum == 0) newColor = 0xffff00;
                                 if (colornum == 1) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 2) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 3) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 4) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 5) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 6) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 7) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 8) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 9) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
    
                                 if (colornum == 10) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
    
                                 if (colornum == 11) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 12) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 13) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 14) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 15) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 16) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
    
                                 var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: newColor, transparent: true, opacity: opaqueness }));
    
    
                                 object.position.x = ax;
                                 object.position.y = ay;
                                 object.position.z = az;
    
                                 object.scale.x = 2;
                                 object.scale.y = 2;
                                 object.scale.z = 2;
    
                                 object.castShadow = true;
                                 object.receiveShadow = true;
    
                                 scene.add(object);
    
                                 objects.push(object);
    
                                 ax = ax + 100;
                                 if (ax > 300) {
                                     ax = -400;
                                     ay = ay + 100;
                                 }
                                 if (ay > 300) {
                                     ay = -400;
                                     az = az + 100;
                                 }
    
                             }
    
                         }
                         if (resultlabel == 3) {
                             var geometry = new THREE.BoxGeometry(50, 50, 50);
    
                             var ax = ay = az = -400;
    
    
    
                             for (var i = 0; i < 512; i++) {
                                 var newColor;
                                 var opaqueness = 0.8;
                                 var colornum = Math.floor(Math.random() * 12);
                                 if (colornum == 0) newColor = 0x022755;
                                 if (colornum == 1) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 2) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 3) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 4) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 5) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 6) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 7) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 8) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 9) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 10) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 11) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 12) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 13) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 14) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 15) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 16) {
                                     newColor = 0xffffff;
                                     opaqueness = 0.05;
                                 }
                                 var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: newColor, transparent: true, opacity: opaqueness }));
    
    
                                 object.position.x = ax;
                                 object.position.y = ay;
                                 object.position.z = az;
    
                                 object.scale.x = 2;
                                 object.scale.y = 2;
                                 object.scale.z = 2;
    
                                 object.castShadow = true;
                                 object.receiveShadow = true;
    
                                 scene.add(object);
    
                                 objects.push(object);
    
                                 ax = ax + 100;
                                 if (ax > 300) {
                                     ax = -400;
                                     ay = ay + 100;
                                 }
                                 if (ay > 300) {
                                     ay = -400;
                                     az = az + 100;
                                 }
    
                             }
    
                         }
                         if (resultlabel == 4) {
                             var geometry = new THREE.BoxGeometry(50, 50, 50);
    
                             var ax = ay = az = -400;
    
    
    
                             for (var i = 0; i < 512; i++) {
                                 var newColor;
                                 var opaqueness = 0.8;
                                 var colornum = Math.floor(Math.random() * 4);
                                 if (colornum == 0) newColor = 0x04B45F;
                                 if (colornum == 1) {
                                     newColor = 0x04B45F;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 2) {
                                     newColor = 0x04B45F;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 3) {
                                     newColor = 0x04B45F;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 4)
                                     newColor = 0x04B45F;
    
                                 if (colornum == 5) {
                                     newColor = 0x04B45F;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 3)
                                     newColor = 0x04B45F;
    
                                 var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: newColor, transparent: true, opacity: opaqueness }));
    
    
                                 object.position.x = ax;
                                 object.position.y = ay;
                                 object.position.z = az;
    
                                 object.scale.x = 2;
                                 object.scale.y = 2;
                                 object.scale.z = 2;
    
                                 object.castShadow = true;
                                 object.receiveShadow = true;
    
                                 scene.add(object);
    
                                 objects.push(object);
    
                                 ax = ax + 100;
                                 if (ax > 300) {
                                     ax = -400;
                                     ay = ay + 100;
                                 }
                                 if (ay > 300) {
                                     ay = -400;
                                     az = az + 100;
                                 }
    
                             }
    
                         }
                         if (resultlabel == 5) {
                             var geometry = new THREE.BoxGeometry(50, 50, 50);
    
                             var ax = ay = az = -400;
    
    
    
                             for (var i = 0; i < 512; i++) {
                                 var newColor;
                                 var opaqueness = 0.8;
                                 var colornum = Math.floor(Math.random() * 4);
                                 if (colornum == 0) newColor = 0xDBA901;
                                 if (colornum == 1) {
                                     newColor = 0xDBA901;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 2) {
                                     newColor = 0xDBA901;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 3) {
                                     newColor = 0xDBA901;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 4) {
                                     newColor = 0xDBA901;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 5) {
                                     newColor = 0xDBA901;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 3) {
                                     newColor = 0xDBA901;
                                     opaqueness = 0.05;
                                 }
    
    
                                 var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: newColor, transparent: true, opacity: opaqueness }));
    
    
                                 object.position.x = ax;
                                 object.position.y = ay;
                                 object.position.z = az;
    
                                 object.scale.x = 2;
                                 object.scale.y = 2;
                                 object.scale.z = 2;
    
                                 object.castShadow = true;
                                 object.receiveShadow = true;
    
                                 scene.add(object);
    
                                 objects.push(object);
    
                                 ax = ax + 100;
                                 if (ax > 300) {
                                     ax = -400;
                                     ay = ay + 100;
                                 }
                                 if (ay > 300) {
                                     ay = -400;
                                     az = az + 100;
                                 }
    
                             }
    
                         }
                         if (resultlabel == 6) {
                             var geometry = new THREE.BoxGeometry(50, 50, 50);
    
                             var ax = ay = az = -400;
    
    
    
                             for (var i = 0; i < 512; i++) {
                                 var newColor;
                                 var opaqueness = 0.8;
                                 var colornum = Math.floor(Math.random() * 4);
                                 if (colornum == 0) newColor = 0xFE2E64;
                                 if (colornum == 1) {
                                     newColor = 0xFE2E64;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 2) {
                                     newColor = 0xFE2E64;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 3) {
                                     newColor = 0xFE2E64;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 4) {
                                     newColor = 0xFE2E64;
                                     opaqueness = 0.05;
                                 }
                                 if (colornum == 5) {
                                     newColor = 0xFE2E64;
                                     opaqueness = 0.05;
                                 }
    
    
                                 var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: newColor, transparent: true, opacity: opaqueness }));
    
    
                                 object.position.x = ax;
                                 object.position.y = ay;
                                 object.position.z = az;
    
                                 object.scale.x = 2;
                                 object.scale.y = 2;
                                 object.scale.z = 2;
    
                                 object.castShadow = true;
                                 object.receiveShadow = true;
    
                                 scene.add(object);
    
                                 objects.push(object);
    
                                 ax = ax + 100;
                                 if (ax > 300) {
                                     ax = -400;
                                     ay = ay + 100;
                                 }
                                 if (ay > 300) {
                                     ay = -400;
                                     az = az + 100;
                                 }
    
                             }
    
                         }
    
                         renderer = new THREE.WebGLRenderer({ antialias: true });
                         renderer.setClearColor(0xf0f0f0);
                         renderer.setPixelRatio(container.devicePixelRatio); ///////
                         //renderer.setSize( window.innerWidth, window.innerHeight );
                         renderer.setSize(container.offsetWidth - 4, container.offsetHeight - 4);  ///////
                         renderer.sortObjects = false;
    
                         renderer.shadowMap.enabled = true;
                         renderer.shadowMap.type = THREE.PCFShadowMap;
    
                         container.appendChild(renderer.domElement);
    
                         // var info = document.createElement( 'div' );
                         // info.style.position = 'absolute';
                         // info.style.top = '10px';
                         // info.style.width = '100%';
                         // info.style.textAlign = 'center';
                         // info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - draggable cubes';
                         // container.appendChild( info );
    
                         //   stats = new Stats();
                         //   container.appendChild( stats.dom );
    
                         renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);
                         renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false);
                         renderer.domElement.addEventListener('mouseup', onDocumentMouseUp, false);
    
    
                         //window.addEventListener( 'resize', onWindowResize, false );
    
                     }
    
                     //function onWindowResize() {
    
                     //camera.aspect = container.innerWidth / container.innerHeight;
                     //camera.updateProjectionMatrix();
    
                     //renderer.setSize( container.innerWidth, container.innerHeight );
    
                     //}
    
                     function onDocumentMouseMove(event) {
    
                         event.preventDefault();
    
                         mouse.x = (event.clientX / container.innerWidth) * 2 - 1;  ///////
                         mouse.y = -(event.clientY / container.innerHeight) * 2 + 1;  ///////
    
                         raycaster.setFromCamera(mouse, camera);
    
                         if (SELECTED) {
    
                             if (raycaster.ray.intersectPlane(plane, intersection)) {
    
                                 SELECTED.position.copy(intersection.sub(offset));
    
                             }
    
                             return;
    
                         }
    
                         var intersects = raycaster.intersectObjects(objects);
    
                         if (intersects.length > 0) {
    
                             if (INTERSECTED != intersects[0].object) {
    
                                 if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
    
                                 INTERSECTED = intersects[0].object;
                                 INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
    
                                 plane.setFromNormalAndCoplanarPoint(
                                     camera.getWorldDirection(plane.normal),
                                     INTERSECTED.position);
    
                             }
    
                             container.style.cursor = 'pointer';
    
                         } else {
    
                             if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
    
                             INTERSECTED = null;
    
                             container.style.cursor = 'auto';
    
                         }
    
                     }
    
                     function onDocumentMouseDown(event) {
    
                         event.preventDefault();
    
                         raycaster.setFromCamera(mouse, camera);
    
                         var intersects = raycaster.intersectObjects(objects);
    
                         if (intersects.length > 0) {
    
                             controls.enabled = false;
    
                             SELECTED = intersects[0].object;
    
                             if (raycaster.ray.intersectPlane(plane, intersection)) {
    
                                 offset.copy(intersection).sub(SELECTED.position);
    
                             }
    
                             container.style.cursor = 'move';
    
                         }
    
                     }
    
                     function onDocumentMouseUp(event) {
    
                         event.preventDefault();
    
                         controls.enabled = true;
    
                         if (INTERSECTED) {
    
                             SELECTED = null;
    
                         }
    
                         container.style.cursor = 'auto';
    
                     }
    
                     //
    
                     function animate() {
    
                         requestAnimationFrame(animate);
    
                         render();
                         //   stats.update();
    
                     }
    
                     function render() {
    
                         controls.update();
    
                         renderer.render(scene, camera);
    
                     }
                          });
         })
         </script>
          </form>    
                
    	</body>
    </html>
    

    Friday, November 25, 2016 10:03 AM
  • User186897 posted

    Can someone plz help me  sort this out...

    Tuesday, November 29, 2016 8:43 AM