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);
Custom.........完整代码请登录后点击上方下载按钮下载查看