【幻妙音符——HTML 实现（效果+代码

鉴于篇幅以及图片大小，效果仅展示一部分，具体特效欢迎大家体验~

代码

---

这是HTML代码，主要是引用的JS部分代码。

index.html

JS部分代码示例：

index.js

const COLORS = {

red: 0xf54843,

green: 0x43f565,

yellow: 0xeff543,

};

const SCENE_CONFIG = {

pathRadius: 4,

pathAnimationDuration: 20,

cameraSpeed: 14.079549454417457,

};

const NEXT_PATH_MATRIX = new THREE.Matrix4().multiplyMatrices(

new THREE.Matrix4().makeTranslation(0, 0, -8),

new THREE.Matrix4().makeScale(-1, -1, 1)

);

let root;

let tubes = [];

let cameraTween;

window.onload = function() {

root = new THREERoot({

createCameraControls: false,

antialias: true, //(window.devicePixelRatio === 1),

fov: 80,

zNear: 0.001,

zFar: 2000,

});

root.renderer.setClearColor(new THREE.Color().setHSL(0, 0, 0.05));

root.camera.position.set(0, 0.05, 1);

createTubes();

beginTubesSequence();

};

// METHODS

function createTubes() {

const matrix = new THREE.Matrix4();

matrix.makeRotationZ(Math.PI * 0.00);

tubes[0] = createPathMesh(matrix);

matrix.makeRotationZ(Math.PI * 0.66);

tubes[1] = createPathMesh(matrix);

matrix.makeRotationZ(Math.PI * 1.32);

tubes[2] = createPathMesh(matrix);

}

function beginTubesSequence() {

// BLOOM

const strength = 1.25; // 0 - x

const radius = 1.0; // 0 - 1

const threshold = 0.5; // 0 - 1

const bloomPass = new THREE.UnrealBloomPass(

new THREE.Vector2(window.innerWidth, window.innerHeight),

strength,

radius,

threshold

);

const copyPass = new THREE.ShaderPass(THREE.CopyShader);

root.initPostProcessing([

bloomPass,

copyPass

]);

// LIGHT

let light;

light = new THREE.DirectionalLight(COLORS.red, 1);

light.position.set(1, 0, 0);

root.add(light);

light = new THREE.DirectionalLight(COLORS.green, 1);

light.position.set(-1, 0, 0);

root.add(light);

light = new THREE.DirectionalLight(COLORS.red, 1);

light.position.set(0, 0, 1);

root.add(light);

let cameraPanRange = 1.0, cameraYawRange = cameraPanRange * 1.125;

window.addEventListener(‘mousemove’, (e) => {

const nx = e.clientX / window.innerWidth * 2 - 1;

const ny = -e.clientY / window.innerHeight * 2 + 1;

const ry = -THREE.Math.mapLinear(nx, -1, 1, cameraPanRange * -0.5, cameraPanRange * 0.5);

const rx = THREE.Math.mapLinear(ny, -1, 1, cameraYawRange * -0.5, cameraYawRange * 0.5);

TweenMax.to(root.camera.rotation, 1, {

x: rx,

y: ry,

ease: Power2.easeOut,

});

});

const tweenCamera = () => {

cameraTween = TweenMax.to(root.camera.position, SCENE_CONFIG.cameraSpeed, {

z: -=${SCENE_CONFIG.pathRadius * 2},

ease: Power0.easeIn,

onComplete: tweenCamera

});

};

tweenCamera();

cameraTween.timeScale(0);

const proxy = {

rx: 0,

ry: 0,

rz: 0,

cz: 0,

};

const camTL = new TimelineMax();

camTL.to(proxy, 4, {rz: 1, cz: 1, ease: Power2.easeIn, onUpdate: () => {

cameraTween.timeScale(proxy.cz);

}}, 0);

root.addUpdateCallback(() => {

root.scene.rotation.z -= proxy.rz * 0.003;

});

tubes.forEach((tube) => {

root.add(tube);

advanceTube(tube);

});

}

function advanceTube(tube) {

const tl = new TimelineMax();

const firstCompleteTime = tube.geometry.firstCompleteTime * tube.__config.duration;

tl.add(tube.animate(tube.__config.duration, {ease: Power0.easeInOut}));

tl.add(() => {

const transformMatrix = new THREE.Matrix4().multiplyMatrices(

tube.__pathMatrix,

NEXT_PATH_MATRIX

);

const nextTube = createPathMesh(transformMatrix, {

tubeCount: tube.__config.tubeCount,

tubeArcLength: tube.__config.tubeArcLength,

tubeStagger: tube.__config.tubeStagger

});

root.add(nextTube);

advanceTube(nextTube);

}, firstCompleteTime);

tl.add(() => {

root.remove(tube);

tube.geometry.dispose();

tube.material.dispose();

});

}

