商昊网站建设,广州市白云区网站建设维护,wordpress添加主题慢,企业营销推广策划前言 「作者主页」#xff1a;雪碧有白泡泡 「个人网站」#xff1a;雪碧的个人网站 「推荐专栏」#xff1a; ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄#xff0c;vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄#xff…前言 「作者主页」雪碧有白泡泡 「个人网站」雪碧的个人网站 「推荐专栏」 ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄vue成神之路★ ★ 解决算法一个专栏就够了★ ★ 架构咱们从0说★ ★ 数据流通的精妙之道★ ★后端进阶之路★ 文章目录 前言先上效果点击运行后即可有如下效果拖动鼠标即可 代码鼠标监听并缩小爱心大小 再分享一个html爱心弹幕效果效果如下 先上效果 这里可以直接
看查源码内容
刷新最后一个是
放大跳转网页 点击运行后即可有如下效果拖动鼠标即可 代码
要将这个爱心改为3D效果需要进行以下几个步骤 创建一个可以旋转的3D场景。将爱心的图案转换成3D模型。在场景中添加3D模型并旋转。渲染场景使其呈现出3D效果。 需要使用的工具和技术包括HTML5 Canvas、Three.js一个JavaScript库用于创建和显示3D图形和一些基本的3D数学知识。
实现了一个简单的3D爱心效果
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestylehtml,body {height: 100%;padding: 0;margin: 0;background: #000;overflow: hidden;}#pinkboard {position: absolute;top: 0;left: 0;}/style/headbodycanvas idpinkboard/canvasscript srchttps://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js/scriptscriptfunction createHeart() {const heartShape new THREE.Shape();const x -2;const y -1;heartShape.moveTo(x 2.5, y 2.5);heartShape.bezierCurveTo(x 2.5, y 2.5, x 2, y, x, y);heartShape.bezierCurveTo(x - 3, y, x - 3, y 3.5, x - 3, y 3.5);heartShape.bezierCurveTo(x - 3,y 5.5,x - 1.6,y 7.7,x 2.5,y 9.5);heartShape.bezierCurveTo(x 6.6,y 7.7,x 9,y 4.5,x 9,y 3.5);heartShape.bezierCurveTo(x 9, y 3.5, x 9, y, x 6.5, y);heartShape.bezierCurveTo(x 4, y, x 2.5, y 2.5, x 2.5, y 2.5);const geometry new THREE.ShapeGeometry(heartShape);const material new THREE.MeshBasicMaterial({ color: #ea80b0 });const heart new THREE.Mesh(geometry, material);heart.scale.set(10, 10, 10);return heart;}function createScene() {const scene new THREE.Scene();const camera new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);camera.position.z 50;const renderer new THREE.WebGLRenderer({ canvas: pinkboard });renderer.setSize(window.innerWidth, window.innerHeight);const heart createHeart();scene.add(heart);function animate() {requestAnimationFrame(animate);heart.rotation.x 0.01;heart.rotation.y 0.01;renderer.render(scene, camera);}animate();}createScene();/script/body
/html在这个示例中我们使用了Three.js来创建3D场景并将爱心的图案转换成了一个简单的3D模型。我们在场景中添加了这个模型并在每一帧中旋转它。最后使用renderer对象将场景渲染到Canvas上。
请注意在上述代码中添加了一个新的Canvas元素canvas idpinkboard/canvas作为Three.js的渲染目标。
鼠标监听并缩小爱心大小
要实现让这个爱心随着滑动转动的效果你可以通过监听鼠标移动事件来改变爱心的旋转角度
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestylehtml,body {height: 100%;padding: 0;margin: 0;background: #000;overflow: hidden;}#pinkboard {position: absolute;top: 0;left: 0;}/style/headbodycanvas idpinkboard/canvasscript srchttps://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js/scriptscriptlet mouseX 0;let mouseY 0;document.addEventListener(mousemove, onDocumentMouseMove, false);function onDocumentMouseMove(event) {mouseX (event.clientX - window.innerWidth / 2) / 10;mouseY (event.clientY - window.innerHeight / 2) / 10;}function createHeart() {const heartShape new THREE.Shape();const x -2;const y -1;heartShape.moveTo(x 2.5, y 2.5);heartShape.bezierCurveTo(x 2.5, y 2.5, x 2, y, x, y);heartShape.bezierCurveTo(x - 3, y, x - 3, y 3.5, x - 3, y 3.5);heartShape.bezierCurveTo(x - 3,y 5.5,x - 1.6,y 7.7,x 2.5,y 9.5);heartShape.bezierCurveTo(x 6.6,y 7.7,x 9,y 4.5,x 9,y 3.5);heartShape.bezierCurveTo(x 9, y 3.5, x 9, y, x 6.5, y);heartShape.bezierCurveTo(x 4, y, x 2.5, y 2.5, x 2.5, y 2.5);const geometry new THREE.ShapeGeometry(heartShape);const material new THREE.MeshBasicMaterial({ color: #ea80b0 });const heart new THREE.Mesh(geometry, material);heart.scale.set(3, 3, 3);return heart;}function createScene() {const scene new THREE.Scene();const camera new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);camera.position.z 50;const renderer new THREE.WebGLRenderer({ canvas: pinkboard });renderer.setSize(window.innerWidth, window.innerHeight);const heart createHeart();scene.add(heart);function animate() {requestAnimationFrame(animate);heart.rotation.x mouseY;heart.rotation.y mouseX;renderer.render(scene, camera);}animate();}createScene();/script/body
/html在这个修改后的代码中我们使用document.addEventListener(mousemove, onDocumentMouseMove, false);来监听鼠标的移动事件并将鼠标在窗口中的坐标存储在mouseX和mouseY中。然后在animate函数中将mouseX作为爱心的y轴旋转角度将mouseY作为爱心的x轴旋转角度来实现随鼠标滑动转动的效果。 再分享一个html爱心弹幕效果 这里可以直接看查源码内容刷新最后一个是放大跳转网页
效果如下
