圣诞节用女神照片做了一个旋转木马

圣诞节到了 看见朋友圈都是送各种礼物的  作为一个程序员 肯定是要给女朋友准备一份不一样的礼物啦。看见在网上看见各种旋转圣诞树的，就想到了这个旋转木马 赶紧学起来发给女朋友看看！

效果图

 使用技术 html css3 jq 

使用旋转实现

基本样式

点击 查收❤

css样式

引入插件

js逻辑

首先定义好数据

const startButton = document.getElementById('startButton')

const Obscuration = document.getElementById('Obscuration')

const music = document.getElementById('music')

startButton.addEventListener('click', start)

封装调用逻辑

function play() {if(music.paused) {music.paused = falsemusic.play()}
}function initRenderer() {width = window.innerWidthheight = window.innerHeightrenderer = new THREE.WebGLRenderer({antialias: true})// 如果设置开启，允许在场景中使用阴影贴图// renderer.shadowMap.enabled = true// 定义阴影贴图类型 (未过滤, 关闭部分过滤, 关闭部分双线性过滤)// renderer.shadowMap.type = THREE.BasicShadowMaprenderer.setSize(width, height)document.body.appendChild(renderer.domElement)renderer.setClearColor(0x000089, 1.0)
}function initScene() {scene = new THREE.Scene()
}function initCamera() {camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000)camera.position.set(6, 2, -12)
}

 用户点击查收触发 

function start() {startButton.innerHTML = '加载中...'Obscuration.style.display = 'block'play()initRenderer()initScene()initCamera()setTimeout(()=>{// Obscuration.style.display = 'none'startButton.style.display = 'none'},3000)
}

 到这里就可以实现啦 

实现的地址

tschristmas.haihaina.cn

完整代码我都已经放在码云上面了 

海海/christmas

感兴趣的可以自己克隆

如果你还有什么问题可以选择

​​​​​​​微信公众号搜索 海海学前端 来了解更多