three.js 9 TransformControls

import * as THREE from 'three';
import { TransformControls } from "three/examples/jsm/controls/TransformControls";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

/**
 * 3d Controls 控制器，变换控制器（TransformControls）
 * https://threejs.org/docs/index.html#examples/zh/controls/TransformControls
 */
export class ThreeDoc9ControlTransform {
    constructor(canvasId) {
        this.work(canvasId);
    }

    work(canvasId) {
        // 创建 3d 场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x9e9e9e);

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        // 最后一步很重要，我们将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的<canvas>元素。
        document.body.appendChild(renderer.domElement);

        // 点材质(PointsMaterial)
        this.getPointsMaterial(scene);

        // AxesHelper  3个坐标轴的对象.
        this.addAxesHelper(scene);
        // 半球光（HemisphereLight）
        this.addHemisphereLight(scene);
        // 网格辅助对象
        let size = 20;
        const gridHelper = new THREE.GridHelper(size, 10, 0x444444, 0xffffff);
        scene.add(gridHelper);


        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        // 设置相机位置
        camera.position.x = 5;
        camera.position.y = 6;
        camera.position.z = 15;
        camera.lookAt(0, 0, 0);

        // 添加物体
        let geometry = new THREE.BoxGeometry(2, 2, 2);
        let material = new THREE.MeshStandardMaterial({ color: 0x049EF4 });
        let obj = new THREE.Mesh(geometry, material);
        obj.position.set(0, 1, 0);
        scene.add(obj);

        // 添加鼠标操作视图
        let orbC = this.initMouseControl(scene, camera, renderer);

        // 添加拖动事件，返回平移控件对象
        let transformControls = this.initDragControl(scene, camera, renderer, orbC);

        // 添加操作面板，切换控制器类型
        this.addControlPanel(renderer, scene, camera, transformControls);

        // 添加点击事件，设置物体控制器显示
        this.addClickEvent(scene, camera, transformControls, renderer);

        renderer.render(scene, camera);
    }

    /**
     * AxesHelper
     * 用于简单模拟3个坐标轴的对象.
     * 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
     * AxesHelper( size : Number )
     * size -- (可选的) 表示代表轴的线段长度. 默认为 1.
     */
    addAxesHelper(scene) {
        const axesHelper = new THREE.AxesHelper(12);
        scene.add(axesHelper);
    }

