javascript - THREE.js object removing -


i have trouble dealing three.js.

the task is, make car stops @ red light. have scene, , car moving, cant change light, no matter try. created sphere represents light, , button should change color. want call function, hides red light , shows green one.

however, when call function:

        function removesphere() {         scene.remove(sphere2);         render();} 

nothing happens. tried different variants, cant edit sphere in way.

could me this?

full code below:

<head>     <title>#16 three.js - colladaloader</title>     <meta http-equiv="content-type" content="text/html; charset=utf-8" />     <script type="text/javascript">     var kamera ="a";     var delta = 0.01;     var deltatmp = 0.01;      function kameraa() { kamera ="a";}      function kamerab() { kamera ="b";}      function kamerastartstop() {          if(delta == 0.0) {delta = deltatmp;}         else {delta = 0.0;}}      function kameraprawolewo() {          delta = -delta;         deltatmp = -deltatmp;}     </script> </head>  <body>     <div >      &nbsp &nbsp &nbsp &nbsp     <button onclick="kameraa();">kamera 1</button>      <button onclick="kamerab();">kamera b</button>     <button onclick="kamerastartstop();">kamera start/stop</button>     <button onclick="kameraprawolewo();">kamera prawo/lewo</button>     &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp     <button onclick="removesphere();">remove sphere</button>     <br />     </div>      <script src="js/three.js"></script>                      <script src="js/loaders/colladaloader.js"></script>      <script src="js/detector.js"></script>         <script>          if ( ! detector.webgl ) detector.addgetwebglmessage();         var container;         var camera, scene, renderer, objects;         var dae,dae1,dae2;         var loader = new three.colladaloader();         loader.options.convertupaxis = true;         var url='obj/auto20.dae';          loader.load( url, function ( collada ) {             dae = collada.scene;             dae.traverse( function ( child ) {                 if ( child instanceof three.skinnedmesh ) {                     var animation = new three.animation( child, child.geometry.animation );                     animation.play();                 }             } );              dae.scale.x = dae.scale.y = dae.scale.z = 200;             dae.position.y-=460;             dae.position.x-=4096;             dae.position.z+=512;             dae.updatematrix();              dae.traverse( function ( child ) {                 child.castshadow = true;                 child.receiveshadow = false;             } );                          init();             animate();         } );          function init() {              container = document.createelement( 'div' );             document.body.appendchild( container );              camera = new three.perspectivecamera( 45, window.innerwidth / window.innerheight, 1, 40000 );             camera.position.set( math.pow(2,13), 1024, 0);              scene = new three.scene();              scene.add( dae );             scene.add( dae1 );              // swiatla              var light1  = new three.directionallight( 0xffffff );             light1.castshadow = true;             light1.position.set(-2000, 2000, -5000);             light1.shadowcameranear = 1;              light1.shadowcamerafar = 16000;             light1.shadowcameraright   =  10000;             light1.shadowcameraleft    = -10000;             light1.shadowcameratop     =  10000;             light1.shadowcamerabottom  = -10000;         //  light1.shadowcameravisible = true;              scene.add( light1 );              var geometr = new three.spheregeometry( 100, 32, 32 );             var materi = new three.meshbasicmaterial( {color: 0xff0000} );             var sphere2 = new three.mesh( geometr, materi );             sphere2.position.set(200, 500, 500);             scene.add( sphere2 );           function removesphere() {         scene.remove(sphere2);         render();         }                scene.add( new three.ambientlight( 0xcccccc ) );               renderer = new three.webglrenderer();             renderer.setsize( window.innerwidth -16, window.innerheight - 64 ); //okno renderowania             renderer.shadowmapenabled=true;             renderer.shadowmaptype=three.pcfsoftshadowmap;              container.appendchild( renderer.domelement );              window.addeventlistener( 'resize', onwindowresize, false );               scene.fog = new three.fog( 0xbbddee, -2*1024, 32*1024 );  //mgla (kolor, near, far)            var texture = three.imageutils.loadtexture('img/dirt2.jpg');         texture.repeat.set( 64,32);          texture.wraps = three.repeatwrapping;         texture.wrapt = three.repeatwrapping;          texture.anisotropy = 16;           var planematerial = new three.meshbasicmaterial({map: texture});          var planegeometry = new three.planegeometry(math.pow(2,16), math.pow(2,15));           ( var = 0; < 2; ++ ) {         var plane = new three.mesh( planegeometry, planematerial );             plane.rotation.x = - math.pi / 2;              plane.position.y -= 512;             plane.position.z = i*(math.pow(2,15)+1024)-math.pow(2,14);              plane.castshadow = false;              plane.receiveshadow = true;               scene.add( plane );          }              var texture_1 = three.imageutils.loadtexture('img/asfalt4.jpg');          texture_1.repeat.set( 64,1);           texture_1.wraps = three.repeatwrapping;          texture_1.wrapt = three.repeatwrapping;          texture_1.anisotropy = 16;          var planematerial_1 = new three.meshbasicmaterial({map: texture_1});         var planegeometry_1= new three.planegeometry(math.pow(2,16), 1024);         var plane_1 = new three.mesh( planegeometry_1, planematerial_1 );             plane_1.rotation.x = - math.pi / 2;              plane_1.position.y -= 512;             plane_1.position.z += 512;              plane_1.castshadow = false;              plane_1.receiveshadow = true;               scene.add( plane_1 );             //======================================================================          var textures = ['img/desert/north.jpg',                         'img/desert/south.jpg',                         'img/desert/top.jpg',                         'img/desert/bottom.jpg',                         'img/desert/west.jpg',                         'img/desert/east.jpg'];          var materials = [];           for(var i=0;i<textures.length;i++) {             var texture = three.imageutils.loadtexture(textures[i]);             texture.anisotropy = renderer.getmaxanisotropy();             materials.push( new three.meshbasicmaterial({map: texture, side: three.backside}));           }                                                                                                 var geometry = new three.cubegeometry(32*1024,32*1024,32*1024);          var skybox = new three.mesh( geometry, new three.meshfacematerial( materials ));           skybox.position.y -= 1024;          scene.add( skybox );            }          function onwindowresize() {              camera.aspect = window.innerwidth / window.innerheight;             camera.updateprojectionmatrix();              renderer.setsize( window.innerwidth -16, window.innerheight - 64);         }          function animate() {             requestanimationframe( animate );             render();         }           var = new three.vector3( 1,2,0 );         var clock = new three.clock();         var kat = 0;               function render() {             kat += delta;                 if (kamera=="a"){             camera.position.x = math.cos( kat ) * math.pow(2,13);             camera.position.y = 1024;             camera.position.z = math.sin( kat ) * math.pow(2,13);             camera.lookat( scene.position );             }         else{                camera.position.x = 0;             camera.position.y = 4;             camera.position.z = 0;              a.x = math.cos( kat ) * 8;             a.y = 2;             a.z = math.sin( kat ) * 8;              camera.lookat( );             }               dae.position.x  += 16;                if (dae.position.x>math.pow(2,14)) {                     dae.position.x=-math.pow(2,14);}                  three.animationhandler.update( clock.getdelta() );               renderer.render( scene, camera );         }         </script> </body> 

try this:

when adding sphere scene, set unique name sphere this:

sphere.name = "trololol"; 

then when want remove sphere scene, can this:

var sphereobject = scene.getobjectbyname("trololol"); scene.remove(sphereobject); 

Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -