three打造三维蒲公英效果-html代码-BFW代码库

three打造三维蒲公英效果

代码语言：html

所属分类：三维

代码描述：three打造三维蒲公英效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body {
  height: 100vh;
  background-color: hotpink;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

</head>
<body translate="no">
<div id="canvas-wrapper" aria-label="dandelion-dahlia flowers"></div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>
<script >
/*
 * DANDELIONS DAHLIAS
 * Made with ThreeJS - Enjoy!
 *
 * Use cursor to move around the floating animation. 
 * On mobile touch + drag screen.
 *
 * Hover the flowers to change their material and light effect.
 * On mobile touch the flowers to change them, and touch anywhere else on the screen to go back to default material.
 *
 * If you have any performance tips on this code, I'm all ears!
 *
 * #043 - #100DaysOfCode
 * By ilithya | 2020
 * https://www.ilithya.rocks/
 * https://twitter.com/ilithya_net
 */

const nearDist = 1;
const farDist = 1000;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
nearDist,
farDist);

camera.position.set(0, 0, 450);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor("hotpink");
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.querySelector("#canvas-wrapper").appendChild(renderer.domElement);

// CREATE FLOWER
const petalRadius = 100;
const geometry = new THREE.TetrahedronBufferGeometry(petalRadius);
const material = new THREE.MeshNormalMaterial();
const group = new THREE.Group();

// CREATES TubeBufferGeometry
const CustomSinCurve = function (scale) {
  THREE.Curve.call(this);
  this.scale = scale === undefined ? 1 : scale;
};
CustomSinCurve.prototype = Object.create(THREE.Curve.prototype);
CustomSinCurve.prototype.constructor = CustomSinCurve;
CustomSinCurve.prototype.getPoint = function (t) {
  const tx = t * 3 - 1.5;
  const ty = Math.sin(2 * Math.PI * t);
  const tz = 0;

  return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
};

const Flower = function (group, distance = null) {
  this.group = group;
  this.dist = distance;

  this.group.position.x = petalRadius * -1;
  this.group.position.y = Math.round(petalRadius / 2);
  this.group.rotation.z = 250;

  if (distance !== null) {
    this.group.position.x = Math.round(this.dist / 2);
    this.group.position.y = Math.round(petalRadius * -0.5);
    this.group.position.z = 10;

    this.group.rotation.x = Math.round(this.dist / -2);
    this.group.rotation.z = Math.round(this.dist * 2);
  }
};

// CREATE PETALS
Flower.prototype.create = function () {
  const petalCount = 180;
  for (let i = 0; i < petalCount; i++) {
    const mesh = new THREE.Mesh(geometry, material);
    const tau = 2 * Math.PI;

    mesh.rotation.x = Math.random() * tau;
    mesh.rotation.y = Math.........完整代码请登录后点击上方下载按钮下载查看