在 3D 空间中旋转图像的一部分
设置如下：这是一个电子商务艺术网站，其中一些绘画是画布转移。这幅画环绕画布的侧面、顶部和底部。我们拥有整幅画的高分辨率图像，但我们想要显示的是图像的准 3D 表示，您可以在其中看到画作的侧面如何环绕画布。这是我正在谈论的内容的粗略草图：
我的问题是，如何以 3D 方式旋转图像空间？我认为我想要采取的方法是剪掉图像顶部和侧面的一部分，然后以 3D 方式旋转，然后将其缝合回顶部和侧面以赋予其 3D 外观。我该怎么做呢？它可以使用任何 .Net 技术（GDI+、WPF 等）来完成。
Here's the setup: This is for an ecommerce art site where some paintings are canvas transfers. The painting wraps around the sides and top and bottom of the canvas. We have high-res images of the entire painting, but what we want to display is a quasi-3D representation of the image in which you can see how the sides of the painting wrap around the canvas. Here's a rough sketch of what I'm talking about:
My question is, how can I rotate an image in 3D space? The approach I think I'd like to take, is to cut off a portion of the top and side of the image, and rotate then in 3D and then stich it back on to the top and side to give it the 3D look. How do I go about about doing that? It can be done using any .Net technology (GDI+, WPF etc.).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
在 WPF 中，使用 ViewPort3D 类可以创建一个 8x5x1 单位的长方体。创建图像作为纹理，然后使用纹理坐标将纹理应用到正面 (8x5)、侧面 (5x1) 以及顶面和底面 (8x1)。正面坐标应为：正面的(1/9, 1/6)、(8/9, 1/6)、(1/9, 5/6) 和(8/9, 5/6) ，并从最近的边缘到侧面的坐标，例如左侧：(0, 1/6)、(1/9, 1/6)、(0, 5/6) 和 (1/9, 5/6) 为左侧。
编辑：
如果您希望能够在 3D 画布模型上执行旋转，您可以按照此处的建议进行操作：
如何在 WPF 中进行 3D 转换？
In WPF using the ViewPort3D class you can create a cuboid which is 8x5x1 units. Create the image as a texture and then apply the texture to the front face (8x5) and the side faces (5x1) and the top and bottom faces (8x1) using texture coordinates. The front face coordinates should be: (1/9, 1/6), (8/9, 1/6), (1/9, 5/6) and (8/9, 5/6) for the front face, and from the nearest edge to those coordinates for the sides, e.g. for the left side: (0, 1/6), (1/9, 1/6), (0, 5/6) and (1/9, 5/6) for the left side.
Edit:
If you then want to be able to perform rotations on the 3D canvas model you can follow the advice here:
How can I do 3D transformation in WPF?
看来您不需要做真正的 3D，而只需要伪造它。
沿着图像的顶部、底部、左侧和右侧切掉四个条带。扔掉底部和右侧（根据问题中的草图）。缩放和剪切条带（我在 .net/wpf 方面不够专业，不知道如何操作，但它可以做到）。顶部将垂直缩放 0.5 倍（猜测 - 选择适合所需的最终 3D 外观图像）并水平剪切。结果被合成到输出图像上作为画布的顶侧。左侧条带将水平缩放并垂直剪切。
如果最终用户要从不同角度交互地查看 3D 画布，此方法可能比渲染真实的 3D 模型更快，后者必须进行纹理映射并将模型光栅化为最终图像，这相当于进行相同的数学运算。有趣的部分是弄清楚如何调整缩放和剪切参数。
此页面可能具有教育意义：http://www.idomaths.com/linear_transformation.php
这可能是有用的参考 http://en.csharp-online.net/GDIplus_Graphics_Transformation %E2%80%94Image_Transformation
It looks like you're not needing to do real 3D, but only needing to fake it.
Chop off four strips along the top, bottom, left and right of the image. Toss the bottom and right (going by your sketch in the question). Scale and shear the strips (I'm not expert enough at .net/wpf to know how, but it can do it). The top would be scaled vertically by a factor of 0.5 (a guess - choose to fit the desired final 3D-looking image) and sheared horizontally. The result is composited onto the output image as the top side of the canvas. The left strip would be scaled horizontally and sheared vertically.
If the end user is to view the 3D canvas from different angles interactively, this method is probably faster than rendering an honest 3D model, which would have to do texture mapping and rasterizing the model into a final image, which amounts to doing the same math. The fun part is figuring out how to adjust the scaling and shearing parameters.
This page might be educational: http://www.idomaths.com/linear_transformation.php
and this could be useful reference http://en.csharp-online.net/GDIplus_Graphics_Transformation%E2%80%94Image_Transformation
我对这类事情没有任何经验。但当我看到这个问题时，我首先想到的是有趣的 Unicornify对于SO。
在这篇制作文章中，作者：balpha，他解释了 2d 独角兽球体如何在 3d 空间中旋转。
但是代码是用python编写的。如果你有兴趣的话，你可以研究一下。但我不太确定这会对您有帮助。
I dont have any experience in this kind of stuff. But when i saw this question, the first thing comes to my mind is the funny Unicornify for SO.
In this making of article by balpha, he explained how the 2d unicorn sphere is rotated in 3d space.
But the code is written in python. If you are interested, you can take a look into that. But am not exactly sure this would help you.
强力方法（可能是最简单的方法）是将三个面中每个面的 u,v 纹理坐标映射到代表画布三个边的三个广告牌上（广告牌只是构成一个矩形的两个三角形） 。然后，使用矩阵变换旋转整个画布（所有三个广告牌）。田田！
或者，您可以通过变换移动 3 空间相机位置，而不是画布。正如他们所说，一个是六个，另一个是一半。
The brute force approach (which might be the easiest approach), is to map the u,v texture coordinates for each of the three faces, onto three billboards representing three sides of the canvas (a billboard is just two triangles that make a rectangle). Then, rotate the whole canvas (all three billboards) using matrix transforms. Tada!
Alternately, you can move the 3-space camera position with a transform, rather than the canvas. Six of one, half the other - as they say.