如何实现对象交互

Posted 2020-09-17 Heavi的博客

    在本篇随笔中，我们学习下什么是对象选择，投影和反投影是如何工作的，怎样使用Three.js构建可使用鼠标和对象交互的应用。例如当鼠标移到对象，对象变成红色，鼠标移走，对象又恢复原来的颜色。

    本篇随笔的源代码来自于：https://github.com/sole/three.js-tutorials/tree/master/object_picking

    这里还有更多的例子可供参考：

    和立方体交互，当你在立方体盒子上点击，鼠标和立方体交互的点会出现一个黑点；

    画布交互，你可以增加方格到画布上，也可以移出它；

    当你在操作这些例子，会防线它们有一个共同特性。我们使用的2D坐标系（屏幕）检测3D空间中的对象。这就是对象的选择。

1.如何工作

    在写代码之前，了解计算机3D图形是如何工作是非常有帮助的，即使是非常粗糙的方式。我们如何从抽象的3D场景映射到我们屏幕中的2D图像？

    当你使用相机渲染场景时，一大堆数据机制开始对3D场景进行运算和处理，以便生成可从相机看到的场景片段的2D表示。有许多步骤涉及，但我们这里感兴趣的是投影，就是它将3D的对象变成了屏幕中的2D实体。那如果反向操作又是怎样的？

    为什么需要知道反向操作？你可能会提这样的问题。那么，如果你想知道你的鼠标指针下面是哪个对象，你需要把这些2D坐标重新转换到3D坐标中，然后才能确定是选择的那个3D对象。这叫做“反投影”。所有得到以下两个定义：

    Porjection：从3D到2D的投影。

    UnProjection:反投影，从2D反向投影到3D。

    这里还许绍一个步骤：一旦我们反向投影到3D坐标中，我们怎么确认是否选中了某个对象？答案是：投射光线。我们从3D鼠标的位置投射一根光线，沿着相机的当前方向，看射线是否投射到任何对象上。如果是，那么我们就选中了某个对象。没有，那么我们就没选中如何对象。

    听起来有些疑惑。我们看看下面的图片：

   

    图片中，左边是一个抽象的3D场景，包含两个立方体和一个金字塔。中间代表了我们的屏幕。在屏幕上可看到我们的目标位置。右边是我们视线角度的摄像头，另外还有一条蓝色射线，使用它来选择对象。

    以上的介绍，让我们简单了解了选择对象的理论原理，接下来我们看看在three.js中是如何体现这样的过程。

对象选择代码实现

    在thres.js中实现这种的功能是非常简单的。我们先创建场景、渲染器、摄像头等：

var container = document.getElementById( \'container\' ),
    containerWidth, containerHeight,
    renderer,
    scene,
    camera;

containerWidth = container.clientWidth;
containerHeight = container.clientHeight;

renderer = new THREE.CanvasRenderer();
renderer.setSize( containerWidth, containerHeight );
container.appendChild( renderer.domElement );

renderer.setClearColorHex( 0xeeeedd, 1.0 );

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 45, containerWidth / containerHeight, 1, 10000 );
camera.position.set( 0, 0, range * 2 );
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );

     上面的代码都非常简单，没什么可介绍的。接着，我们添加一些对象。我们创建灰色立方体并且把他们随机设置他们的3D坐标。我把这些所有的对象都存放在一个类型为Object3D对象中。

geom = new THREE.CubeGeometry( 5, 5, 5 );

cubes = new THREE.Object3D();
scene.add( cubes );

for(var i = 0; i < 100; i++ ) {
        var grayness = Math.random() * 0.5 + 0.25,
                mat = new THREE.MeshBasicMaterial(),
                cube = new THREE.Mesh( geom, mat );
        mat.color.setRGB( grayness, grayness, grayness );
        cube.position.set( range * (0.5 - Math.random()), range * (0.5 - Math.random()), range * (0.5 - Math.random()) );
        cube.rotation.set( Math.random(), Math.random(), Math.random() ).multiplyScalar( 2 * Math.PI );
        cube.grayness = grayness; // *** NOTE THIS
        cubes.add( cube );
}

    所有的集合对象都使用同一个材质，它这些材质的颜色是不同的，每个立方体都设置了一种随机的灰度颜色。接下来，我们准备两个关键对象：射线对象、鼠标坐标。

var raycaster = new THREE.Raycaster();
var mouseVector = new THREE.Vector3();

    当鼠标移动时，我们想选择对象。所以需要监听mousemove事件：

