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,'--------調整正方行位置')
            }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM