transformControls.js 配合three.js使用

1. 适用需求

在three.js当中,如果需要使用鼠标移动模型的部件,网格,那么可以考虑使用该控制器.

2. 主要功能

移动,旋转,缩放,取消

3. 具体

一般来讲,你需要自定义一个控制阀来定义是否处于当前的移动模式,当然根据自身考虑,只是从代码可读性来讲,搞一个好一点,比如: isOptionMode

let transformControls = new THREE.TransformControls(camera,render,domElement); // 初始化,并传入参数,render.domElement,对于多数控制器来说,就是将控制对象限制在当前操作的canvas中,而不是document.

transformControls.setSpace("world");

if(isOptionMode){

    transformControls.attach(要变换的对象)// 这里一般需要配合raycaster使用,当同时选中多个目标,可以使用mutilAttach

}

function render (){

    ............

    transformControls.update();

}

当你结束了操作,要取消模式的时候,记得detach,使得页面恢复正常的情况

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 14,750评论 0 15
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,791评论 25 709
  • 广州东大肛肠医院曝光并揭露骗子黑心医院 广州东大肛肠医院曝光并揭露骗子黑心医院.看病花钱...
    7321cea313b6阅读 4,241评论 0 0
  • 从2010年去巴西,到2012年离开,在巴西工作生活差不多3年时间。说起巴西,有几个标签,足球、桑巴、狂欢节、亚马...
    王六郎阅读 4,574评论 3 1
  • 夜深了 电脑泛着光 然后继续着 一点,两点,三点…… 不言语 已天亮 洗洗又是星期一
    丘禾阅读 1,462评论 0 1