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