【HTML】跳动的3D爱心，发给你爱的人

最新推荐文章于 2024-05-22 09:14:35 发布

数据系的公考小白

最新推荐文章于 2024-05-22 09:14:35 发布

阅读量560

点赞数 16

文章标签： html 前端

本文链接：https://blog.csdn.net/2401_83020244/article/details/136757441

版权

前言

想给爱的人整点“有技术”的浪漫？最好的办法就是用HTML整个爱心啦。小编已经帮你们整出来啦，赶快拿去发个你爱的人吧~

HTML介绍

HTML（Hypertext Markup Language）是一种标记语言，用于创建网页。它由一系列的标签组成，这些标签可以告诉浏览器如何显示网页的内容。在本文中，我们将简单介绍HTML的基本概念和用法。

在HTML中，网页的内容被包含在``<html>``标签中。在``<html>``标签中，我们可以定义网页的头部和主体。

头部部分位于``<head>``标签中，它包含了网页的元数据和链接到外部文件，比如CSS样式表和JavaScript脚本文件。元数据包括网页的标题、描述和关键词，它们在搜索引擎优化中非常重要。

主体部分位于``<body>``标签中，它包含了网页的实际内容，比如文本、图像和链接。在主体中，我们可以使用各种标签来创建网页的结构和样式。

最常见的标签是``<h1>``到``<h6>``，它们用于定义标题的大小和重要性。``<p>``标签用于定义段落，``<a>``标签用于创建链接，``<img>``标签用于插入图像。

效果展示

部分代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>跳动的爱心</title>
</head>

<body>

  <script src='./js/three.min.js'></script>
  <script src='./js/TrackballControls.js'></script>
  <script src='./js/simplex-noise.js'></script>
  <script src='./js/OBJLoader.js'></script>
  <script src='./js/gsap.min.js'></script>
  <script src="./js/script.js"></script>


  <script>


    (function () {
      const _face = new THREE.Triangle();

      const _color = new THREE.Vector3();

      class MeshSurfaceSampler {

        constructor(mesh) {

          let geometry = mesh.geometry;

          if (!geometry.isBufferGeometry || geometry.attributes.position.itemSize !== 3) {

            throw new Error('THREE.MeshSurfaceSampler: Requires BufferGeometry triangle mesh.');

          }

          if (geometry.index) {

            console.warn('THREE.MeshSurfaceSampler: Converting geometry to non-indexed BufferGeometry.');
            geometry = geometry.toNonIndexed();

          }

          this.geometry = geometry;
          this.randomFunction = Math.random;
          this.positionAttribute = this.geometry.getAttribute('position');
          this.colorAttribute = this.geometry.getAttribute('color');
          this.weightAttribute = null;
          this.distribution = null;

        }

        setWeightAttribute(name) {

          this.weightAttribute = name ? this.geometry.getAttribute(name) : null;
          return this;

        }
......
由于代码过长，博主只列出部分
需要的朋友可以关注博主同名公众号，回复“HTML3D跳动爱心”免费获取