how can i modify mesh size in my scene?

Question

First to say, I do not speak English well.

Anyway, Let's get something straight.

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

I hope to increase mesh(cube) size when zoom in and Opposite case, too.

my code is 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 and zomm out
                renderer.render(scene, camera);
                requestAnimationFrame( animLoop );
            })();


            /**

            mouse event code for screen control about 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>

Answer 1

You wish to modify the scale value of the object. This can be done for each axis. Each mesh object has a scale value as a vector.

So this would

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

Or in your case

cube.scale.set();

You can also access it this way,

cube.scale.x = 2.0;

Though the cube object is stored locally, you might want to set the globally and alter this value with the mouse action.

Hope that well. As a note, the question provides a bit too much of the script, shorter and faster to the point is better.