关于3维坐标转屏幕坐标

相信很多同学已经在网上查过了

代码如下：

const stdVector = selectObj.position.project(this.camera);
const a = window.innerWidth / 2;
const b = window.innerHeight / 2;
const x = Math.round(stdVector.x * a + a);
const y = Math.round(-stdVector.y * b + b);

以上没有问题，如果出了问题，可能是你把模型转了一下，这样子计算出来的，就是不对的。

一定要注意，你的模型没有转动。

那是不是模型旋转就不行了呢？也不是，需要计算旋转的路程，然后对此进行处理，比较麻烦，所以请选择模型不转，转视角。

旋转

旋转有两个概念，一个是模型旋转，一个是视觉相机旋转，也就是物体自己在转，还是你的眼睛围绕着物体转。

两种都可以达到旋转的视觉效果，如果是单物体的话。

为了避免前面的旋转出现坐标转换出错的问题。

所以我使用控制器旋转：

this.controller.autoRotate = true;
this.controller.autoRotateSpeed = 0.1;

总得上个图吧

对于这种效果，我一开始是用精灵贴图的：

图片描述

但是地球是圆的，达不到客户要求的：鼠标放上放去坐标点的时候，提示的位置左下角在坐标的右上角。

那怎么处理了这个呢？

我做成了div，也就是：

鼠标触摸到三维的坐标图标，然后把它的位置转成二维坐标，再动态控制div的位置，div是二维的，所以一直会向着你的。。

即使我转到一个斜的角度：

图片描述

关于相机的位置

一开始进入模型，不是客户所需要的角度

那怎么办呢？

我们可以在渲染的时候，不断地输出相机的位置，转到你的目标位置后，记录下位置。

然后在初始化的时候，就设置相机在这个位置上，那么看到的就是你的理想角度了。

法向量的方向拉高一点

markMesh.translateOnAxis(item.position, 0.007);

好像也没啥了，最重要的是，我有一个很聪明的三维设计师！

关于ThreeJs的一些经验