function createPath() {

let length = 16;

let path = [];

let point = new THREE.Vector3();

for (let i = 0; i < length; i++) {

let angle = i / (length - 1) * Math.PI - Math.PI * 1.5;

let radius = SCENE_CONFIG.pathRadius;

let scaleX = THREE.Math.mapLinear(i, 0, length - 1, 0.75, 0.25) * THREE.Math.randFloat(0.6, 1.0);

point.x = Math.cos(angle) * radius * scaleX;

point.z = Math.sin(angle) * radius - radius;

point.y = (i === 0 || i === length - 1) ? 0 : THREE.Math.randFloatSpread(2) * (i / length);

// point.y = 0;

let twistOffset = (i === 0 || i === length - 1) ? 0 : THREE.Math.randFloatSpread(2);

// let twistOffset = 0;

path.push(new THREE.Vector4(point.x, point.y, point.z, twistOffset));

}

return path;

}

function createPathMesh(matrix, cfg) {

const config = Object.assign(

{},

cfg,

{

tubeSegments: 128,

// tubeCount: THREE.Math.randInt(32, 48),

// tubeArcLength: THREE.Math.randFloat(0.15, 0.3),

// tubeStagger: THREE.Math.randFloat(0.0002, 0.002),

tubeCount: 32,

tubeArcLength: 0.25,

tubeStagger: 0.001,

tubeRadius: THREE.Math.randFloat(0.005, 0.01),

twistDistance: THREE.Math.randFloat(0.1, 1.5),

twistAngle: Math.PI * THREE.Math.randFloat(2, 16),

duration: SCENE_CONFIG.pathAnimationDuration,

path: createPath()

}

);

const mesh = new Tubes(config);

mesh.applyMatrix(matrix);

mesh.__pathMatrix = matrix.clone();

mesh.__config = config;

return mesh;

}

// CLASSES

function Tubes(config) {

const geometry = new TubesGeometry(config);

const material = new THREE.BAS.StandardAnimationMaterial({

shading: THREE.FlatShading,

defines: {

ROBUST: false,

TUBE_LENGTH_SEGMENTS: config.tubeSegments.toFixed(1),

PATH_LENGTH: config.path.length,

PATH_MAX: (config.path.length - 1).toFixed(1)

},

uniforms: {

thickness: {value: config.tubeRadius},

uTwist: {

value: new THREE.Vector2(

config.twistDistance,

config.twistAngle

)

},

time: {value: 0.0},

uPath: {value: config.path}

},

uniformValues: {

diffuse: new THREE.Color(COLORS.yellow),

roughness: .75,

metalness: .0

},

vertexParameters: [

THREE.BAS.ShaderChunk[‘catmull_rom_spline’],

`

attribute vec2 aAngle;

attribute float aTwistOffset;

uniform float thickness;

uniform float time;

uniform vec2 uTwist;

uniform vec4 uPath[PATH_LENGTH];

varying float vProgress;

#ifdef ROBUST

const float MAX_NUMBER = 1.79769313e+32;

#endif

vec3 sample(float t) {

float pathProgress = t * PATH_MAX;

ivec4 indices = getCatmullRomSplineIndices(PATH_MAX, pathProgress);

vec4 p0 = uPath[indices[0]];

vec4 p1 = uPath[indices[1]];

vec4 p2 = uPath[indices[2]];

vec4 p3 = uPath[indices[3]];

float angle = t * uTwist.y;

float ca = cos(angle);

float sa = sin(angle);

vec3 offset = vec3(ca, sa * ca, sa) * aTwistOffset * uTwist.x;

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

e+32;

#endif

vec3 sample(float t) {

float pathProgress = t * PATH_MAX;

ivec4 indices = getCatmullRomSplineIndices(PATH_MAX, pathProgress);

vec4 p0 = uPath[indices[0]];

vec4 p1 = uPath[indices[1]];

vec4 p2 = uPath[indices[2]];

vec4 p3 = uPath[indices[3]];

float angle = t * uTwist.y;

float ca = cos(angle);

float sa = sin(angle);

vec3 offset = vec3(ca, sa * ca, sa) * aTwistOffset * uTwist.x;

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。