前言
「作者主頁」：雪碧有白泡泡
「個人網站」：雪碧的個人網站
「推薦專欄」：
★java一站式服務 ★
★ React從入門到精通★
★前端炫酷代碼分享 ★
★ 從0到英雄，vue成神之路★
★ uniapp-從構建到提升★
★ 從0到英雄，vue成神之路★
★ 解決算法，一個專欄就夠了★
★ 架構咱們從0說★
★ 數據流通的精妙之道★
★后端進階之路★
文章目錄
- 前言
- 先上效果
- 點擊運行后即可有如下效果，拖動鼠標即可
- 代碼
- 鼠標監聽并縮小愛心大小
- 再分享一個html愛心+彈幕效果
- 效果如下
先上效果
這里可以直接 看查源碼內容， 刷新，最后一個是 放大跳轉網頁
點擊運行后即可有如下效果，拖動鼠標即可
代碼
要將這個愛心改為3D效果，需要進行以下幾個步驟：
- 創建一個可以旋轉的3D場景。
- 將愛心的圖案轉換成3D模型。
- 在場景中添加3D模型，并旋轉。
- 渲染場景，使其呈現出3D效果。
需要使用的工具和技術包括：HTML5 Canvas、Three.js（一個JavaScript庫用于創建和顯示3D圖形）和一些基本的3D數學知識。
實現了一個簡單的3D愛心效果：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>💗</title><style>html,body {height: 100%;padding: 0;margin: 0;background: #000;overflow: hidden;}#pinkboard {position: absolute;top: 0;left: 0;}</style></head><body><canvas id="pinkboard"></canvas><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script><script>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(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 id="pinkboard"></canvas>作為Three.js的渲染目標。
鼠標監聽并縮小愛心大小
要實現讓這個愛心隨著滑動轉動的效果，你可以通過監聽鼠標移動事件來改變愛心的旋轉角度：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>💗</title><style>html,body {height: 100%;padding: 0;margin: 0;background: #000;overflow: hidden;}#pinkboard {position: absolute;top: 0;left: 0;}</style></head><body><canvas id="pinkboard"></canvas><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script><script>let 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愛心+彈幕效果
這里可以直接看查源碼內容，刷新，最后一個是放大跳轉網頁
效果如下
