HTML橙色爱心

图片

目录

写在前面

准备开始

完整代码

运行结果

系列文章

写在后面

写在前面

本期小编给大家分享一颗热烈且浪漫的爱心，快来看看吧！

准备开始

在开始之前，我们需要先简单的了解一下这颗爱心的原理哦~

本期将用html实现这颗跳动的爱心，我们先从html开始吧！

HTML（HyperText Markup Language）是一种用于创建网页结构和内容的标记语言。它是Web开发中最基本的技术之一，用于描述和组织网页的内容。

HTML最初由Tim Berners-Lee于1991年创造，作为一种用于共享科学研究成果的标准化形式。HTML使用标记（tag）来定义文本的结构和语义，并将其呈现为具有超链接的富文本文档。通过使用标记、元素和属性，HTML可以定义文本的标题、段落、列表、表格和图像等内容。

HTML是一种使用尖括号包围的标签语言。标签通常由一个起始标签（opening tag）和一个结束标签（closing tag）组成，两个标签之间的内容表示要被标记的文本。起始标签和结束标签可以包含属性，用于进一步定义和修饰标记的行为和外观。

在HTML中，元素是由标签组成的，可以包含文本、其他元素或者二者的组合。最常见的HTML元素包括标题元素（如<h1>到<h6>）、段落元素（如<p>）、列表元素（如<ul>和<li>）和超链接元素（如<a>）。通过嵌套和组合这些元素，可以创建出复杂的网页结构。

HTML标记还可以使用属性来进一步定义和修饰元素。属性提供了关于元素的额外信息，如元素的尺寸、颜色或布局等。常见的HTML属性包括id（标识元素的唯一标识符），class（用于将元素分组或应用样式）和style（内联样式）等。

HTML是一种层次结构的语言，文档的整体结构由多个元素组成，可以组织成树状结构。通常使用<html>元素作为根元素，它包含<head>元素和<body>元素。<head>元素用于定义文档的元数据，如标题和链接，而<body>元素包含实际的内容。

HTML可以通过文本编辑器编写，并在Web浏览器中进行查看。一旦HTML文档完成，可以通过将其保存成.html文件并在浏览器中打开来实现呈现。浏览器将解析HTML代码并显示其内容，呈现为用户可见的网页。

虽然HTML本身具有一定的格式和样式，但它通常与CSS（Cascading Style Sheets）和JavaScript等技术一起使用，以实现更丰富和交互式的网页效果。CSS用于定义网页的样式和布局，而JavaScript用于添加交互性和动态效果。

总之，HTML是用于创建Web内容的基本技术之一，它定义了网页的结构和内容。通过使用标记、元素和属性，可以创建出具有超链接和富文本特性的网页。与CSS和JavaScript等技术结合使用，HTML可以实现更丰富和交互式的网页效果。

完整代码

