Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

javascript - 改进 THREE.js 中旋转三 Angular 形/面的 UV 坐标生成

In lại Tác giả: Walker 123 更新时间：2023-11-28 01:49:46 27 4
mua khóa gpt4 Nike

我在 StackOverflow 和其他地方看到了很多与此类似的问题，但没有一个直接解决我的问题。我正在 THREE.js 中使用凸包生成器生成 n 边多面体。我想将方形纹理映射到每个多面体的每个面上，使其不变形，并通过透视正确绘制(即不抵消透视或类似的东西)。

我的第一次尝试以及我在其他地方看到的大部分内容都是这样的:

function faceUv( v1, v2, v3 ) {
  return [
    new THREE.Vector2(0,0),
    new THREE.Vector2(1,0),
    new THREE.Vector2(1,1)
  ];
}

这会更改非 XY 对齐直 Angular 三 Angular 形面上纹理的纵横比。也就是说，全部；)

所以，我想我应该尝试旋转面以与 XY 平面对齐，然后计算 UV，就像在其上绘制 1x1 正方形一样。因此，像这样的三 Angular 形(在 XY 对齐后)将获得以下 uv 坐标:

0,0 1,0
                             * v1(uv=1.0,0.0)


  v3(uv=0.1,0.5)
   *


               * v2(uv=0.5,0.8)

0,1 1,1

这对于我的目的来说已经足够了。

这是我当前的解决方案:

function faceUv(v1, v2, v3) {
    var z = new THREE.Vector3(0, 0, 1),
        n = new THREE.Triangle(v1, v2, v3).normal(),
        // from http://stackoverflow.com/questions/13199126/find-opengl-rotation-matrix-for-a-plane-given-the-normal-vector-after-the-rotat
        // RotationAxis = cross(N, N')
        // RotationAngle = arccos(dot(N, N') / (|N| * |N'|))
        axis = new n.clone().cross(z),
        angle = Math.acos(n.clone().dot(z) / (n.length() * z.length()));

    var mtx = new THREE.Matrix4().makeRotationAxis(axis, angle);
    var inv = new THREE.Matrix4().getInverse(mtx);
    var v1r = v1.clone().applyMatrix4(inv),
        v2r = v2.clone().applyMatrix4(inv),
        v3r = v3.clone().applyMatrix4(inv),
        ul = v1r.clone().min(v2r).min(v3r),
        lr = v1r.clone().max(v2r).max(v3r),
        scale = new THREE.Vector2(1.0 / (lr.x - ul.x), 1.0 / (lr.y - ul.y));

    v1r.sub(ul);
    v2r.sub(ul);
    v3r.sub(ul);

    return [
        new THREE.Vector2(v1r.x * scale.x, v1r.y * scale.y),
        new THREE.Vector2(v2r.x * scale.x, v2r.y * scale.y),
        new THREE.Vector2(v3r.x * scale.x, v3r.y * scale.y)
    ];
}

它似乎工作得很好，除了与 YZ 平面对齐的面(即法线为 0,-1,0)。这是一个屏幕截图，注意多面体的底部。

screenshot

所以我的问题是:a)有没有更好/更简单的方法来做到这一点？ b) 如何修复底面？c) 有没有办法通过使用 THREE.js 中的更多现有功能来至少简化代码？

Cảm ơn!

câu trả lời hay nhất

Đó có phải là ý bạn không?

axis = n.clone().cross( z );

此外，UV 通常位于左下角的 ( 0, 0 ) ở giữa.

关于问题(a)和(c):鉴于您正在做的事情，“不”。

关于问题(b):我希望您可以自己查明这一点。 :-)

关于javascript - 改进 THREE.js 中旋转三 Angular 形/面的 UV 坐标生成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19825139/

27 4 0
Đề xuất bài viết: CSS 动画 : Fading images into one another and animating the image and moving it's direction
Đề xuất bài viết: c++ - 递归返回语句没有正确返回变量
Đề xuất bài viết: css - 使用 bootstrap 3.3.6 的 Rails 应用程序头部没有视口(viewport)
Đề xuất bài viết: javascript - 使用 CryptoJS 解密图片并将其插入页面
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress