如何修改场景中的网格大小？

Question

首先要说，我英语说得不好。

不管怎样，让我们​​直说吧。

当我滚动鼠标滚轮放大或缩小时，我想修改网格（立方体）的大小。

我希望在放大和相反的情况下增加网格（立方体）的大小。

我的代码如下。

<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

您希望修改对象的比例值。这可以为每个轴完成。 每个网格对象都有一个作为矢量的比例值。

这样会

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

或者在你的情况下

cube.scale.set();

你也可以这样访问，

cube.scale.x = 2.0;

虽然多维数据集对象存储在本地，但您可能希望全局设置并通过鼠标操作更改此值。

希望如此。 作为说明，这个问题提供了太多的脚本，越短越快越好。