    /**
     * 半球光（HemisphereLight） - 喜欢这个光
     * 光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。
     * 半球光不能投射阴影。
     *
     * HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )
     * skyColor - (可选参数) 天空中发出光线的颜色。 缺省值 0xffffff。
     * groundColor - (可选参数) 地面发出光线的颜色。 缺省值 0xffffff。
     * intensity - (可选参数) 光照强度。 缺省值 1。
     */
    addHemisphereLight(scene) {
        const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 50);
        scene.add(light);
        light.position.set(0, -20, 0);
        // const helper = new THREE.HemisphereLightHelper(light, 3);
        // scene.add(helper);
    }

    /**
     * 点材质(PointsMaterial)
     * Points使用的默认材质。
     * PointsMaterial( parameters : Object )
     * parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。
     *
     * 属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色），内部调用Color.set(color)。
     */
    getPointsMaterial(scene) {
        const vertices = [];

        for (let i = 0; i < 10000; i++) {

            const x = THREE.MathUtils.randFloatSpread(2000);
            const y = THREE.MathUtils.randFloatSpread(2000);
            const z = THREE.MathUtils.randFloatSpread(2000);

            vertices.push(x, y, z);

        }

        const geometry = new THREE.BufferGeometry();
        geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

        const material = new THREE.PointsMaterial({ color: 0xffffff });

        const points = new THREE.Points(geometry, material);

        scene.add(points);
    }

    /**
     * 鼠标操作
     */
    initMouseControl(scene, camera, renderer) {
        // 添加鼠标操作
        let controls = new OrbitControls(camera, renderer.domElement);
        controls.addEventListener('change', () => {
            renderer.render(scene, camera);
        });
        return controls;
    }

    // 添加拖拽控件
    initDragControl(scene, camera, renderer, orbC) {

        /**
         * 变换控制器（TransformControls）
         * 该类可提供一种类似于在数字内容创建工具（例如Blender）中对模型进行交互的方式，来在3D空间中变换物体。 和其他控制器不同的是，变换控制器不倾向于对场景摄像机的变换进行改变。
         * TransformControls 期望其所附加的3D对象是场景图的一部分。
         *
         * TransformControls( camera : Camera, domElement : HTMLDOMElement )
         * camera: 被控制的摄像机。
         * domElement: 用于事件监听的HTML元素。
         * 创建一个新的 TransformControls 实例。
         *
         * 事件
         * change : 如果发生了任何类型的改变（对象或属性的改变）则触发该事件。 属性改变是单独的事件，你也可以为此添加单独的事件监听；
         * 该事件类型为"propertyname-changed"（“属性名称-changed”）。
         * mouseDown : 如果指针（鼠标/触摸）为活动状态则触发该事件。
         * mouseUp : 如果指针（鼠标/触摸）不再为活动状态则触发该事件。
         * objectChange : 如果被控制的3D对象发生改变则触发该事件。。
         *
         * 属性
         * 共有属性请参见其基类Object3D。
         * .axis : String : 当前变换轴。
         * .camera : Camera : 渲染场景的摄像机。
         *
         * .domElement : HTMLDOMElement : 该 HTMLDOMElement 用于监听鼠标/触摸事件，该属性必须在构造函数中传入。
         * 在此处改变它将不会设置新的事件监听。
         *
         * .dragging : Boolean : 当前是否正在拖动。只读属性。
         * .enabled : Boolean : 是否启用控制器。默认为true。
         * .mode : String : 当前的变换模式。可能的值包括"translate"、"rotate" 和 "scale"。默认为translate。
         * .object : Object3D : 正在被控制的3D对象。
         *
         * .rotationSnap : Number : 默认情况下，3D对象是可以被连续旋转的。如果你将该值设为一个数值（弧度），
         * 则你将可以定义每次旋转3D对象时的步幅。 默认为null。
         *
         * .showX : Boolean : x轴手柄是否显示。默认为true。
         * .showY : Boolean : y轴手柄是否显示。默认为true。
         * .showZ : Boolean : z轴手柄是否显示。默认为true。
         * .size : Number : 手柄UI（轴/平面）的大小。默认为1。
         * .space : String : 定义了在哪种坐标空间中进行变换。可能的值有"world" 和 "local"。默认为world。
         * .translationSnap : Number : 默认情况下，3D对象是可以被连续平移的。如果你将该值设为一个数值（世界单位），则你将可以定义每次平移3D对象时的步幅。 默认为null。
         *
         * 方法
         * 共有方法请参见其基类Object3D。
         *
         * .attach ( object : Object3D ) : TransformControls
         * object: 应当变换的3D对象。
         *
         * 设置应当变换的3D对象，并确保控制器UI是可见的。
         *
         * .detach () : TransformControls
         * 从控制器中移除当前3D对象，并确保控制器UI是不可见的。
         *
         * .dispose () : undefined
         * 若不再需要该控制器，则应当调用此函数。
         *
         * .getRaycaster () : Raycaster
         * 返回用于用户交互的 Raycaster 对象。 此对象在所有实例之间共享 变换控件。 如果您设置 TransformControls 的 .layers 属性，您还需要 使用匹配值设置 Raycaster 上的 .layers 属性，否则设置 TransformControls 不会按预期工作。
         *
         * .getMode () : String
         * 返回变换模式。
         *
         * .setMode ( mode : String ) : undefined
         * mode: 变换模式。
         *
         * 设置变换模式。
         *
         * .setRotationSnap ( rotationSnap : Number ) : undefined
         * rotationSnap: 旋转捕捉步幅。
         *
         * 设置旋转捕捉。
         *
         * .setSize ( size : Number ) : undefined
         * size: 手柄UI的大小。
         *
         * 设置手柄UI的大小。
         *
         * .setSpace ( space : String ) : undefined
         * space: 应用变换的坐标空间。
         *
         * 设置应用变换的坐标空间。
         *
         * .setTranslationSnap ( translationSnap : Number ) : undefined
         * translationSnap: 平移捕捉步幅。
         *
         * 设置平移捕捉。
         * @type {TransformControls}
         */
        let transformControls = new TransformControls(camera, renderer.domElement);
        scene.add(transformControls);
        // 监听改变，则更新界面
        transformControls.addEventListener("change", () => {
            renderer.render(scene, camera);
        });
        // 变换控制器监听 mousedown，禁用 鼠标拖拽
        transformControls.addEventListener("mouseDown", () => {
            orbC.enabled = false;
        });
        //
        transformControls.addEventListener("mouseUp", () => {
            orbC.enabled = true;
        });

        return transformControls;
    }

    /**
     * 添加操作面板，按钮控制光源对象切换，添加平移控件关联
     * @param renderer
     * @param scene
     * @param camera
     * @param transformControls 平移控制器对象
     */
    addControlPanel(renderer, scene, camera, transformControls) {
        let ele = `
            <div class="control-panel">
                <button class="mode-translate">translate</button>
                <button class="mode-rotate">rotate</button>
                <button class="mode-scale">scale</button>
            </div>
        `;
        $('body').append(ele);
        let cols = ['translate', 'rotate', 'scale'];
        for(let i = 0; i< cols.length; i++){
            // 绑定按钮事件
            $('.mode-' + cols[i]).on('click', function (e) {
                // 控制模式改变：cols[i]
                transformControls.mode = cols[i];
                // renderer.render(scene, camera);
            });
        }
    }

    /**
     * 添加鼠标点击判断，是否点击了物体
     * @param scene
     * @param camera
     * @param transformControls
     */
    addClickEvent(scene, camera, transformControls, renderer) {
        /**
         * 使用官方的THREE.Raycaster
         * THREE.Raycaster是three.js中的射线类，其实现监听的原理是由相机位置为射线起点，由鼠标位置为射线方向发射射线，
         * 其穿过的所有几何体都会被监测到。
         * @type {*[]}
         */
        let intersects = []; //几何体合集
        const pointer = new THREE.Vector2();
        // 给 canvas 加监听点击事件
        document.getElementsByTagName('canvas')[0].addEventListener('click', meshOnClick);
        let raycaster = new THREE.Raycaster();
        function meshOnClick(event) {

            //geometrys 为需要监听的Mesh合集，可以通过这个集合来过滤掉不需要监听的元素例如地面天空
            let geometrys = [];
            for (let i = 0; i < scene.children.length; i++) {
                console.log(scene.children[i].isLight);
                // 物体 和 光源都监听点击
                if (scene.children[i].isMesh || scene.children[i].isLight) {
                    geometrys.push(scene.children[i]);
                }
            }
            console.log(geometrys);
            pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
            pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
            raycaster.setFromCamera(pointer, camera);
            // true为不拾取子对象
            intersects = raycaster.intersectObjects(geometrys, true);
            // 被射线穿过的几何体为一个集合，越排在前面说明其位置离端点越近，所以直接取[0]
            console.log(intersects);
            if (intersects.length > 0) {
                transformControls.attach(intersects[0].object);
            } else {
                //若没有几何体被监听到，可以做一些取消操作，判断不到光源点击，直接移除控制不可行
                // transformControls.detach();
                // 当前控制器操控的对象
                // console.log(transformControls.object);
                console.log(1);
            }
            renderer.render(scene, camera);

        }
    }
}