点击设备,相机靠近放大预览

本节课内容，其实和上节课的“3.点按钮,相机飞行靠近观察设备”基本相似，你可以当做练习题。

具体交互效果就是鼠标点击选中某个设备，相机靠近该设备，特别关注，设备在屏幕上呈现放大显示的效果。

下面在前面课程射线拾取模型弹出标签 (opens new window)的代码基础上给大家讲解。演示文件已经提前引入tweenjs动画库和上节课封装的相机动画代码。

点击选中设备，相机飞行靠近

chooseObj是鼠标单击射线拾取的模型对象,你可以获取该模型对象世界坐标对应的某个空对象位置，生成相机动画。

chooseObj是鼠标单击射线拾取的模型对象,你可以获取该模型对象世界坐标，生成相机动画。不过有一点要注意在Blender中，你要设置好选中设备的局部坐标系，确保局部坐标系，在设备上某个位置，比如居中，比如顶部，根据需要自定义设置，不过不要偏差太大，比如设备的局部坐标系与设备本身距离很远。

const pos = new THREE.Vector3();
chooseObj.getWorldPosition(pos); //获取三维场景中某个对象世界坐标

通过一个空对象来掌控相机动画的观察目标。

const pos = new THREE.Vector3();
//获取三维场景中某个对象世界坐标
model.getObjectByName(chooseObj.name+'标注').getWorldPosition(pos); 

生成相机动画

// 相机飞行到的位置和观察目标拉开一定的距离
const pos2 = pos.clone().addScalar(30);
// 相机从当前位置camera.position飞行三维场景中某个世界坐标附近
createCameraTween(pos2, pos)

关闭设备标签，相机回到整体预览状态

原来标签关闭按钮代码

// 鼠标单击按钮，关闭HTML标签
document.getElementById('close').addEventListener('click', function () {
    if (chooseObj) { //把原来选中模型对应的标签和发光描边隐藏
        outlinePass.selectedObjects = []; //无发光描边
        chooseObj.remove(tag); //从场景移除
    }
})

关闭设备标签，相机回到整体预览状态

// 相机整体预览对应的位置和观察目标
const cameraPos0 = new THREE.Vector3(202, 123, 125)
const target0 = new THREE.Vector3(0, 0, 0);
// 鼠标单击按钮，关闭HTML标签
document.getElementById('close').addEventListener('click', function () {
    if (chooseObj) { //把原来选中模型对应的标签和发光描边隐藏
        outlinePass.selectedObjects = []; //无发光描边
        chooseObj.remove(tag); //从场景移除
        // 相机从当前位置camera.position回到整体预览状态
        createCameraTween(cameraPos0, target0)
    }
})