yleave的博客

  咱先看看全景图实现效果：展示地址  截图：  体验了一下是不是感觉周围环境转了一圈，感觉世界是圆的？????  没错！恭喜你答对了！地球就是圆的！????全景效果实现  有了上面的提示，对 threejs 有一点了解的小伙伴可能就猜出来了，这个全景效果其实就是使用一个球体实现的~ 而我们只是在球体内表面上贴了一张纹理贴图而已（滚轮向外滚就可以看到这个球体了，看上去像个玻璃球，怪好看的，还有个彩蛋????（好吧，说出来就不是彩蛋了））：  初始时，我们的视角在球体正中心，视角的移动则是依靠

文章目录选点绘线动态绘制线段和显示距离文字居中撤销操作  测距功能，也就是选择两点，计算它们的距离，实现效果大致如下：  上图中主要涉及几个操作：点击鼠标左键选点，点击鼠标右键停止选点，若选择点数超过两点，则两点绘制一条线段动态绘制线段动态绘制距离确定两点后将距离文字居中按下 ESC 键撤销上一步操作选点绘线  首先，我们需要通过鼠标在三维空间中选点，但是我们的屏幕是二维的，还有一维不知道，因此没办法直接凭空选点，因此目前的选点都是基于某个物体来的，即在物体上选点。那么要如何获取鼠

文章目录1. 根据相机是否移动来判断是否进行了拖拽2.设置鼠标监听事件小结  前因：想实现一个小功能，有一个参数 lockTiles，当鼠标在屏幕上拖动时，参数 lockTiles 设置为 true，停止拖动时，lockTiles 重设为 false。  思考了一下，这个功能并不难，有两个方向可以实现这个功能：根据相机是否移动来设置设置鼠标监听事件，使用 mousedown、mousemove 和 mouseup 来判断是否进行了拖动  不过在对鼠标进行事件监听时遇到了一些坑点。。1. 根据

文章目录Three 中的矩阵关系REF: https://juejin.im/post/6844903510769664014THREE 中的矩阵三维投影矩阵(u_matrix)计算公式相机投影矩阵（ProjectMatrix）相机视图矩阵(CameraMatrixWorldInverse)物体位置矩阵(ObjectWorldMatrix)Box3REF: https://www.mrguo.link/article?id=12Vector3Vector3 的方法setFromMatrixScale( m:

文章目录概述局部空间世界空间观察空间裁剪空间正交投影透视投影将变换矩阵组合到一起右手坐标系欧拉角鼠标输入REF ：https://learnopengl-cn.github.io/01%20Getting%20started/08%20Coordinate%20Systems/WebGL的一些词汇表：https://learnopengl-cn.github.io/01%20Getting%20started/10%20Review/  比较重要的主要有五个坐标系统：局部空间（Local Spa

物体坐标转屏幕坐标  在 ThreeJS 中，一个物体可看作一个 Mesh，Mesh 的坐标是用一个 Vector3 来表示的，Vector3 中包含了 x、y、z 坐标。project 方法  通过 Vector3对象的方法 project，方法的参数是相机对象，语句 worldVector.project(camera);返回的结果是世界坐标 worldVector在 camera相机对象矩阵变化下对应的标准设备坐标， 标准设备坐标 xyz 的范围是[-1,1]。  Three 的场景是建立在

  假设有一个需求，需要获取 Three 场景的一张快照，然后再将其显示在屏幕上。1. 获取快照  对于这个需求，一种方法是在创建 WebGLRenderer 时设置一个 preserveDrawingBuffer 参数为 true，然后再调用场景中的 canvas 的 toDataURL 方法来获取某一帧的 base64 格式的图像数据：renderer = new WebGLRenderer({ preserveDrawingBuffer :true });const image =