three实现鼠标点击种植生产三维爱心爱情表白效果代码
代码语言:html
所属分类:表白
代码描述:three实现鼠标点击种植生产三维爱心爱情表白效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { font-family: Monospace; background-color: #674172; margin: 0px; overflow: hidden; cursor: pointer; } .circle { background: #c0392b; width: 150px; height: 150px; margin: auto; border-radius: 100%; overflow: hidden; position: absolute; } .circle { -webkit-animation: grow 5s; } @-webkit-keyframes grow { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } </style> </head> <body> <div class="circle" style="display:none;"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script> <script> let lovequotes = [ "Have you been working out?", "I wish I was your mirror.", "I like your socks.", "You deserve a compliment!", "I feel the need to impress you.", "You're pretty groovy, dude.", "<3", "I love you more than bacon!", "You're hot.", "You're more fun than bubble wrap.", "You are warmer than a Snuggie.", "Your glass is the fullest.", "Your feet are perfect size!", "I bet even your farts smell good.", "I love the way you click.", "All of your ideas are brilliant!", "Hello, good looking.", "You're tremendous!", "You have perfect bone structure.", "You complete me.", "I like your pearly whites!", "You're so rad.", "You make babies smile.", "You listen to the coolest music.", "You're the bee's knees.", "I'd like to kiss you. Often.", "I like your face.", "The Force is strong with you."]; let colors = [ "#ff0000", "#D33257", "#E22211", "#8A2D3C", "#E3000E", "#CF000F", "#BB3658"]; class Heart { constructor(x, y, s) { this.x = 0; this.y = 0; this.ShapeX = x; this.ShapeY = y; this.ShapeZ = 0; this.rx = 0; this.ry = 0; this.rz = Math.PI; this.s = s; this.Shape = new THREE.Shape(); this.ExtrudeSettings = { amount: 5, bevelEnabled: true, bevelSegments: 50, steps: 50, bevelSize: 20, bevelThickness: 15 }; this.color = colors[Math.floor(Math.random() * colors.length)]; this.makeShape(); this.quote = lovequotes[Math.floor(Math.random() * lovequotes.length)]; } makeShape() { let x = this.x; let y = this.y; this.Shape.moveTo(x + 25, y + 25); this.Shape.bezierCurveTo(x + 25, y + 25, x + 20, y, x, y); this.Shape.bezierCurveTo(x - 30, y, x - 30, y + 35, x - 30, y + 35); this.Shape.bezierCurveTo(x - 30, y + 55, x - 10, y + 77, x + 25, y + 95); this.Shape.bezierCurveTo(x + 60, y + 77, x + 80, y + 55, x + 80, y + 35); this.Shape.bezierCurveTo(x + 80, y + 35, x + 80, y, x + 50, y); this.Shape.bezierCurveTo(x + 35, y, x + 25, y + 25, x + 25, y + 25); }} class Playground { constructor() { let self = this; let start = 0; this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000); this.light = new THREE.DirectionalLight(0xffffff, 0.8); this.renderer = new THREE.WebGLRende.........完整代码请登录后点击上方下载按钮下载查看
网友评论0