<!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;

        }

        build() {

          const positionAttribute = this.positionAttribute;
          const weightAttribute = this.weightAttribute;
          const faceWeights = new Float32Array(positionAttribute.count / 3);
          for (let i = 0; i < positionAttribute.count; i += 3) {

            let faceWeight = 1;

            if (weightAttribute) {

              faceWeight = weightAttribute.getX(i) + weightAttribute.getX(i + 1) + weightAttribute.getX(i + 2);

            }

            _face.a.fromBufferAttribute(positionAttribute, i);

            _face.b.fromBufferAttribute(positionAttribute, i + 1);

            _face.c.fromBufferAttribute(positionAttribute, i + 2);

            faceWeight *= _face.getArea();
            faceWeights[i / 3] = faceWeight;

          }

          this.distribution = new Float32Array(positionAttribute.count / 3);
          let cumulativeTotal = 0;

          for (let i = 0; i < faceWeights.length; i++) {

            cumulativeTotal += faceWeights[i];
            this.distribution[i] = cumulativeTotal;

          }

          return this;

        }

        setRandomGenerator(randomFunction) {

          this.randomFunction = randomFunction;
          return this;

        }

        sample(targetPosition, targetNormal, targetColor) {

          const cumulativeTotal = this.distribution[this.distribution.length - 1];
          const faceIndex = this.binarySearch(this.randomFunction() * cumulativeTotal);
          return this.sampleFace(faceIndex, targetPosition, targetNormal, targetColor);

        }

        binarySearch(x) {

          const dist = this.distribution;
          let start = 0;
          let end = dist.length - 1;
          let index = - 1;

          while (start <= end) {

            const mid = Math.ceil((start + end) / 2);

            if (mid === 0 || dist[mid - 1] <= x && dist[mid] > x) {

              index = mid;
              break;

            } else if (x < dist[mid]) {

              end = mid - 1;

            } else {

              start = mid + 1;

            }

          }

          return index;

        }

        sampleFace(faceIndex, targetPosition, targetNormal, targetColor) {

          let u = this.randomFunction();
          let v = this.randomFunction();

          if (u + v > 1) {

            u = 1 - u;
            v = 1 - v;

          }

          _face.a.fromBufferAttribute(this.positionAttribute, faceIndex * 3);

          _face.b.fromBufferAttribute(this.positionAttribute, faceIndex * 3 + 1);

          _face.c.fromBufferAttribute(this.positionAttribute, faceIndex * 3 + 2);

          targetPosition.set(0, 0, 0).addScaledVector(_face.a, u).addScaledVector(_face.b, v).addScaledVector(_face.c, 1 - (u + v));

          if (targetNormal !== undefined) {

            _face.getNormal(targetNormal);

          }

          if (targetColor !== undefined && this.colorAttribute !== undefined) {

            _face.a.fromBufferAttribute(this.colorAttribute, faceIndex * 3);

            _face.b.fromBufferAttribute(this.colorAttribute, faceIndex * 3 + 1);

            _face.c.fromBufferAttribute(this.colorAttribute, faceIndex * 3 + 2);

            _color.set(0, 0, 0).addScaledVector(_face.a, u).addScaledVector(_face.b, v).addScaledVector(_face.c, 1 - (u + v));

            targetColor.r = _color.x;
            targetColor.g = _color.y;
            targetColor.b = _color.z;
          }
          return this;

        }

      }

      THREE.MeshSurfaceSampler = MeshSurfaceSampler;

    })();

  </script>
  <script>
    (function () {

      const _object_pattern = /^[og]\s*(.+)?/; // mtllib file_reference

      const _material_library_pattern = /^mtllib /; // usemtl material_name

      const _material_use_pattern = /^usemtl /; // usemap map_name

      const _map_use_pattern = /^usemap /;

      const _vA = new THREE.Vector3();

      const _vB = new THREE.Vector3();

      const _vC = new THREE.Vector3();

      const _ab = new THREE.Vector3();

      const _cb = new THREE.Vector3();

      function ParserState() {

        const state = {
          objects: [],
          object: {},
          vertices: [],
          normals: [],
          colors: [],
          uvs: [],
          materials: {},
          materialLibraries: [],
          startObject: function (name, fromDeclaration) {

            if (this.object && this.object.fromDeclaration === false) {

              this.object.name = name;
              this.object.fromDeclaration = fromDeclaration !== false;
              return;

            }

            const previousMaterial = this.object && typeof this.object.currentMaterial === 'function' ? this.object.currentMaterial() : undefined;

            if (this.object && typeof this.object._finalize === 'function') {

              this.object._finalize(true);

            }

            this.object = {
              name: name || '',
              fromDeclaration: fromDeclaration !== false,
              geometry: {
                vertices: [],
                normals: [],
                colors: [],
                uvs: [],
                hasUVIndices: false
              },
              materials: [],
              smooth: true,
              startMaterial: function (name, libraries) {

                const previous = this._finalize(false);


                if (previous && (previous.inherited || previous.groupCount <= 0)) {

                  this.materials.splice(previous.index, 1);

                }

                const material = {
                  index: this.materials.length,
                  name: name || '',
                  mtllib: Array.isArray(libraries) && libraries.length > 0 ? libraries[libraries.length - 1] : '',
                  smooth: previous !== undefined ? previous.smooth : this.smooth,
                  groupStart: previous !== undefined ? previous.groupEnd : 0,
                  groupEnd: - 1,
                  groupCount: - 1,
                  inherited: false,
                  clone: function (index) {

                    const cloned = {
                      index: typeof index === 'number' ? index : this.index,
                      name: this.name,
                      mtllib: this.mtllib,
                      smooth: this.smooth,
                      groupStart: 0,
                      groupEnd: - 1,
                      groupCount: - 1,
                      inherited: false
                    };
                    cloned.clone = this.clone.bind(cloned);
                    return cloned;

                  }
                };
                this.materials.push(material);
                return material;

              },
              currentMaterial: function () {

                if (this.materials.length > 0) {

                  return this.materials[this.materials.length - 1];

                }

                return undefined;

              },
              _finalize: function (end) {

                const lastMultiMaterial = this.currentMaterial();

                if (lastMultiMaterial && lastMultiMaterial.groupEnd === - 1) {

                  lastMultiMaterial.groupEnd = this.geometry.vertices.length / 3;
                  lastMultiMaterial.groupCount = lastMultiMaterial.groupEnd - lastMultiMaterial.groupStart;
                  lastMultiMaterial.inherited = false;

                }


                if (end && this.materials.length > 1) {

                  for (let mi = this.materials.length - 1; mi >= 0; mi--) {

                    if (this.materials[mi].groupCount <= 0) {

                      this.materials.splice(mi, 1);

                    }

                  }

                }


                if (end && this.materials.length === 0) {

                  this.materials.push({
                    name: '',
                    smooth: this.smooth
                  });

                }

                return lastMultiMaterial;

              }
            };

            if (previousMaterial && previousMaterial.name && typeof previousMaterial.clone === 'function') {

              const declared = previousMaterial.clone(0);
              declared.inherited = true;
              this.object.materials.push(declared);

            }

            this.objects.push(this.object);

          },
          finalize: function () {

            if (this.object && typeof this.object._finalize === 'function') {

              this.object._finalize(true);

            }

          },
          parseVertexIndex: function (value, len) {

            const index = parseInt(value, 10);
            return (index >= 0 ? index - 1 : index + len / 3) * 3;

          },
          parseNormalIndex: function (value, len) {

            const index = parseInt(value, 10);
            return (index >= 0 ? index - 1 : index + len / 3) * 3;

          },
          parseUVIndex: function (value, len) {

            const index = parseInt(value, 10);
            return (index >= 0 ? index - 1 : index + len / 2) * 2;

          },
          addVertex: function (a, b, c) {

            const src = this.vertices;
            const dst = this.object.geometry.vertices;
            dst.push(src[a + 0], src[a + 1], src[a + 2]);
            dst.push(src[b + 0], src[b + 1], src[b + 2]);
            dst.push(src[c + 0], src[c + 1], src[c + 2]);

          },
          addVertexPoint: function (a) {

            const src = this.vertices;
            const dst = this.object.geometry.vertices;
            dst.push(src[a + 0], src[a + 1], src[a + 2]);

          },
          addVertexLine: function (a) {

            const src = this.vertices;
            const dst = this.object.geometry.vertices;
            dst.push(src[a + 0], src[a + 1], src[a + 2]);

          },
          addNormal: function (a, b, c) {

            const src = this.normals;
            const dst = this.object.geometry.normals;
            dst.push(src[a + 0], src[a + 1], src[a + 2]);
            dst.push(src[b + 0], src[b + 1], src[b + 2]);
            dst.push(src[c + 0], src[c + 1], src[c + 2]);

          },
          addFaceNormal: function (a, b, c) {

            const src = this.vertices;
            const dst = this.object.geometry.normals;

            _vA.fromArray(src, a);

            _vB.fromArray(src, b);

            _vC.fromArray(src, c);

            _cb.subVectors(_vC, _vB);

            _ab.subVectors(_vA, _vB);

            _cb.cross(_ab);

            _cb.normalize();

            dst.push(_cb.x, _cb.y, _cb.z);
            dst.push(_cb.x, _cb.y, _cb.z);
            dst.push(_cb.x, _cb.y, _cb.z);

          },
          addColor: function (a, b, c) {

            const src = this.colors;
            const dst = this.object.geometry.colors;
            if (src[a] !== undefined) dst.push(src[a + 0], src[a + 1], src[a + 2]);
            if (src[b] !== undefined) dst.push(src[b + 0], src[b + 1], src[b + 2]);
            if (src[c] !== undefined) dst.push(src[c + 0], src[c + 1], src[c + 2]);

          },
          addUV: function (a, b, c) {

            const src = this.uvs;
            const dst = this.object.geometry.uvs;
            dst.push(src[a + 0], src[a + 1]);
            dst.push(src[b + 0], src[b + 1]);
            dst.push(src[c + 0], src[c + 1]);

          },
          addDefaultUV: function () {

            const dst = this.object.geometry.uvs;
            dst.push(0, 0);
            dst.push(0, 0);
            dst.push(0, 0);

          },
          addUVLine: function (a) {

            const src = this.uvs;
            const dst = this.object.geometry.uvs;
            dst.push(src[a + 0], src[a + 1]);

          },
          addFace: function (a, b, c, ua, ub, uc, na, nb, nc) {

            const vLen = this.vertices.length;
            let ia = this.parseVertexIndex(a, vLen);
            let ib = this.parseVertexIndex(b, vLen);
            let ic = this.parseVertexIndex(c, vLen);
            this.addVertex(ia, ib, ic);
            this.addColor(ia, ib, ic);

            if (na !== undefined && na !== '') {

              const nLen = this.normals.length;
              ia = this.parseNormalIndex(na, nLen);
              ib = this.parseNormalIndex(nb, nLen);
              ic = this.parseNormalIndex(nc, nLen);
              this.addNormal(ia, ib, ic);

            } else {

              this.addFaceNormal(ia, ib, ic);

            }


            if (ua !== undefined && ua !== '') {

              const uvLen = this.uvs.length;
              ia = this.parseUVIndex(ua, uvLen);
              ib = this.parseUVIndex(ub, uvLen);
              ic = this.parseUVIndex(uc, uvLen);
              this.addUV(ia, ib, ic);
              this.object.geometry.hasUVIndices = true;

            } else {

              this.addDefaultUV();

            }

          },
          addPointGeometry: function (vertices) {

            this.object.geometry.type = 'Points';
            const vLen = this.vertices.length;

            for (let vi = 0, l = vertices.length; vi < l; vi++) {

              const index = this.parseVertexIndex(vertices[vi], vLen);
              this.addVertexPoint(index);
              this.addColor(index);

            }

          },
          addLineGeometry: function (vertices, uvs) {

            this.object.geometry.type = 'Line';
            const vLen = this.vertices.length;
            const uvLen = this.uvs.length;

            for (let vi = 0, l = vertices.length; vi < l; vi++) {

              this.addVertexLine(this.parseVertexIndex(vertices[vi], vLen));

            }

            for (let uvi = 0, l = uvs.length; uvi < l; uvi++) {

              this.addUVLine(this.parseUVIndex(uvs[uvi], uvLen));

            }

          }
        };
        state.startObject('', false);
        return state;

      }


      class OBJLoader extends THREE.Loader {

        constructor(manager) {

          super(manager);
          this.materials = null;

        }

        load(url, onLoad, onProgress, onError) {

          const scope = this;
          const loader = new THREE.FileLoader(this.manager);
          loader.setPath(this.path);
          loader.setRequestHeader(this.requestHeader);
          loader.setWithCredentials(this.withCredentials);
          loader.load(url, function (text) {

            try {

              onLoad(scope.parse(text));

            } catch (e) {

              if (onError) {

                onError(e);

              } else {

                console.error(e);

              }

              scope.manager.itemError(url);

            }

          }, onProgress, onError);

        }

        setMaterials(materials) {

          this.materials = materials;
          return this;

        }

        parse(text) {

          const state = new ParserState();

          if (text.indexOf('\r\n') !== - 1) {

            text = text.replace(/\r\n/g, '\n');

          }

          if (text.indexOf('\\\n') !== - 1) {

            text = text.replace(/\\\n/g, '');

          }

          const lines = text.split('\n');
          let line = '',
            lineFirstChar = '';
          let lineLength = 0;
          let result = [];

          const trimLeft = typeof ''.trimLeft === 'function';

          for (let i = 0, l = lines.length; i < l; i++) {

            line = lines[i];
            line = trimLeft ? line.trimLeft() : line.trim();
            lineLength = line.length;
            if (lineLength === 0) continue;
            lineFirstChar = line.charAt(0);

            if (lineFirstChar === '#') continue;

            if (lineFirstChar === 'v') {

              const data = line.split(/\s+/);

              switch (data[0]) {

                case 'v':
                  state.vertices.push(parseFloat(data[1]), parseFloat(data[2]), parseFloat(data[3]));

                  if (data.length >= 7) {

                    state.colors.push(parseFloat(data[4]), parseFloat(data[5]), parseFloat(data[6]));

                  } else {

                    state.colors.push(undefined, undefined, undefined);

                  }

                  break;

                case 'vn':
                  state.normals.push(parseFloat(data[1]), parseFloat(data[2]), parseFloat(data[3]));
                  break;

                case 'vt':
                  state.uvs.push(parseFloat(data[1]), parseFloat(data[2]));
                  break;

              }

            } else if (lineFirstChar === 'f') {

              const lineData = line.substr(1).trim();
              const vertexData = lineData.split(/\s+/);
              const faceVertices = [];

              for (let j = 0, jl = vertexData.length; j < jl; j++) {

                const vertex = vertexData[j];

                if (vertex.length > 0) {

                  const vertexParts = vertex.split('/');
                  faceVertices.push(vertexParts);

                }

              }


              const v1 = faceVertices[0];

              for (let j = 1, jl = faceVertices.length - 1; j < jl; j++) {

                const v2 = faceVertices[j];
                const v3 = faceVertices[j + 1];
                state.addFace(v1[0], v2[0], v3[0], v1[1], v2[1], v3[1], v1[2], v2[2], v3[2]);

              }

            } else if (lineFirstChar === 'l') {

              const lineParts = line.substring(1).trim().split(' ');
              let lineVertices = [];
              const lineUVs = [];

              if (line.indexOf('/') === - 1) {

                lineVertices = lineParts;

              } else {

                for (let li = 0, llen = lineParts.length; li < llen; li++) {

                  const parts = lineParts[li].split('/');
                  if (parts[0] !== '') lineVertices.push(parts[0]);
                  if (parts[1] !== '') lineUVs.push(parts[1]);

                }

              }

              state.addLineGeometry(lineVertices, lineUVs);

            } else if (lineFirstChar === 'p') {

              const lineData = line.substr(1).trim();
              const pointData = lineData.split(' ');
              state.addPointGeometry(pointData);

            } else if ((result = _object_pattern.exec(line)) !== null) {

              const name = (' ' + result[0].substr(1).trim()).substr(1);
              state.startObject(name);

            } else if (_material_use_pattern.test(line)) {

              state.object.startMaterial(line.substring(7).trim(), state.materialLibraries);

            } else if (_material_library_pattern.test(line)) {

              state.materialLibraries.push(line.substring(7).trim());

            } else if (_map_use_pattern.test(line)) {

              console.warn('THREE.OBJLoader: Rendering identifier "usemap" not supported. Textures must be defined in MTL files.');

            } else if (lineFirstChar === 's') {

              result = line.split(' ');

              if (result.length > 1) {

                const value = result[1].trim().toLowerCase();
                state.object.smooth = value !== '0' && value !== 'off';

              } else {

                state.object.smooth = true;

              }

              const material = state.object.currentMaterial();
              if (material) material.smooth = state.object.smooth;

            } else {

              if (line === '\0') continue;
              console.warn('THREE.OBJLoader: Unexpected line: "' + line + '"');

            }

          }

          state.finalize();
          const container = new THREE.Group();
          container.materialLibraries = [].concat(state.materialLibraries);
          const hasPrimitives = !(state.objects.length === 1 && state.objects[0].geometry.vertices.length === 0);

          if (hasPrimitives === true) {

            for (let i = 0, l = state.objects.length; i < l; i++) {

              const object = state.objects[i];
              const geometry = object.geometry;
              const materials = object.materials;
              const isLine = geometry.type === 'Line';
              const isPoints = geometry.type === 'Points';
              let hasVertexColors = false;

              if (geometry.vertices.length === 0) continue;
              const buffergeometry = new THREE.BufferGeometry();
              buffergeometry.setAttribute('position', new THREE.Float32BufferAttribute(geometry.vertices, 3));

              if (geometry.normals.length > 0) {

                buffergeometry.setAttribute('normal', new THREE.Float32BufferAttribute(geometry.normals, 3));

              }

              if (geometry.colors.length > 0) {

                hasVertexColors = true;
                buffergeometry.setAttribute('color', new THREE.Float32BufferAttribute(geometry.colors, 3));

              }

              if (geometry.hasUVIndices === true) {

                buffergeometry.setAttribute('uv', new THREE.Float32BufferAttribute(geometry.uvs, 2));

              }


              const createdMaterials = [];

              for (let mi = 0, miLen = materials.length; mi < miLen; mi++) {

                const sourceMaterial = materials[mi];
                const materialHash = sourceMaterial.name + '_' + sourceMaterial.smooth + '_' + hasVertexColors;
                let material = state.materials[materialHash];

                if (this.materials !== null) {

                  material = this.materials.create(sourceMaterial.name);

                  if (isLine && material && !(material instanceof THREE.LineBasicMaterial)) {

                    const materialLine = new THREE.LineBasicMaterial();
                    THREE.Material.prototype.copy.call(materialLine, material);
                    materialLine.color.copy(material.color);
                    material = materialLine;

                  } else if (isPoints && material && !(material instanceof THREE.PointsMaterial)) {

                    const materialPoints = new THREE.PointsMaterial({
                      size: 10,
                      sizeAttenuation: false
                    });
                    THREE.Material.prototype.copy.call(materialPoints, material);
                    materialPoints.color.copy(material.color);
                    materialPoints.map = material.map;
                    material = materialPoints;

                  }

                }

                if (material === undefined) {

                  if (isLine) {

                    material = new THREE.LineBasicMaterial();

                  } else if (isPoints) {

                    material = new THREE.PointsMaterial({
                      size: 1,
                      sizeAttenuation: false
                    });

                  } else {

                    material = new THREE.MeshPhongMaterial();

                  }

                  material.name = sourceMaterial.name;
                  material.flatShading = sourceMaterial.smooth ? false : true;
                  material.vertexColors = hasVertexColors;
                  state.materials[materialHash] = material;

                }

                createdMaterials.push(material);

              }


              let mesh;

              if (createdMaterials.length > 1) {

                for (let mi = 0, miLen = materials.length; mi < miLen; mi++) {

                  const sourceMaterial = materials[mi];
                  buffergeometry.addGroup(sourceMaterial.groupStart, sourceMaterial.groupCount, mi);

                }

                if (isLine) {

                  mesh = new THREE.LineSegments(buffergeometry, createdMaterials);

                } else if (isPoints) {

                  mesh = new THREE.Points(buffergeometry, createdMaterials);

                } else {

                  mesh = new THREE.Mesh(buffergeometry, createdMaterials);

                }

              } else {

                if (isLine) {

                  mesh = new THREE.LineSegments(buffergeometry, createdMaterials[0]);

                } else if (isPoints) {

                  mesh = new THREE.Points(buffergeometry, createdMaterials[0]);

                } else {

                  mesh = new THREE.Mesh(buffergeometry, createdMaterials[0]);

                }

              }

              mesh.name = object.name;
              container.add(mesh);

            }

          } else {

            if (state.vertices.length > 0) {

              const material = new THREE.PointsMaterial({
                size: 1,
                sizeAttenuation: false
              });
              const buffergeometry = new THREE.BufferGeometry();
              buffergeometry.setAttribute('position', new THREE.Float32BufferAttribute(state.vertices, 3));

              if (state.colors.length > 0 && state.colors[0] !== undefined) {

                buffergeometry.setAttribute('color', new THREE.Float32BufferAttribute(state.colors, 3));
                material.vertexColors = true;

              }

              const points = new THREE.Points(buffergeometry, material);
              container.add(points);

            }

          }

          return container;

        }

      }

      THREE.OBJLoader = OBJLoader;

    })();

  </script>



