three.js - Pan is the only working thing for OrbitControls -


i trying program solar system can orbit around , pan added orbitcontrols project , pan working fine reason rotate , zoom aren't working. have tried copying other people's examples , cannot figure out wrong mine. don't know if computer, have no reason believe be.

<!doctype html>  <html>  <head>     <title>example 01.02 - first scene</title>     <script type="text/javascript" src="../libs/three.js"></script>     <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>     <script type="text/javascript" src="../libs/stats.js"></script>     <script type="text/javascript" src="../libs/dat.gui.js"></script>     <script type="text/javascript" src="../libs/orbitcontrols.js"></script>     <script type="text/javascript" src="../libs/chroma.js"></script>     <script type="text/javascript" src="../libs/dat.gui.js"></script>     <style>         body{             /* set margin 0 , overflow hidden, go fullscreen */             margin: 0;             overflow: hidden;         }     </style> </head> <body>  <div id="stats-output"> </div>  <!-- div hold output --> <div id="webgl-output"> </div>  <!-- javascript code runs our three.js examples --> <script type="text/javascript">      // once loaded, run our three.js stuff.     $(function () {          var stats = initstats();         var screen_width = window.innerwidth, screen_height = window.innerheight;         var clock = new three.clock();         // create scene, hold our elements such objects, cameras , lights.         var scene = new three.scene();          // create camera, defines we're looking at.         var camera = new three.perspectivecamera(45, window.innerwidth / window.innerheight, 1, 5000);         // position , point camera center of scene         camera.position.x = -150;         camera.position.y = 200;         camera.position.z = 150;         camera.lookat(scene.position);          // create render , set size         renderer = new three.webglrenderer( {antialias:true} );         renderer.setsize(screen_width, screen_height);          ccontrols = new three.orbitcontrols( camera, renderer.domelement );         ccontrols.damping = 0.2;         ccontrols.addeventlistener( 'change', render );          var ambilight = new three.ambientlight(0x747474)         scene.add(ambilight);          var pointlight = new three.pointlight(0xffffff);         pointlight.position.set(0, 0, 0);         pointlight.distance = 100;         scene.add(pointlight);          //create light box         var lightboxgeom = new three.spheregeometry(3000,50,50);         var lightboxmat = new three.meshphongmaterial({map: three.imageutils.loadtexture("./texturesandmodels/lightbox.png"), side: three.backside});         var lightbox = new three.mesh(lightboxgeom, lightboxmat);          //sun , glow         var sun = createmesh(new three.spheregeometry(20, 20, 20), "texture_sun.jpg", "texture_sun_disp.jpg", "texture_sun_spec.jpg");         sun.shading = three.noshading;         var spritematerial = new three.spritematerial(          {              map: new three.imageutils.loadtexture( "texturesandmodels/glow.png" ),              usescreencoordinates: false, alignment: three.spritealignment.center,             color: 0xffcc00, transparent: false, blending: three.additiveblending         });         var sprite = new three.sprite( spritematerial );         sprite.scale.set(100, 100, 1.0);         sun.add(sprite);              //mercury         var mercury = createmesh(new three.spheregeometry(1.50, 20, 20), "texture_mercury.jpg", "texture_mercury_disp.jpg", "texture_mercury_spec.jpg", "texture_mercury_nrm.jpg");          //venus         var venus = createmesh(new three.spheregeometry(3.80, 20, 20), "texture_venus_surface.jpg", "texture_venus_surface_disp.jpg", "texture_venus_surface_spec.jpg", "texture_venus_surface_nrm.jpg");          //earth , clouds         var earth = createmesh(new three.spheregeometry(4.00, 20, 20), "colormap.jpg", "bump2.jpg", "specmask2.png", "colormap_nrm.jpg");          //mars         var mars = createmesh(new three.spheregeometry(2.10, 20, 20), "texture_mars.jpg", "texture_mars_disp.jpg", "texture_mars_spec.jpg", "texture_mars_nrm.jpg");          //jupiter         var jupiter = createmesh(new three.spheregeometry(18.7, 20, 20), "texture_jupiter.jpg", "texture_jupiter_disp.jpg", "texture_jupiter_spec.jpg", "texture_jupiter_nrm.jpg");          //saturn         var saturn = createmesh(new three.spheregeometry(18, 20, 20), "texture_saturn.jpg", "texture_saturn_disp.jpg", "texture_saturn_spec.jpg", "texture_saturn_nrm.jpg");          //uranus         var uranus = createmesh(new three.spheregeometry(15, 20, 20), "texture_uranus.jpg", "texture_uranus_disp.jpg", "texture_uranus_spec.jpg", "texture_uranus_nrm.jpg");          //neptune         var neptune = createmesh(new three.spheregeometry(14, 20, 20), "texture_neptune.jpg", "texture_neptune_disp.jpg", "texture_neptune_spec.jpg", "texture_neptune_nrm.jpg");          // position planets         sun.position.x=0;         sun.position.y=0;         sun.position.z=0;         earth.position.y=0;         mars.position.y=0;         venus.position.y=0;         mercury.position.y=0;         saturn.position.y=0;         jupiter.position.y=0;         uranus.position.y=0;         neptune.position.y=0;          // add planets scene         scene.add(lightbox);         scene.add(earth);         scene.add(sun);         scene.add(mercury);         scene.add(venus);         scene.add(mars);         scene.add(jupiter);         scene.add(saturn);         scene.add(uranus);         scene.add(saturn);          // add output of renderer html element         $("#webgl-output").append(renderer.domelement);          var r = 0;         var step = 0;          var controls = new function() {             this.timescale = 1;         }          var gui = new dat.gui();         gui.add(controls, 'timescale', 0, 10);          // render scene         render();          function createmesh(geom, imagefile, bump, spec, normal) {             var texture = three.imageutils.loadtexture("./texturesandmodels/" + imagefile)             var mat = new three.meshphongmaterial();             mat.map = texture;              if (bump) {                 var bump = three.imageutils.loadtexture("./texturesandmodels/" + bump)                 mat.bumpmap = bump;                 mat.bumpscale = 0.2;             }              if(spec) {                 var spec = three.imageutils.loadtexture("./texturesandmodels/" + spec)                 mat.specularmap = spec;             }              if(normal) {                 var norm = three.imageutils.loadtexture("./texturesandmodels/" + normal)                 mat.normalmap = norm;             }              var mesh = new three.mesh(geom, mat);             return mesh;         }          function render() {             stats.update();              earth.position.x = math.sin(r*0.1)*150;             earth.position.z = math.cos(r*0.1)*150;             earth.rotation.y = step += controls.timescale * 0.02;              mercury.position.x = math.sin(r*0.4)*58;             mercury.position.z = math.cos(r*0.4)*58;             mercury.rotation.y = step/58.7;              venus.position.x = math.sin(r*0.1625)*108;             venus.position.z = math.cos(r*0.1625)*108;             venus.rotation.y = step/243;              mars.position.x = math.sin(r*0.05)*228;             mars.position.z = math.cos(r*0.05)*228;             mars.rotation.y = step*1.026;              jupiter.position.x = math.sin(r*.008)*483;             jupiter.position.z = math.cos(r*.008)*483;             jupiter.rotation.y = step*2.44;              saturn.position.x = math.sin(r*.003)*886;             saturn.position.z = math.cos(r*.003)*886;             saturn.rotation.y = step*2.35;              uranus.position.x = math.sin(r*.001)*1784;             uranus.position.z = math.cos(r*.001)*1784;             uranus.rotation.y = step*1.34;              neptune.position.x = math.sin(r*.0006)*2794;             neptune.position.z = math.cos(r*.0006)*2794;             neptune.rotation.y = step*1.26;              r+=controls.timescale * (math.pi/180*2);              renderer.render(scene, camera);             requestanimationframe(render);         }          function initstats() {              var stats = new stats();              stats.setmode(0); // 0: fps, 1: ms              // align top-left             stats.domelement.style.position = 'absolute';             stats.domelement.style.left = '0px';             stats.domelement.style.top = '0px';              $("#stats-output").append(stats.domelement);              return stats;         }      });    </script> </body> </html> 


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -