使用 CSS3 / Javascript 的真实世界 3D 模型答案

【问题标题】：Real world 3D model using CSS3 / Javascript使用 CSS3 / Javascript 的真实世界 3D 模型
【发布时间】：2012-12-06 00:21:31
【问题描述】：

我需要旋转/动画 360 度。来自智能手机浏览器的真实世界 3D 对象。当用户在屏幕上滚动时，现实世界中的对象（例如汽车）需要旋转或设置动画。一种选择是一个接一个地替换图像。

任何人都可以使用 CSS3/Javascript 提供更好的解决方案吗？

【问题讨论】：

标签： javascript html css html5-animation

【解决方案1】：

有一个名为 Three.js 的 Javascript 3d 库 - https://github.com/mrdoob/three.js/ 或者，如果您正在寻找更简单的东西，例如向量，您可能想查看 Raphael.js - http://raphaeljs.com

【讨论】：

感谢您的评论。首先是图像质量很重要。所以，无论如何我都需要使用汽车的图像。构建汽车的 3D 模型不是解决方案，因为它与图像不同。我需要如何仅使用图像来模拟 3D 模型。
您是否成功地创建了仅包含图像的 3D 模型？我对学习如何做到这一点太感兴趣了。

【解决方案2】：

Three.js 不会是移动浏览器的最佳选择，考虑到 WebGL 实现仍然是 iOS Safari 的一个愿望，即使 Android 并非如此。 CSS3 无法处理高度复杂的 3D 对象操作，因此从这个角度来看，它受到了某种限制。它具有所有 3D（旋转、缩放和变换）功能，但后期处理效果（可以通过着色器获得）超出了范围。

但是有一个不错的小库，它结合了 Javascript 和 CSS3 来创建一些 3dish 效果：http://www.edankwan.com/lab/css3dEarth

我想这就是你需要的！

【讨论】：

感谢您的评论。由于真实世界的物体（汽车）构建 3D 模型非常复杂，我打算使用图像解决方案。有什么方法可以仅使用汽车图像来模拟 3D 模型？
这是可能的，如果您选择Three.js，您需要提供画布作为渲染上下文，否则在 iOS 中将不可用。虽然有一个缺点：画布在某种程度上不受高渲染上下文的限制，这意味着可能会在这里和那里出现一些丢帧。