Three.js 和 CSS3 的结合用于动画与 3D 对象答案

【问题标题】：Combination of Three.js and CSS3 for animation with 3D objectsThree.js 和 CSS3 的结合用于动画与 3D 对象
【发布时间】：2019-02-15 05:36:58
【问题描述】：

我有这个项目要完成 - 建模 3D 乐高元素并使用动画将它们收集在合理的图形中。到目前为止，我已经通过 Blender 制作了这些元素，并且可以导出为 .obj/mlt 文件，没有问题。但是对于动画，我的项目负责人告诉我我可以使用 CSS，因为这样会更容易。直到现在我还没有找到一种方法来在浏览器中可视化准备好的 3D 元素，所以我求助于在我的 index.html 文件中使用three.js 库和 JS 代码。我设法在浏览器中显示了一个可视化的单个元素，但问题是：我应该如何继续使用 CSS 并且可以采取

function init() {
        container = document.createElement('div');
        document.body.appendChild(container);

该容器或 div 元素并对其应用 CSS 3D 转换和动画。我更喜欢 CSS 而不是 JavaScript，但如果没有其他选择，我将继续使用 JavaScrip。我提前感谢您的建议！

【问题讨论】：

Three.js 有一个渲染器，它采用平面 HTML 元素并在 3D 空间中对它们进行动画处理：threejs.org/examples/css3d_periodictable.html 但它们必须是平面对象。如果您想使用 Three.js 的全部功能，我建议您从以下介绍开始：threejs.org/docs/index.html#manual/en/introduction/… 无论哪种方式，不使用 JavaScript 都无法制作 three.js 场景。

标签： javascript html three.js 3d css-animations

【解决方案1】：

无法将 CSS 转换应用于 three.js。这是因为 CSS 改变了 DOM 元素的样式，而 three.js 动画改变了在 DOM 元素（画布）内渲染的对象的属性。您可能可以在这里https://threejs.org/examples/ 找到适合您项目的动画，只需查看源代码即可。

【讨论】：