three.js 拖拽

import * as THREE from 'three';
// 视图旋转控件
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 拖拽控件
import { DragControls } from 'three/examples/jsm/controls/DragControls';
// 可视化平移控件
import { TransformControls } from 'three/examples/jsm/controls/TransformControls';
// 轨迹球
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls';

/**
 * 3d 鼠标拖拽
 * https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene
 */
export class ThreeDrag {
    constructor(canvasId) {
        this.work(canvasId);
    }

    work(canvasId) {
        // 创建 3d 场景
        let scene = new THREE.Scene();


        /**
         * 创建渲染器
         * WebGLRenderer渲染器之外，Three.js同时提供了其他几种渲染器。当用户所使用的浏览器过于老旧，或者由于其他原因不支持WebGL时，可以使用这几种渲染器进行降级。
         * @type {number}
         */
        let width = window.innerWidth;
        let height = window.innerHeight;
        let renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        /**
         * 渲染器尺寸：设置渲染器的宽高使渲染出的场景充满应用程序
         * 对于性能比较敏感的应用程序来说，你可以使用setSize传入一个较小的值，例如window.innerWidth/2和window.innerHeight/2
         * 如果想以较低的分辨率来渲染，可以在调用setSize时，将updateStyle（第三个参数）设为false
         */
        renderer.setSize(width, height);
        // 最后一步很重要，我们将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的<canvas>元素。
        document.getElementById(canvasId).appendChild(renderer.domElement);
        renderer.setClearColor(0x000000);


        /**
         * 照相机常用的有两种
         * 正投影相机：THREE.OrthographicCamera(left,right,top,bottom,near,far)；
         * 透视照相机：THREE.PerspectiveCamera( fov, aspect, near, far ) ;
         * fov - 视野角度。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)
         * aspect ratio - 长宽比。也就是你用一个物体的宽除以它的高的值。当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的
         * near，far - 近截面和远截面。 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中
         */
        let camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
        // 3d 视图（主视角）
        camera.position.set(200, 40, 200);
        //设置照相机的位置
        camera.lookAt(new THREE.Vector3(0, 0, 0)); //设置照相机面向(0,0,0)坐标观察 照相机默认坐标为(0,0,0); 默认面向为沿z轴向里观察;


        /**
         * 添加自然光源
         * a. 平行光(DirectionalLight)，效果类似太阳光 , DirectionalLight ( color, intensity )
         * b. 点光源(PointLight)，效果类似灯泡 , PointLight ( color, intensity, distance, decay )
         * c.. 聚光光源(SpotLight)，效果类似聚光灯 , SpotLight ( color, intensity, distance, angle, penumbra, decay )
         * color — 光源颜色的RBG数值。
         * intensity — 光强的数值。
         * distance -- 光强为0处到光源的距离，0表示无穷大。
         * decay -- 沿着光照距离的衰退量。
         * angle -- 光线散射角度，最大为Math.PI/2。
         * penumbra -- 聚光锥的半影衰减百分比。在0和1之间的值。默认为0。
         */
        let light = new THREE.DirectionalLight(0xffffff, 1, 100);  //创建光源
        // 光源移动
        light.position.set(500, 500, 500);
        scene.add(light);  //在场景中添加光源
        /**
         * DirectionalLightHelper（平行光）
         * 用于模拟场景中平行光 DirectionalLight 的辅助对象. 其中包含了表示光位置的平面和表示光方向的线段。
         * DirectionalLightHelper( light : DirectionalLight, size : Number, color : Hex )
         * light-- 被模拟的光源
         * size – (可选的) 平面的尺寸. 默认为 1
         * color – (可选的) 如果没有设置颜色将使用光源的颜色
         *
         * SpotLightHelper（聚光灯）
         * 用于模拟聚光灯 SpotLight 的锥形辅助对象
         * SpotLightHelper( light : SpotLight, color : Hex )
         * light – 被模拟的聚光灯 SpotLight .
         * color – (可选的) 如果没有赋值辅助对象将使用光源的颜色
         *
         * RectAreaLightHelper（矩形面光源）
         * 创建一个表示 RectAreaLight 的辅助对象.
         * RectAreaLightHelper( light : RectAreaLight, color : Hex )
         * light – 被模拟的光源.
         * color – (可选) 如果没有赋值辅助对象将使用光源的颜色。
         *
         * HemisphereLightHelper（半球/户外光源）
         * 创建一个虚拟的球形网格 Mesh 的辅助对象来模拟 半球形光源 HemisphereLight.
         * HemisphereLightHelper( light : HemisphereLight, sphereSize : Number, color : Hex )
         * light – 被模拟的光源.
         * size – 用于模拟光源的网格尺寸.
         * color – (可选的) 如果没有赋值辅助对象将使用光源的颜色.
         */


        /**
         * 添加物体 new THREE.Mesh(Geometry, Material);  Geometry 为物体的形状，Material 为物体的材质；
         * a. 形状(Geometry)
         * 1.BoxGeometry--长方体
         * 2.CircleGeometry--圆形平面
         * 3.CylinderGeometry--圆柱体
         * 4.PlaneGeometry--方形平面
         * 5.RingGeometry--环形平面
         * 6.SphereGeometry--球形
         * 7.TextGeometry--文字
         * 8.TorusGeometry--圆环
         * 9.TubeGeometry--圆管
         * 还有根据坐标去生成具体形状的方法，可以借助第三方建模软件建模之后引入，转换为坐标后再生成，就可以做比较复杂的形状了，比如人脸、汽车等等。
         * b. 材质(Material)
         * 材质就像是物体的皮肤，决定物体外表的样子，例如物体的颜色，看起来是否光滑，是否有贴图等等。
         * 网格基础材质(MeshBasicMaterial) 该材质不受光照的影响，不需要光源即可显示出来，设置颜色后，各个面都是同一个颜色。
         * 网格朗博材质(MeshLambertMaterial) 该材质会受到光照的影响，没有光源时不会显示出来，用于创建表面暗淡，不光亮的物体。漫反射材质
         * 网格 Phong 材质(MeshPhongMaterial) 该材质会受到光照的影响，没有光源时不会显示出来，用于创建光亮的物体。镜面反射材质
         * 网格法向材质(MeshNormalMaterial) 该材质不受光照的影响，不需要光源即可显示出来，并且每个方向的面的颜色都不同，同但一个方向的面颜色是相同的，该材质一般用于调试。
         * MeshDepthMaterial--根据物体上每一点到摄像机的远近来显示颜色，远的显示黑色，近的显示白色
         */
        let box = this.getBox();
        box.position.set(5, 5, 5);
        scene.add(box);
        let box2 = this.getBox();
        box2.position.set(20, 5, 5);
        scene.add(box2);
        // 地面
        // let num = 5; // 5 * 5
        // for (let i = 1; i <= num; i++) {
        //     for(let j = 1; j <= num; j++) {
        //         let grass = this.getGrass();
        //         let k = (num + 1) / 2;
        //         grass.position.set((i - k) * 40, 0, (j - k) * 40);
        //         scene.add(grass);
        //     }
        // }

        /**
         * 盒Helper对象，显示包围一个对象的线框盒。
         * BoxHelper(object)
         * object 要包裹的模型
         */
        // let box = new THREE.BoxHelper( obj );
        // scene.add(box);

        /**
         * 包围盒Helper对象，用于创建对象和世界轴对齐的包围盒的一个帮助对象。
         * BoundingBoxHelper(object, hex)
         */
        // let bbox = new THREE.BoundingBoxHelper(obj, 0xff0000);
        // scene.add(bbox);

        /**
         * 边缘Helper对象，绘制出构成三维模型每个面边缘线信息。
         * EdgesHelper(object, color, thresholdAngle)
         * object（画边界的对象）
         * color（边界颜色）
         * thresholdAngle（角的最小值）
         */
        // let edges = new THREE.EdgesHelper( obj, 0x00ff00 );
        // scene.add( edges );

        /**
         * 网格辅助线
         * GridHelper 本质上是对线模型对象 Line 的封装，纵横交错的直线构成一个矩形网格模型对象。
         * GridHelper( size : number, divisions : Number, colorCenterLine : Color, colorGrid : Color )
         * size -- 网格宽度，默认为 10.
         * divisions -- 等分数，默认为 10.
         * colorCenterLine -- 中心线颜色，默认 0x444444
         * colorGrid --  网格线颜色，默认为 0x888888
         * @type {GridHelper}
         */
        let gridHelper = new THREE.GridHelper(200, 10, 0x444444, 0xffffff);
        scene.add(gridHelper);

        /**
         * 三维坐标轴参考线
         * AxisHelper(size)
         * size（轴线长）
         * @type {AxesHelper}
         */
        let axes = new THREE.AxesHelper(100);
        scene.add(axes);

        // 渲染，设置延迟，物料材质贴图，需时间加载
        setTimeout(() => {
            // material.needsUpdate = true; // 可以隐藏，不用通知更新标记了
            renderer.render(scene, camera);
        }, 100);

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

        // 轨迹球
        // tackBallC = this.initTrackballControls(camera, renderer);

        // 添加拖动事件
        this.initDragControl(scene, camera, renderer, tackBallC, orbC);
    }