</body>

</html>

运行结果

图片

系列文章

序号目录直达链接
1HTML实现3D相册https://want595.blog.csdn.net/article/details/138652869
2HTML元素周期表https://want595.blog.csdn.net/article/details/138653653
3HTML黑客帝国字母雨https://want595.blog.csdn.net/article/details/138654054
4HTML五彩缤纷的爱心https://want595.blog.csdn.net/article/details/138654581
5HTML飘落的花瓣https://want595.blog.csdn.net/article/details/138785324
6HTML哆啦A梦https://want595.blog.csdn.net/article/details/138834877
7HTML爱情树https://want595.blog.csdn.net/article/details/139009594
8HTML新春烟花盛宴https://want595.blog.csdn.net/article/details/139102775
9HTML想见你https://want595.blog.csdn.net/article/details/139135677
10HTML蓝色爱心https://want595.blog.csdn.net/article/details/139136334
11HTML跳动的爱心https://want595.blog.csdn.net/article/details/139137326
12HTML橙色爱心https://want595.blog.csdn.net/article/details/139139511
13HTML大雪纷飞https://want595.blog.csdn.net/article/details/139136829
14
15
16
17
18
19
20
21
22
23
24
25
26
27

写在后面

我是一只有趣的兔子，感谢你的喜欢！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/647794.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

