--- theme: cyanosis highlight: a11y-dark --- # 示例效果 ![GIF.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40e4d020238044dba25267274679da98~tplv-k3u1fbpfcp-watermark.image?) ## 原理通过threejs的插件CSS3DRenderer，实现dom元素的3d效果，本质是把原来三维场景场景中的视图矩阵、模型矩阵、投影矩阵的变换，通过css中的**translateZ、matrix3d、perspective**等属性模拟出来在，作用在dom上 ## CSS3DRenderer中暴露出的三个对象 ### 1.CSS3DObject 类似threejs中的网格模型 ### 2.CSS3DSprite 类似threejs中精灵模型 ### 3.CSS3DRenderer css3d的渲染器，主要不同是在渲染器层面，渲染器来处理原理中提到的变换过程，调整dom的style ## 使用 ### 引入 ``` javascript import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js' ``` ### 初始化渲染器 **初始化场景时把WebGLRenderer换成了CSS3DRenderer，其他的Scene,OrbitControls,camera等同threejs中用法** ```javascript this.CSS3Renderer = new CSS3DRenderer() this.CSS3Renderer.setSize(宽, 高) // 设置渲染区域尺寸 document.getElementById(被挂载的domId).appendChild(this.CSS3Renderer.domElement) // 挂载dom ``` ### 生成页面元素 ``` javascript // 五只猫跟地板的dom

// 样式 .cat { width: 80px; height: 80px; position: absolute; background-size: 100% 100%; } .cat1 { background-image: url("~@/assets/img/buoumao-xiyouse.png"); } .cat2 { background-image: url("~@/assets/img/buoumao-zhongdianse.png"); } .cat3 { background-image: url("~@/assets/img/dajumao.png"); } .cat4 { background-image: url("~@/assets/img/lanbaimao.png"); } .cat5 { background-image: url("~@/assets/img/xianluomao.png"); } .plane { width: 200px; height: 200px; position: absolute; background-image: url("~@/assets/img/plane.png"); background-size: 100% 100%; } ``` ### 包装元素 ``` javascript // 获取页面元素用相应方法包装 const domArr = document.getElementsByClassName('cat') renderCsss3d(domArr) const dom = document.getElementsByClassName('plane') addCss3dPlane(dom) ``` 渲染猫图标的函数 renderCsss3d ``` javascript renderCsss3d(domArr) { const r = 100 // 计算出半径为r的圆上等分的五个点的x,y坐标 const pointArry = this.computePosition(new THREE.Vector2(0, 0), new THREE.Vector2(r, 0), 5) // 循环设置五个dom for (let i = 0; i < domArr.length; i++) { // 需要时刻面向镜头，所以采用精灵对象 const obj = new CSS3DSprite(domArr[i]) // 根据计算的坐标，设置每个猫图标的位置，高度为50(50设置给y因为相机up为y) obj.position.set(pointArry[i].x, 50, pointArry[i].y) // 加到组中，为了后续一起旋转 this.css3dGroup.add(obj) } } ``` 工具函数 computePosition ``` javascript /** * 计算出半径为r的圆上等分的cnt个点的x,y坐标 * @param center 圆的中点 vec2 * @param first 第一个点的坐标 vec2 * @param cnt 等分个数 * @returns {[vec2]} */ computePosition(center, first, cnt) { const pointList = [first] for (let i = 1; i < cnt; i++) { const p = first.clone() p.rotateAround(center, Math.PI * 2 / cnt * i) pointList.push(p) } return pointList } ``` 渲染地板的函数 addCss3dPlane ``` javascript addCss3dPlane(dom) { // 不需要时刻面向镜头所以采用常规模型对象 const obj = new CSS3DObject(dom[0]) // 平面默认是竖着的，需要放倒 obj.rotateX(Math.PI / 2) // 添加到场景中 this.scene.add(obj) } ``` ### 渲染 ``` javascript // 渲染 _animate() { requestAnimationFrame(this._animate.bind(this)) this.CSS3Renderer.render(this.scene, this.camera) // 绕y轴旋转 this.css3dGroup.rotation.y += 0.005 } ```