ThreeJS教程：相机靠近放大预览
推荐：将NSDT场景编辑器加入你的3D工具链
3D工具集：NSDT简石数字孪生
相机靠近放大预览
本节课内容，其实和上节课的“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)
}
})