踩坑（二） --- threejs 踩坑之点击模型，获取点击位置，对应的世界坐标

 

 这是原型中的效果， 需要在模型上添加自定义标签，那么步骤大致就是：

• 点击模型，获取到对应位置的世界坐标，存入到数据库。这里我是单独有一个添加页面。
• 主页展示的时候，先查出这些点，然后通过css2dObject,生成自定义标签挂载到模型上。

关键问题是：点击模型的时候，获取对应的坐标。之前有记录过如何点击模型获取坐标【threejs-模型点击以及添加CSS2DObject - 努力不搬砖的iori - 博客园 (cnblogs.com)】

里面讲错了一点：就是容器存在缩放的时候，点击模型，世界坐标的获取。有兴趣的可以看看。

点击模型，获取世界坐标的正确的方式：

其实最关键两点：

1. 添加测点（点击模型，获取世界坐标）的这个页面必须不存在缩放。 
2. 展示页面和添加页面，模型的位置，scale，相机的位置必须要一致。也就是两个的相机的position(x,y,z) 需要一样， 如果展示页的模型你比如说你在加载的时候有做平移，旋转等操作改变了模型的位置，视角时：

　　object.translateX(10) | object.rotateY(Math.PI)

　　　 那么你添加页面，模型加载时也必须做同样的操作。

附上两张对比图