0基础认识C语言

0基础认识C语言

为了给0基础一个舒服的学习路径&#xff0c;就有了这个专栏希望带大家一起进步。 话不多说&#xff0c;开始正题。 一、C语言的一段小历史 C语言的设计要追溯到20世纪60年代末和70年代初&#xff0c;在那个时代美国有这么一号人叫做丹尼斯.里奇&#xff0c;他和同事肯.汤普逊…
阅读更多...
redis数据操作相关命令

redis数据操作相关命令

1.list操作 1.1 rpush rpush&#xff1a;新的元素添加到list最右边 #从右边依次往List添加1,2,3 RPUSH name 1 RPUSH name 2 RPUSH name 3#查看列表&#xff1a;返回 1,2,3 LRANGE name 0 -1结果如下&#xff1a; 1.2 lpush lpush&#xff1a;新加的元素在list最左边 #从…
阅读更多...
WordPress安装插件失败No working transports found

WordPress安装插件失败No working transports found

1. 背景&#xff08;Situation&#xff09; WordPress 社区有非常多的主题和插件&#xff0c;大部分人用 WordPress 都是为了这些免费好用的主题和插件。但是今天安装完 WordPress 后安装插件时出现了错误提示&#xff1a;“ 安装失败&#xff1a;下载失败。 No working trans…
阅读更多...
Android 处理音频焦点，解决音乐播放冲突的问题