window.addEventListener( \'mousemove\', onMouseMove, false );

    然后，所有感兴趣的功能都会在这个事件里边实现。当查看源代码使，你需要特别小心下边两行代码，这两天代码稍有差错，可能我们后面的选择功能将无法实现：

mouseVector.x = 2 * (e.clientX / containerWidth) - 1;
mouseVector.y = 1 - 2 * ( e.clientY / containerHeight );

    这两行代码将鼠标坐标转换为 x、y范围在（-1， 1）的笛卡尔坐标。你可能主要到计算的y坐标为什么是负的？那是因为经典的DOM坐标系原点（0，0）是从左上角开始。往右是x轴，往下是y坐标。但笛卡尔坐标的却如下所示：

   

    理解了这两个坐标系，上面的代码你就知道为什么会那样写了。

    现在我们将使用mouseVector和camera生成具体的摄像方向：

raycaster.setFromCamera(mouseVector.clone(), camera);

    这里我们克隆了mouseVector，而表示直接传递它。那是因为setFromCamera函数内部会修改mouseVector的值，你可以查看three.js源代码看看，是否真的有修改。创建raycaster对象之后，我们调用它的intersectObjects函数：

var intersects = raycaster.intersectObjects( cubes.children );

    传递的参数为cubes.chidren，也就是说我们要选择的对象来自于cubes的children中。intersects将返回查询一个选中对象的集合。并且某个对象包含了以下属性：

    distance:摄像头和对象有距离。

    point:在对象上表面上和射线交互的点的位置。

    face:对象和射线交互的面。

    object：和射线交互的对象。

    既然已经获取到这些对象了，那么我们也可以操作这些对象。首选我们把所有对象的颜色复原为之前设置的灰色：

cubes.children.forEach(function( cube ) {
    cube.material.color.setRGB( cube.grayness, cube.grayness, cube.grayness );
});

    接着我们再设置交互的对象。把这些对象的颜色设置成红色。

for( var i = 0; i < intersects.length; i++ ) {
    var intersection = intersects[ i ],
        obj = intersection.object;

    obj.material.color.setRGB( 1.0 - i / intersects.length, 0, 0 );
}

    以上就是OnMouseMove函数的所有代码了，通过这些代码我们初步了解了选择对象操作，其实我们要写的代码很少，three.js已经帮我们实现了具体的步骤。

    涉及到的鼠标操作功能很多，选择对象是最基础的，万变不离其宗。像对象的拖动功能，选择也是基础功能。接下来我们就再看看three.js是如何实现拖拽功能的。

three.js实现拖拽功能

    实现拖拽功能，主要使用了three.js的两个扩展控件：TrackballControls和DragControls。

    首先，我们先创建随机位置的200个立方体：

var objects = [];
            var geometry = new THREE.BoxGeometry(40, 40, 40);
            for(var i = 0; i < 200; i++){
                var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
                    color: Math.random() * 0xffffff
                }));
                object.position.set(Math.random() * 1000 - 500, Math.random() * 600 - 300, Math.random() * 800 - 400);
                object.rotation.set(Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI);
                object.scale.set(Math.random() * 2 + 1, Math.random() * 2 + 1, Math.random() * 2 + 1);

                object.castShadow = true;
                object.receiveShadow = true;
                scene.add(object);
                objects.push(object);
            }

    为了然各个立方体显示随机，每个object都使用Math.random()函数随机设置了position、rotation、scale。并且对象可产生投影可接收投影。

    接下来我们创建刚才提到的两个控件：

var controls = new THREE.TrackballControls(camera);
            controls.rotateSpeed = 1.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;
            controls.noZoom = false;
            controls.noPan = false;
            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;
var dragControls = new THREE.DragControls(objects, camera, webGLRenderer.domElement);

    TrackballControls可用来通过旋转移动摄像头位置，实习整个场景的旋转和移动。DragControls包含两个事件：dragstart、dragend。

dragControls.addEventListener("dragstart", function(event){
                currentColor = event.object.material.color;
                event.object.material.color = new THREE.Color(0xffff00);
                event.object.material.transparent = true;
                event.object.material.opacity = 0.6;
                controls.enabled = false;
            });
            dragControls.addEventListener("dragend", function(event){
                event.object.material.opacity = 1.0;
                event.object.material.color = currentColor;
                controls.enabled = true;
            });

    dragStart事件表示开始执行拖拽了，而dragend表示拖拽结束。可通过event.object获取当前拖拽的对象，然后就可以设置对象的属性了。这里需要特别注意的是，在拖拽开始时，我们需要禁止TrackballControls功能，才能够拖动物体。所以需要设置controls.enabled = false。当拖动结束，设置controls.enabled = true恢复TrackballControls的功能。