three+TweenMax+perlin实现三维点状彩色粒子洞穴穿越动画效果代码-html代码-BFW代码库

three+TweenMax+perlin实现三维点状彩色粒子洞穴穿越动画效果代码

代码语言：html

所属分类：粒子

代码描述：three+TweenMax+perlin实现三维点状彩色粒子洞穴穿越动画效果代码

代码标签： three TweenMax perlin 三维点状彩色粒子洞穴穿越动画

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

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

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


</head>

<body>

    <canvas></canvas>
    <!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/perlin-min.js"></script>
    <script>
        var ww = window.innerWidth,
  wh = window.innerHeight;
var curve;
var opts = {
  radius: 1.5,
  segments: 400,
  scale: 0.1,
  radiusSegments: 25
};

var renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("canvas"),
  antialias: true
});
renderer.setSize(ww, wh);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, ww / wh, 0.0001, 1000);
var controls = new THREE.OrbitControls(camera);
camera.position.z = 50;
camera.position.x = 100;
camera.position.y = 100;

/* ==================== */
/* ===== ON RESIZE ==== */
/* ==================== */
window.addEventListener("resize", function() {
  ww = window.innerWidth;
  wh = window.innerHeight;
  camera.aspect = ww / wh;
  camera.updateProjectionMatrix();
  renderer.setSize(ww, wh);
});

/* ====================== */
/* === Path creation ==== */
/* ====================== */
var particles = new THREE.Object3D();
scene.add(particles);
var dotMap = new THREE.TextureLoader().load("//repo.bfw.wiki/bfwrepo/icon/5de90f964d501.png");
var glowMap = new THREE.TextureLoader().load("//repo.bfw.wiki/bfwrepo/icon/5de90f964d501.png");
var pathPoints = [
  [935, 0],
  [1287, 251],
  [1007, 341],
  [785, 801],
  [506, 369],
  [0, 510],
  [42, 138],
  [618, 203]
];
var glows = new THREE.Object3D();
scene.add(glows);
var spriteMaterial = new THREE.SpriteMaterial({
  map: glowMap,
  color: 0xffffff,
  transparent: true,
  blending: THREE.AdditiveBlending
});

function createTube() {
  //Create the 'tube'
  var points = [];
  for (var i = 0; i < pathPoints.length; i++) {
    var x = pathPoints[i][0];
    var y = (Math.random() - 0.5) * 500;
    var z = pathPoints[i][1];
    points.push(new THREE.Vector3(x, y, z).multiplyScalar(opts.scale));
  }
  curve = new THREE.CatmullRomCurve3(points);
  curve.closed = true;
  curve.type = "catmullrom";
  curve.tension = 0.6;

  //Create the particles
  var geom = new THREE.Geometry();
  var geom2 = new THREE.Geometry();
  var geom3 = new THREE.Geometry();
  var frames = curve.computeFrenetFrames(opts.segments, true);
  var endPoint = curve.getPointAt(1);
  for (i = 0; i < opts.segments; i++) {
    var N = frames.normals[i];
    var B = frames.binormals[i];
    for (var j = 0; j < opts.radiusSegments; j++) {
      var index = i / opts.segments;
      // index += Math.random()*0.01;
      // index = Math.min(index, 1)
      var p = curve.getPointAt(index);
      var vertex = p.clone();
      var angle = Math.random() * Math.PI * 2;
      var angle = (j / opts.radiusSegments) * Math.PI * 2;
      var sin = Math.sin(angle);
      var cos = -Math.cos(angle);

      var normal = new THREE.Vector3();
      normal.x = (cos * N.x + sin * B.x);
      normal.y = (cos * N.y + .........完整代码请登录后点击上方下载按钮下载查看