three实现可配置参数雪花粒子动画生成器代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：three实现可配置参数雪花粒子动画生成器代码，可选择雪花粒子形状、角度、速度、数量等参数。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
	margin: 0;
	overflow: hidden;
	background: linear-gradient(to bottom, #0e1714, #0a0c0e);
	background-image: url("//repo.bfw.wiki/bfwrepo/image/674f8c1e0bbb0.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
canvas {
	width: 100vw;
	height: 100vh;
	opacity: 0.8;
	background: transparent;
}
.loading {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-family: Arial, sans-serif;
}
#fullscreen-btn {
	position: fixed;
	top: 20px;
	left: 20px;
	padding: 5px 10px 10px 10px;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: white;
	cursor: pointer;
	border-radius: 5px;
	font-family: Arial, sans-serif;
	z-index: 1000;
	font-size: 20px;
}
#fullscreen-btn:hover {
	background: rgba(255, 255, 255, 0.3);
}
</style>

  
  
</head>

<body translate="no">
  <div class="loading">Loading Flakes ❄️❄️❄️...</div>
<button id="fullscreen-btn">⤢</button>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
  
      <script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
document.querySelector(".loading").style.display = "none";

const fullscreenBtn = document.getElementById("fullscreen-btn");
fullscreenBtn.addEventListener("click", () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

function createSnowflakeGeometry() {
  const geometry = new THREE.BufferGeometry();
  const vertices = [];

  for (let i = 0; i < 6; i++) {
    const angle = i * Math.PI * 2 / 6;
    vertices.push(
    0,
    0,
    0,
    Math.cos(angle) * 0.5,
    Math.sin(angle) * 0.5,
    0,
    Math.cos(angle + Math.PI / 6) * 0.3,
    Math.sin(angle + Math.PI / 6) * 0.3,
    0);

  }

  geometry.setAttribute(
  "position",
  new THREE.Float32BufferAttribute(vertices, 3));

  return geometry;
}

function createStarGeometry() {
  const geometry = new THREE.BufferGeometry();
  const vertices = [];

  for (let i = 0; i < 5; i++) {
    const angle = i * Math.PI * 2 / 5;
    const nextAngle = (i + 1) * Math.PI * 2 / 5;
    vertices.push(
    0,
    0,
    0,
    Math.cos(angle) * 0.5,
    Math.sin(angle) * 0.5,
    0,
    Math.cos(nextAngle) * 0.5,
    Math.sin(nextAngle) * 0.5,
    0);

  }

  geometry.setAttribute(
  "position",
  new THREE.Float32BufferAttribute(vertices, 3));

  return geometry;
}

function createTriangleGeometry() {
  const geometry = new THREE.BufferGeometry();
  const vertices = [0, 0.5, 0, -0.5, -0.5, 0, 0.5, -0.5, 0];

  geometry.setAttribute(
  "position",
  new THREE.Float32BufferAttribute(vertices, 3));

  return geometry;
}

function createCircleGeometry() {
  const geometry = new THREE.CircleGeometry(0.5, 32);
  return geometry;
}

function createSquareGeometry() {
  const geometry = new THREE.PlaneGeometry(1, 1);
  return geometry;
}

function createDonutGeometry() {
  const geometry = new THREE.TorusGeometry(0.5, 0.2, 16, 100);
  return geometry;
}

function createCubeGeometry() {
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  return geometry;
}

function createPyramidGeometry() {
  const geometry = new THREE.ConeGeometry(0.5, 1, 4);
  return geometry;
}

function createSphereGeometry() {
  return new THREE.SphereGeometry(0.5, 32, 32);
}

function createEggGeometry() {
  const geometry = new THREE.SphereGeometry(0.5, 32, 32);
  geometry.scale(1, 1.5, 1);
  return geometry;
}

function createHexagonGeometry() {
  const geometry = new THREE.BufferGeometry();
  const vertices = [];

  for (let i = 0; i < 6; i++) {
    const angle = i * Math.PI * 2 / 6;
    const nextAngle = (i + 1) * Math.PI * 2 / 6;
    vertices.push(
    0,
    0,
    0,
    Math.cos(angle) * 0.5,
    Math.sin(angle) * 0.5,
    0,
    Math.cos(nextAngle) * 0.5,
    Math.sin(nextAngle) * 0.5,
    0);

  }

  geometry.setAttribute(
  "position",
  new THREE.Float32BufferAttribute(vertices, 3));

  return geometry;
}

function createBananaGeometry() {
  const curve = new THREE.CubicBezierCurve3(
  new THREE.Vector3(-0.5, 0, 0),
  new THREE.Vector3(-0.2, 0.5, 0),
  new THREE.Vector3(0.2, 0.5, 0),
  new THREE.Vector3(0.5, 0, 0));


  const geometry = new THREE.TubeGeometry(curve, 32, 0.1, 8, false);
  return geometry;
}

function getGeometryByShape(shape) {
  switch (shape) {
    case "banana":
      return createBananaGeometry();
    case "circle":
      return createCircleGeometry();
    case "cube":
      return createCubeGeometry();
    case "donut":
      return createDonutGeometry();
    case "egg":
      return createEggGeometry();
    case "hexagon":
      return createHexagonGeometry();
    case "pyramid":
      return createPyramidGeometry();
    case "sphere":
      return createSphereGeometr.........完整代码请登录后点击上方下载按钮下载查看