tube piece

import './libs/weapp-adapter/index'

import './libs/symbol'

import * as THREE from './libs/threejs/three.min'

//require('./js/tween.min.js');

import './libs/threejs/plugins/Curves'

import './libs/threejs/plugins/SceneUtils'

import './libs/threejs/plugins/PostProcessing'

var Tube, Webgl, animate, animation, binormal, gui, init, lookAhead, normal, resizeHandler, scale, tubeGeometry, webgl;

webgl = null;

gui = null;

animation = true;

lookAhead = true;

tubeGeometry = null;

scale = 10;

binormal = new THREE.Vector3();

normal = new THREE.Vector3();

///////////////////////////////////

// Three.js Scene Basics

Webgl = (function () {

  Webgl = function (width, height) {

    var bluriness;

    // Basic three.js setup

    this.scene = new THREE.Scene;

    // scene cam

    this.camera = new THREE.PerspectiveCamera(50, width / height, 1, 10000);

    this.camera.position.z = 100;

    //spline cam

    this.splineCamera = new THREE.PerspectiveCamera(85, width / height, 0.01, 1000);

    this.scene.add(this.splineCamera);

//改动点，也就是一些import了

    // the renderer

    // this.renderer = new THREE.WebGLRenderer({

    //  antialias: true

    // });

    this.renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });

    this.renderer.setPixelRatio(window.devicePixelRatio);

    this.renderer.setSize(width, height);

    this.renderer.setClearColor(0x000000);

    // add the tooooob

    this.tube = new Tube;

    this.tube.position.set(0, 0, 0);

    this.tube.scale.set(scale, scale, scale);

    this.scene.add(this.tube);

    // setup post-processing

    this.renderer.autoClear = false;

    this.composer = new THREE.EffectComposer(this.renderer);

    this.composer.addPass(new THREE.RenderPass(this.scene, this.splineCamera));

    // add a bleach pass

    this.shaderEffect = new THREE.ShaderPass(THREE.BleachBypassShader);

    this.shaderEffect.uniforms["opacity"].value = 0.95;

    this.composer.addPass(this.shaderEffect);

    // add a bloom pass

    this.bloomEffect = new THREE.BloomPass(2.5);

    this.composer.addPass(this.bloomEffect);

    // add a horz tilt shift pass

    bluriness = 1.5;

    this.hTiltPass = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader);

    this.hTiltPass.uniforms['h'].value = bluriness / (0.75 * width);

    this.hTiltPass.uniforms['r'].value = 0.5;

    this.composer.addPass(this.hTiltPass);

    // add a vert title shift pass

    this.vTiltPass = new THREE.ShaderPass(THREE.VerticalTiltShiftShader);

    this.vTiltPass.uniforms['v'].value = bluriness / (0.75 * width);

    this.vTiltPass.uniforms['r'].value = 0.5;

    this.composer.addPass(this.vTiltPass);

    // @bokehPass = new THREE.BokehPass( @scene, @splineCamera, {

    //  focus: 1.0

    //  aperture: 0.025

    //  maxblur: 1.0

    //  width: width

    //  height: height

    // })

    // @composer.addPass @bokehPass

    // add a film pass

    this.filmPass = new THREE.FilmPass(0.25, 0.25, 2048, false);

    // render to screen so we can see something

    this.filmPass.renderToScreen = true;

    this.composer.addPass(this.filmPass);

  };

  Webgl.prototype.resize = function (width, height) {

    this.camera.aspect = width / height;

    this.camera.updateProjectionMatrix();

    this.renderer.setSize(width, height);

  };

  Webgl.prototype.render = function () {

    var dir, lookAt, looptime, offset, pick, pickNext, pickt, pos, segments, t, time;

    // Animate Camera Along Spline

    time = Date.now();

    looptime = 25 * 1000;

    t = time % looptime / looptime;

    pos = tubeGeometry.parameters.path.getPointAt(t);

    pos.multiplyScalar(scale);

    // interpolation

    segments = tubeGeometry.tangents.length;

    pickt = t * segments;

    pick = Math.floor(pickt);

    pickNext = (pick + 1) % segments;

    binormal.subVectors(tubeGeometry.binormals[pickNext], tubeGeometry.binormals[pick]);

    binormal.multiplyScalar(pickt - pick).add(tubeGeometry.binormals[pick]);

    dir = tubeGeometry.parameters.path.getTangentAt(t);

    offset = 5;

    normal.copy(binormal).cross(dir);

    // We move on a offset on its binormal

    pos.add(normal.clone().multiplyScalar(offset));

    this.splineCamera.position.copy(pos);

    // Using arclength for stablization in look ahead.

    lookAt = tubeGeometry.parameters.path.getPointAt((t + 30 / tubeGeometry.parameters.path.getLength()) % 1).multiplyScalar(scale);

    if (!lookAhead) {

      lookAt.copy(pos).add(dir);

    }

    this.splineCamera.matrix.lookAt(this.splineCamera.position, lookAt, normal);

    this.splineCamera.rotation.setFromRotationMatrix(this.splineCamera.matrix, this.splineCamera.rotation.order);

    this.renderer.render(this.scene, animation === true ? this.splineCamera : this.camera);

    if (this.composer) {

      this.composer.render();

    }

  };

  return Webgl;

})();

