3D世界字体扩大与缩小与图片移动

[{"insert":"在字体页面中，设置中心距离为 0，x 坐标为 200。\n"},{"insert":{"image":"R10580997-685cf1944a12286fc8b64a35bfabda1c_9131_265_231.png"}},{"insert":"\n设置摄像机的手势控制为前后平移，表示控制的属性为 z，反向表示灵敏度为正，下滑减小上滑增大，灵敏度可以自行调节。\n"},{"insert":{"image":"R10580997-e2e97da2d9fdbea4df83a8f734f61899_11034_311_269.png"}},{"insert":"\n在图片页面中设置图片的 x 原点为 0.5，y 原点为 1，更方便对图片位置的操控。\n"},{"insert":{"image":"R10580997-6e31d030f15f33fb1fdbc34409fe91b1_29535_306_270.png"}},{"insert":"\n计算屏幕右下角与顶部居中所对应的 3D 世界中的坐标需要用到 Three.js 库,在前台的快速添加中引入 Three.js。\n"},{"insert":{"image":"R10580997-d1a73b4d1cc7f8b73116f5047bf82925_14685_274_221.png"}},{"insert":"\n设置摄像机的自定义 ID 为 camera\n"},{"insert":{"image":"R10580997-a8b0542383f955d1cfec54dc31552f03_7250_295_142.png"}},{"insert":"\n然后在 3D 世界的渲染成功事件中使用自定义函数计算世界坐标，使用 ids.camera 的形式传入摄像机对象。\n"},{"insert":{"image":"R10580997-0fcab493b515f5581fec7db9141c1159_22407_866_237.png"}},{"insert":"\nids.camera 获取到的是编辑器封装过的 camera 对象，$el 属性是拥有 camera 原始属性的对象，可以用它来进行 Three.js 的操作。\n"},{"insert":{"image":"R10580997-dfe93b1eb68e994f7915fb6f70f501b5_19847_524_72.png"}},{"insert":"\n此时摄像机的矩阵还未更新，计算前需要先使用 updateWorldMatrix 方法更新一下它自身的矩阵。\n"},{"insert":{"image":"R10580997-ba3ccca0858f2d6c5cc9ae590773b6b4_54143_560_211.png"}},{"insert":"\n计算的第一步是将屏幕坐标转换成 NDC 空间坐标，如图所示，它的原点在屏幕中心，坐标在 [-1, 1] 范围中取值\n"},{"insert":{"image":"R10580997-9b1ddd51fc88a38813847a7f4097c4f2_15079_519_354.jpg"}},{"insert":"\n创建一个 THREE.Vector3 对象来保存当前屏幕位置所对应的 NDC 空间坐标，它构造函数接收 x，y，z 三个参数，z 取 0.5 只是一个例子，可以取想要的任何值。\n"},{"insert":{"image":"R10580997-88951b6234f1a1d52243239a022d0e38_12341_548_43.png"}},{"insert":"\n使用这个 vec 对象的 unproject 方法得到当前深度值所对应的世界坐标。此时得到的世界坐标只是摄像机向目标位置扩张的线上其中一点。如下下图所示，使用相机位置到点 A 的向量乘以 BO / BC 的值得到相机到目标位置的向量，再加上相机位置向量就能得到目标位置向量。\n"},{"insert":{"image":"R10580997-9863667706b43f299643c909af91c694_23930_441_99.png"}},{"insert":"\n"},{"insert":{"image":"R10580997-feebb9df63e7ee6ec595e9a45e3bed3d_34300_551_538.png"}},{"insert":"\n获得右下角与顶部居中的世界坐标后，将摄像机的 y 坐标设置成顶部居中的 y 坐标，并设置最小值和最大值，记得在此之前要先设置摄像头的上下平移。\n"},{"insert":{"image":"R10580997-607c0ff83e8ae6372894244a828d8036_5006_284_115.png"}},{"insert":"\n"},{"insert":{"image":"R10580997-afaf9be6f24947a4f12cfa9e04d6a9aa_22581_825_243.png"}},{"insert":"\n然后给摄像头添加视角改变事件，在这里设置图片的 x 坐标，便能看到图片随着摄像头的上下平移而左右平移的场景。\n"},{"insert":{"image":"R10580997-ec5cffb188c55f4220b7555f048d9504_18509_885_176.png"}},{"insert":"\n"}]