Android 处理音频焦点，解决音乐播放冲突的问题

1. 音频焦点是什么 在Android中&#xff0c;两个或多个 Android 应用可以同时将音频播放到同一输出流&#xff0c;系统会将所有音频混合在一起。 但是多数情况下&#xff0c;这对于用户来说是感到困惑的。为了避免多个应用的多个音频一起播放&#xff0c;Android 引入了“音频…
阅读更多...
HTML5 基本框架

HTML5 基本框架

HTML5基本的内容 文章目录 系列文章目录前言一、HTML5 基本框架二、具体框架结构三、知识补充总结 前言 HTML5的介绍&#xff1a; HTML5 是一种用于构建网页内容的标准化语言。它是 HTML&#xff08;超文本标记语言&#xff09;的第五个版本&#xff0c;引入了许多新的功能和特…
阅读更多...
视频号小店去哪里找货源？最全货源渠道分享！

视频号小店去哪里找货源？最全货源渠道分享！

大家好&#xff0c;我是电商糖果 视频号小店因为是这两年电商行业新出来的黑马&#xff0c;吸引着不少商家入驻。 入驻了商家中很多都没有自己的货源渠道。 他们基本都是从无货源开始起步&#xff0c;后期通过积累资源&#xff0c;慢慢搭建属于自己的货源渠道。 可是渐渐的…
阅读更多...
Oracle实践｜内置函数之聚合函数