///////////////////////////////////

// TOOOOOB

Tube = (function () {

  Tube = function () {

    var alphaTexture, closed, extrudePath, gridTexture, radiusSegments, repeatX, segments, texture;

    THREE.Object3D.call(this);

    extrudePath = new THREE.Curves.TrefoilKnot();

    segments = 200;

    radiusSegments = 20;

    repeatX = 10;

    closed = true;

    tubeGeometry = new THREE.TubeGeometry(extrudePath, segments, 4, radiusSegments, closed);

    THREE.ImageUtils.crossOrigin = '';

    texture = THREE.ImageUtils.loadTexture("grid-two-two.png");

    texture.minFilter = THREE.NearestFilter;

    texture.wrapS = THREE.RepeatWrapping;

    texture.repeat.x = repeatX;

    alphaTexture = THREE.ImageUtils.loadTexture("grid-two-two-alpha.png");

    alphaTexture.minFilter = THREE.NearestFilter;

    alphaTexture.wrapS = THREE.RepeatWrapping;

    alphaTexture.repeat.x = repeatX;

    gridTexture = THREE.ImageUtils.loadTexture("-grid.png");

    gridTexture.minFilter = THREE.NearestFilter;

    gridTexture.wrapS = THREE.RepeatWrapping;

    gridTexture.repeat.x = repeatX;

    this.mesh = THREE.SceneUtils.createMultiMaterialObject(tubeGeometry, [

      new THREE.MeshBasicMaterial({

        side: THREE.DoubleSide,

        map: gridTexture,

        //alphaMap: gridTexture

        transparent: true

      }),

      new THREE.MeshBasicMaterial({

        color: 0xB0E6E1,

        side: THREE.BackSide,

        map: texture,

        //alphaMap: alphaTexture

        transparent: false

      })

    ]);

    return this.add(this.mesh);

  };

  Tube.prototype = new THREE.Object3D;

  Tube.prototype.constructor = Tube;

  Tube.prototype.update = function () { };

  //@mesh.rotation.y += 0.01

  return Tube;

})();

///////////////////////////////////#

// MAIN + INIT

init = function () {

  webgl = new Webgl(window.innerWidth, window.innerHeight);

  //$('.three').append(webgl.renderer.domElement);

  //gui = new (dat.GUI)

  //gui.close()

  window.addEventListener('resize', resizeHandler);

  return animate();

};

resizeHandler = function () {

  return webgl.resize(window.innerWidth, window.innerHeight);

};

animate = function () {

  requestAnimationFrame(animate);

  return webgl.render();

};

init();