three.js中transformControl可以方便调节物体位置大小。

文档参考地址:https://sogrey.top/Three.js-start/tools/TransformControls.js.html
具体参数等内容看文档。
可视化变换控件对象

            //
            function initTransformControls(){
                transformControl = new TransformControls( camera,renderer.domElement );
                scene.add( transformControl );//控件对象添加到场景对象
                //dragControls划过显示
                //dragControls传参 _objects:对象数组。_camera:相机 _domElement:渲染器
                // dragControls = new DragControls(scene.children, camera, renderer.domElement);
                // // 鼠标略过事件
                // dragControls.addEventListener('hoveron', function (event) {
                //     // 让变换控件对象和选中的对象绑定
                //     console.log(event,'------鼠标')
                //     transformControl.attach(event.object);
                // });
                // // 开始拖拽
                // dragControls.addEventListener('dragstart', function (event) {
                //     controls.enabled = false;
                // });
                // // 拖拽结束
                // dragControls.addEventListener('dragend', function (event) {
                //     controls.enabled = true;
                // });
            }

添加对象进行调整

                // transformControl.setMode('scale');//平移( translate )、旋转( rotate )、缩放( scale )可选,默认是平移( translate )。
                transformControl.attach(mesh);

按钮调整相机旋转,(相机OrbitControls移动和对单个物体冲突内容解决)

            let cameraFlag=false
            document.getElementById('cameraId').onclick=function(){
                cameraFlag=!cameraFlag
                controls.enabled = cameraFlag;
                let obj =scene.getObjectByName ("squareInfo")
                console.log(obj.position,'--------调整正方行位置')
            }
posted @ 2021-08-30 11:54  嗯哼Nymph  阅读(1044)  评论(0编辑  收藏  举报