three.js - how can i modify mesh size in my scene? -


first say, not speak english well.

anyway, let's straight.

i want modify mesh(cube) size when scroll mouse wheel zoomin or zoomout.

i hope increase mesh(cube) size when zoom in , opposite case, too.

my code below.

<script src="../lib/three.js/build/three.js"></script>     <script src="http://code.jquery.com/jquery.min.js"></script>     <script>         var canvas_width = 400,             canvas_height = 300;          var renderer = null, //웹지엘 또는 2d         scene = null,  //씬 객체         camera = null;  //카메라 객체          var capture = false,             start = [],             anglex = 0,             angley = 0,             zoom = 1.0;         function initwebgl()         {             setuprenderer();             setupscene();             setupcamera();              var mycolor = new three.color( 0xff0000 );             mycolor.setrgb(0.0, 1.0, 0.0);             var alpha = 1.0;             renderer.setclearcolor(mycolor, alpha);               (function animloop(){                 //camera zoom in , zomm out                 renderer.render(scene, camera);                 requestanimationframe( animloop );             })();               /**              mouse event code screen control zoom, rotate              **/                  $(document).ready(function() {                 console.log($("#my-canvas").length);                 $("#my-canvas").on("mousedown", function(e) {                      capture = true;                     start = [e.pagex, e.pagey];                     console.log("start:" + start);                 });                  $("#my-canvas").on("mouseup", function(e) {                     console.log(e.type);                     capture = false;                     console.log("end capture");                 });                  $("#my-canvas").mousemove(function(e) {                     console.log(e.type);                     if (capture)                     {                         var x = (e.pagex - start[0]);                         var y = (e.pagey - start[1]);                          //시작위치 업데이트                         start[0] = e.pagex;                         start[1] = e.pagey;                          anglex += x;                         angley += y;                         //console.log()                     }                 });                 });               $(document).ready(function(evt) {                  $("#my-canvas").on("mousewheel", function (e) {                     adjustzoom(window.event.wheeldata);                 }).on("dommousescroll", function (e) {                     //파이어폭스                     adjustzoom(e.originalevent.detail * -1.0);                 });              });             function adjustzoom(delta) {                      if(delta > 0)                     {                         zoom += 0.1;                     } else {                         zoom -= 0.1;                         if(zoom < 0.01) { zoom = 0.1;}                     }             }         }          function setuprenderer()         {             renderer = new three.webglrenderer({canvas: document.createelement( 'canvas')});             renderer.setsize( canvas_width, canvas_height );             $(renderer.domelement).attr('id','my-canvas');             //캔버스 엘리먼트를 추가하는 곳             document.body.appendchild( renderer.domelement );         }          function setupscene()         {             scene = new three.scene();             addmesh();             addlight();         }          function setupcamera()         {             camera = new three.perspectivecamera(                 35,  //시야                 canvas_width / canvas_height,  //종횡비                 .1,  //전방 절단면                 10000 //후방 절단면             );             camera.position.set(-15, 10, 10);             camera.lookat( scene.position );             scene.add( camera );         }          function addmesh()         {             var cube = new three.mesh(                 new three.cubegeometry( 5, 7, 5 ),                 new three.meshlambertmaterial( { color: 0x0000ff} )             );             scene.add(cube);         }          function addlight()         {             var light = new three.pointlight( 0xffffff );             light.position.set( 20, 20, 20 );             scene.add(light);         }         </script> 

you wish modify scale value of object. can done each axis. each mesh object has scale value vector.

so would

mesh.scale.set( 2, 1, 1 ) 

or in case

cube.scale.set(); 

you can access way,

cube.scale.x = 2.0; 

though cube object stored locally, might want set globally , alter value mouse action.

hope well. note, question provides bit of script, shorter , faster point better.


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -