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