七夕特辑——3D爱心(可监听鼠标移动)

这篇具有很好参考价值的文章主要介绍了七夕特辑——3D爱心(可监听鼠标移动)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

七夕特辑——3D爱心(可监听鼠标移动),前端炫酷代码分享,3d,计算机外设,javascript,前端,web
「作者主页」:雪碧有白泡泡
「个人网站」:雪碧的个人网站
「推荐专栏」

java一站式服务
React从入门到精通
前端炫酷代码分享
★ 从0到英雄,vue成神之路★
uniapp-从构建到提升
从0到英雄,vue成神之路
解决算法,一个专栏就够了
架构咱们从0说
★ 数据流通的精妙之道★
★后端进阶之路★

七夕特辑——3D爱心(可监听鼠标移动),前端炫酷代码分享,3d,计算机外设,javascript,前端,web

先上效果


七夕特辑——3D爱心(可监听鼠标移动),前端炫酷代码分享,3d,计算机外设,javascript,前端,web
这里可以直接 看查源码内容刷新,最后一个是 放大跳转网页

点击运行后即可有如下效果,拖动鼠标即可

七夕特辑——3D爱心(可监听鼠标移动),前端炫酷代码分享,3d,计算机外设,javascript,前端,web

代码

要将这个爱心改为3D效果,需要进行以下几个步骤:

  1. 创建一个可以旋转的3D场景。
  2. 将爱心的图案转换成3D模型。
  3. 在场景中添加3D模型,并旋转。
  4. 渲染场景,使其呈现出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);来监听鼠标的移动事件,并将鼠标在窗口中的坐标存储在mouseXmouseY中。然后在animate函数中,将mouseX作为爱心的y轴旋转角度,将mouseY作为爱心的x轴旋转角度来实现随鼠标滑动转动的效果。

再分享一个html爱心+弹幕效果

七夕特辑——3D爱心(可监听鼠标移动),前端炫酷代码分享,3d,计算机外设,javascript,前端,web
这里可以直接看查源码内容刷新,最后一个是放大跳转网页

效果如下

七夕特辑——3D爱心(可监听鼠标移动),前端炫酷代码分享,3d,计算机外设,javascript,前端,web文章来源地址https://www.toymoban.com/news/detail-658321.html

到了这里,关于七夕特辑——3D爱心(可监听鼠标移动)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 脚本:python绘制七夕爱心

    https://blog.csdn.net/m0_68089732/article/details/132391141

    2024年02月07日
    浏览(33)
  • 前端练手3D爱心

    盒子模型常用属性(认识) overflow: hidden;定义盒子不随浮动 margin-left: 50px:使盒子距离外边距左(右上下)50px margin: 100px auto:使盒子距离外边距上下左右100px margin: 使盒子距离外边距上右下左为50px 0 0 50px; margin: 20px 30px:使盒子距离外边距上下20px,左右30px margin: 10px:使盒子距离外边距

    2024年01月24日
    浏览(27)
  • Python绘制爱心代码(七夕限定版)

    又到了一年一度的七夕节啦!你还在发愁送女朋友什么礼物,不知道怎样表达你满满的爱意吗?别担心,我来帮你!今天,我将教你使用Python绘制一个跳动的爱心,用创意和幽默为这个特殊的夜晚增添浪漫和趣味。话不多说先看示例: 这段代码使用Python的tkinter库实现了一个

    2024年02月12日
    浏览(47)
  • JavaScript 监听鼠标左右同时按下/同时按下移动

    基于原生JavaScript, 在使用 three.js 的 raycaster 模拟瞄准及射击时用到.

    2024年02月07日
    浏览(39)
  • 10个超炫酷的前端3D开源项目

    本文将分享 10 个超炫酷的前端 3D 开源项目。从令人惊叹的视觉效果到富有创新概念的交互体验,这些项目展示了前端技术的无限可能。无论你是新手还是经验丰富的开发者,都值得一探究竟! 基于 Three.js 的前端 WebGL 页面开发合集,包含冰墩墩、数字城市、3D人像、车模展示

    2024年02月08日
    浏览(89)
  • 七夕情人节表白网页制作【雪花爱心】

    🏆今日学习目标: 🍀告白代码制作 ✅ 创作者 :林在闪闪发光 ⏰预计时间:10分钟 🎉个人主页:林在闪闪发光的个人主页  🍁林在闪闪发光的个人社区,欢迎你的加入: 林在闪闪发光的社区      目录 作品介绍 效果图 代码实现 (部分代码) html (告白部分)  js (雪花部分

    2024年02月13日
    浏览(51)
  • 《Cesium 进阶知识点》- 监听鼠标移动和缩放等场景信息

    使用对象 Cesium.ScreenSpaceEventHandler 监听鼠标 Cesium.ScreenSpaceEventType.MOUSE_MOVE 和 WHEEL事件。 这里涉及到获取 级别 信息,详见《《Cesium 进阶知识点》- 获取当前场景的级别》

    2024年02月16日
    浏览(32)
  • 情人节定制:HTML5 Canvas全屏七夕爱心表白特效

    “这个世界乱糟糟的而你干干净净可以悬在我心上做太阳和月亮。”,七夕节表白日,你要错过吗?如果你言辞不善,羞于开口的话,可以使用 html5 canvas 制作浪漫的七夕爱心表白动画特效,全屏的爱心和表白语,了解一下!  🌹 最后,祝天下有情人终成眷属 🌹

    2024年02月11日
    浏览(44)
  • unity 3D,镜头跟随鼠标移动

    一、鼠标隐藏,使用UI图片作鼠标图 二、射线在屏幕中央,用于交互 三、鼠标与摄像头跟随

    2024年02月12日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包