使用 three.js 中的 CSS3DRenderer 实现 3d 卡片的效果

前言

最近要做一个 3D 卡片的效果，设计图如下：

第一次尝试

第一次尝试选择了我比较熟悉的 PixiJS，关于我如何用 PixiJS 中的 Sprite3d 做了一个失败的 3D 卡片，可以 戳这里查看。

第二次尝试

有了第一次失败的经历，果断老实选择使用 three.js 来实现 3d 效果。

但为什么选择使用 CSS3DRenderer 实现，可能是相中了 CSS3DRenderer 与 CSS 有关联。

CSS3DRenderer 可以直接通过 THREE.CSS3DObject(DOMElement) 将 Dom 元素转换为 3d 元素，然后控制该对象的 position 和 rotation 属性中的 x 、y 、 z 来实现动画效果。

效果

效果图如下，在线预览 戳这里。

实现过程

首先定义并初始化相机（camera）、场景（scene）、渲染器（renderer）和控制器（controls）。

核心代码

引入组件

<script src="./js/three.js"></script>
<script src="./js/tween.min.js"></script>
<script src="./js/TrackballControls.js"></script>
<script src="./js/CSS3DRenderer.js"></script>
复制代码

搭建 three.js 框架，以下代码就完成了 3D 场景的搭建，后续只需要往场景中添加元素即可

let camera,scene,renderer; // 定义相机、场景和渲染器
let controls; // 定义控制器
 
window.onload = ()=>{
    init(); 
    animate();
};
 
function init() {
    // 相机初始化
    camera = new