Oracle实践｜内置函数之聚合函数

&#x1f4eb; 作者简介&#xff1a;「六月暴雪飞梨花」&#xff0c;专注于研究Java&#xff0c;就职于科技型公司后端工程师 &#x1f3c6; 近期荣誉&#xff1a;华为云云享专家、阿里云专家博主、腾讯云优秀创作者、ACDU成员 &#x1f525; 三连支持&#xff1a;欢迎 ❤️关注…
阅读更多...
SRE视角下的DevOps：构建稳定高效的软件交付流程

SRE视角下的DevOps：构建稳定高效的软件交付流程

SRE 和 DevOps 有什么区别和联系&#xff1f;本文对此进行了解读&#xff0c;并着重从 SRE 实践出发阐述了 DevOps 的建设思路。 SRE 就是在用软件工程的思维和方法论完成以前由系统管理员团队手动完成的工作。SRE 的职责是运维一个服务&#xff0c;该服务由一些相关的系统组件…
阅读更多...
解决vue3 vite打包报Root file specified for compilation问题

解决vue3 vite打包报Root file specified for compilation问题

解决方法&#xff1a; 修改package.json打包命令 把 "build": "vue-tsc --noEmit && vite build" 修改为 "build": "vite build" 就可以了 另外关于allowJs这个问题&#xff0c;在tsconfig.json文件中配置"allowJs&qu…
阅读更多...
基于深度学习和opencv的车牌识别系统

