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 >         <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>                 <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
Post a Comment