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