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

前言

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

第一次尝试

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

第二次尝试

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

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

CSS3DRenderer 可以直接通过 THREE.CSS3DObject(DOMElement) 将 Dom 元素转换为 3d 元素,然后控制该对象的 positionrotation 属性中的 xyz 来实现动画效果。

效果

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

实现过程

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

核心代码

引入组件


                    
                    

你可能感兴趣的:(javascript,json,ViewUI)