基于深度学习和opencv的车牌识别系统

免费获取方式↓↓↓ 项目介绍028&#xff1a; 基于深度学习和opencv的车牌识别系统 同时利用对图片每一帧图像加入视频分析模块 图片分析模块可以依据界面按钮提示进行相应功能 视频分析模块可以根据按钮提示进行对视频的分析 &#xff08;视频模块的视频追踪处理时间较长&…
阅读更多...
JVM之【运行时数据区】

JVM之【运行时数据区】

JVM简图 运行时数据区简图 一、程序计数器&#xff08;Program Counter Register&#xff09; 1.程序计数器是什么&#xff1f; 程序计数器是JVM内存模型中的一部分&#xff0c;它可以看作是一个指针&#xff0c;指向当前线程所执行的字节码指令的地址。每个线程在执行过程中…
阅读更多...
AI预测体彩排3采取888=3策略+和值012路一缩定乾坤测试5月26日预测第2弹

AI预测体彩排3采取888=3策略+和值012路一缩定乾坤测试5月26日预测第2弹

今天继续基于8883的大底进行测试&#xff0c;昨天的预测已成功命中&#xff01;今天继续测试&#xff0c;按照排三前面的规律&#xff0c;感觉要出对子了&#xff0c;所以本次预测不再杀对子&#xff0c;将采用杀一个和尾来代替。好了&#xff0c;直接上结果吧~ 首先&#xff0…
阅读更多...
访问tomcat的webapps下war包，页面空白

