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

    ? ? });

    }

?

?

?