    // 初始化轨迹球控件
    initTrackballControls(camera, renderer) {
        let controls = new TrackballControls(camera, renderer.domElement);
        // controls.noRotate = true;
        controls.noPan = true;
        // 视角最小距离
        controls.minDistance = 1000;
        // 视角最远距离
        controls.maxDistance = 5000;
        return controls;
    }

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

    // 添加拖拽控件
    initDragControl(scene, camera, renderer, tackBallC, orbC) {
        let self = this;
        /**
         * 添加平移控件,可视化操作，默认显示三维坐标系（因为是一个三维模型，所以需要添加到场景中）
         * @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;
        });

        // 过滤不是 Mesh 的物体,例如辅助网格对象
        let objects = [];
        for (let i = 0; i < scene.children.length; i++) {
            if (scene.children[i].isMesh) {
                objects.push(scene.children[i]);
            }
        }
        // 初始化拖拽控件
        let dragControls = new DragControls(objects, camera, renderer.domElement);

        // 鼠标略过事件
        dragControls.addEventListener('hoveron', function (event) {
            orbC.enabled = false;
            // 让变换控件对象和选中的对象绑定
            transformControls.attach(event.object);
        });
        // 鼠标略过事件
        dragControls.addEventListener('hoveroff', function (event) {
            orbC.enabled = true;
        });
        // 开始拖拽
        dragControls.addEventListener('dragstart', function (event) {
            orbC.enabled = false;
            // tackBallC.enabled = false;
        });
        // 拖拽结束
        dragControls.addEventListener('dragend', function (event) {
            // tackBallC.enabled = true;
            orbC.enabled = true;
            renderer.render(scene, camera);
        });
    }

    /**
     * 获取盒子
     */
    getBox() {
        let geometry = new THREE.BoxGeometry(10, 10, 10);
        // let geometry = new THREE.SphereBufferGeometry(10, 10, 10); // 球体，方便查看边缘Helper
        // 测试使用无需光照材质
        let material = new THREE.MeshNormalMaterial();
        // let material = new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('./assets/box.png') });
        // // 物体
        return new THREE.Mesh(geometry, material);
    }

    /**
     * 获取地砖
     */
    getGrass() {
        let grass;
        let geometry = new THREE.BoxGeometry(40, 0, 40);
        let floor = new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('./assets/floor.png') });
        // 物体，左右上下前后
        grass = new THREE.Mesh(geometry, floor);
        return grass;
    }
}