访问tomcat的webapps下war包，页面空白

SpringBootvue前后端分离项目&#xff0c;Vue打包到SpringBoot中 常见问题 错误一&#xff1a;war包访问页面空白 前提&#xff1a;项目在IDEA里配置tomcat可以启动访问项目 但是&#xff0c;打成war包拷贝到tomcat webapps下能启动却访问不了&#xff0c;页面显示空白 原…
阅读更多...
YAML详情

YAML详情

一、kubernetes支持对象 Kubernetes支持YAML和JSON格式管理资源对象 JSON格式&#xff1a;主要用于api接口之间消息的传递YAML格式&#xff1a;用于配置和管理&#xff0c;YAML是一种简洁的非标记性语言&#xff0c;内容格式人性化&#xff0c;较易读 二、YAML语法格式注意点 …
阅读更多...
LeetCode热题100—链表（一）

LeetCode热题100—链表（一）

160.相交链表 题目 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#x…
阅读更多...
【css3】06-css3新特性之网页布局篇

【css3】06-css3新特性之网页布局篇

目录 伸缩布局或者弹性布局【响应式布局】 1 设置父元素为伸缩盒子 2 设置伸缩盒子主轴方向 3 设置元素在主轴的对齐方式 4 设置元素在侧轴的对齐方式 5 设置元素是否换行显示 6 设置元素换行后的对齐方式 7 效果测试原码 伸缩布局或者弹性布局【响应式布局】 1 设置父元…
阅读更多...
C#屏蔽基类成员

C#屏蔽基类成员

可以用与积累成员名称相同的成员来屏蔽 要让编译器知道你在故意屏蔽继承的成员&#xff0c;可以用new修饰符。否则程序可以成功编译&#xff0c;但是编译器会警告你隐藏了一个继承的成员 using System;class someClass {public string F1 "Someclass F1";public v…
阅读更多...
ISIS协议

ISIS协议

isis协议基础 isis概述 isis&#xff1a;中间系统到中间系统isis是公有协议&#xff0c;属于IGP协议&#xff0c;主要应用于一个AS&#xff08;企业&#xff09;自治系统内部isis是一种链路状态协议&#xff0c;使用SPF算法早期的isis是基于CLNP&#xff08;无连接网络协议&a…
阅读更多...
【知识蒸馏】feature-based 知识蒸馏 - - CWD（channel-wise knowledge dissillation）

【知识蒸馏】feature-based 知识蒸馏 - - CWD（channel-wise knowledge dissillation）

一、CWD特征蒸馏介绍 大部分的KD方法都是通过algin学生网络和教师网络的归一化的feature map, 最小化feature map上的激活值的差异。 逐通道知识蒸馏&#xff08;channel-wise knowledge dissillation, CWD&#xff09;将每个通道的特征图归一化来得到软概率图。通过简单地最小…
阅读更多...
一款颜值颇高的虚拟列表！差点就被埋没了，终于还是被我挖出来了

一款颜值颇高的虚拟列表！差点就被埋没了，终于还是被我挖出来了

大家好&#xff0c;我是晓衡&#xff01; 今天&#xff0c;推荐一款颇有颜值的虚拟列表组件&#xff0c;不然真的被埋没就可惜了&#xff01; 我们先来看下效果&#xff1a; 感觉怎么样&#xff1f;还不错吧&#xff01; 为什么说这个资源差点被埋没呢&#xff1f;因为个朋友找…
阅读更多...
最新文章

Copyright @ 2022~2023