web3d-three.js场景设计器-TransformControls模型控制器

场景设计器-TransformControls 控制器

• 该控制器可以指定模型进入可控制模式-如图

• 有三种控制方式

  • translate --移动模式

  • rotate -- 旋转模式

  • scale -- 缩放模式

• 方便布局过程中快捷对模型进行摆放操作。

• 引入方式

  • import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';

• 使用方式

  • // 对TransformControls的使用

    this.transformControls = new TransformControls(this.camera, this.renderer.domElement);

    this.scene.add(this.transformControls);

• 选取操作

  • // 模型移动

    initChange(transformControls) {

    var changeRaycaster = new THREE.Raycaster();

    var changeMouse = new THREE.Vector2();

    this.renderer.domElement.addEventListener('click', (event)=> {

    changeMouse.x = (event.offsetX / this.renderer.domElement.clientWidth) * 2 - 1;

    changeMouse.y = -(event.offsetY / this.renderer.domElement.clientHeight) * 2 + 1;

    changeRaycaster.setFromCamera(changeMouse, this.camera);

    var intersects = changeRaycaster.intersectObjects(this.modelsArray); //

    // console.log('相机的模型', intersects, intersects.length);

    if (intersects.length > 0) {

    var selectedObject = intersects[0].object;

    transformControls.attach(selectedObject);

    // 为移动模式

    transformControls.setMode("translate");

    // 为旋转模式

    //transformControls.setMode("rotate");

    // 为缩放模式

    //transformControls.setMode("scale");

    } else {

    // 如果点击的不是模型，那么解除模型与TransformControls的附加

    transformControls.detach();

    }

    });

    transformControls.addEventListener('dragging-changed', (event)=> {

    this.controls.enabled = !event.value;

    //mapControls.enabled = !event.value; // 如果TransformControls正在拖动，则禁用MapControls

    });

    }