在Three.js中为材质添加扩散波浪效果的实战指南

本文还有配套的精品资源，点击获取

简介：WebGL结合Three.js为3D模型添加视觉效果可以提升场景真实感和用户体验。本文详细介绍了如何通过着色器编程在Three.js中现有材质上实现扩散波浪效果。我们将会学习如何利用Three.js的 onBeforeCompile 方法来编写自定义着色器代码，通过添加uniforms变量和动态更新顶点位移来实现动态的波浪效果。这一过程不仅需要理解着色器编程，还需要熟悉WebGL和Three.js的基础知识。

1. WebGL与Three.js简介

WebGL（Web图形库）是一种JavaScript API，用于在不需要插件的情况下在任何兼容的Web浏览器中呈现2D和3D图形。它是OpenGL ES的一个JavaScript绑定，专门用于在HTML5的 <canvas> 元素中绘制硬件加速的图形。WebGL通过提供一个与OpenGL ES 2.0相似的API，使开发者能够在网页中利用GPU的强大功能，从而开辟了Web应用中实时三维图形的大门。

Three.js是一个开源的JavaScript库，它封装了WebGL的复杂性，并为开发者提供了一套更简洁、易用的API。通过Three.js，开发者可以更加轻松地创建和展示3D场景、模型、动画等。它广泛应用于数据可视化、游戏、虚拟现实等领域。

在Three.js中实现材质效果不仅能够简化开发流程，还可以利用库提供的丰富工具和预设材质，快速达到专业级别的渲染效果。选择Three.js的理由还在于其活跃的社区支持、庞大的插件库和材质包，以及跨平台的兼容性。在本章中，我们将深入了解WebGL和Three.js的基础知识，并探讨它们在现代Web开发中的重要作用。

// 示例：使用Three.js创建一个简单的场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

通过上述代码，我们可以快速搭建起一个旋转的立方体场景，这只是Three.js强大功能的一个简单展示。随着章节的深入，我们将进一步探索如何在Three.js中实现更为复杂的材质效果。

2. 扩散波浪效果实现

2.1 效果概念解析

扩散波浪效果是一种常见的视觉效果，它通过模拟水面上波纹扩散的物理现象，为视觉设计提供了丰富且动态的视觉表现。在多个领域中，如游戏、信息可视化、虚拟现实等，扩散波浪效果均能增强用户交互体验和视觉沉浸感。

2.1.1 波浪效果在视觉设计中的应用

波浪效果的视觉魅力在于它能够模拟自然界中波纹扩散的动态场景，这种效果在设计中能够为静态元素带来动态属性。例如，在用户界面(UI)中，波纹扩散可以作为一种反馈机制，当用户与界面交互时触发，例如点击按钮或者触摸屏幕。此外，波浪效果也可以用于强调特定的信息或者视觉焦点，通过其扩散特性，可以引导用户的视线流动，从而达到突出重点的目的。

波浪效果的实现通常会借助一些基本的图形学算法和数学模型，如正弦函数、余弦函数等，这些数学模型可以控制波浪的形状、大小、速度等特性，通过调整这些参数，可以创造出不同风格和节奏的波浪效果。

2.1.2 扩散效果的视觉原理及其重要性

扩散效果的视觉原理基于物理世界中波纹向外扩散的现象，即某个中心点受到扰动后，这种扰动会以一定的速度向四周传播。在视觉上，这种扩散效果可以给用户一种动态和连续的视觉体验。

扩散效果的重要性在于它能够增强设计的动态感和交互性。通过模拟自然界中的物理现象，扩散效果在用户界面中具有很强的吸引力和注意力集中效果。同时，这种效果也能够增加界面的生动性，使得界面不再单调、静态，为用户提供了更为丰富和舒适的视觉体验。

在视觉设计中，扩散效果不仅仅局限于简单的波纹扩散，还可以与其他视觉元素结合，如颜色、光影等，共同营造出更加复杂和生动的视觉效果。理解扩散效果的视觉原理及其在设计中的应用，对于提升整体的用户体验有着重要作用。

2.2 扩散波浪效果的理论基础

2.2.1 数学模型与算法概述

为了在计算机图形学中模拟波浪的扩散效果，我们通常会使用一系列的数学模型和算法。这些模型和算法可以是基于物理的，也可以是纯数学的，但它们的共同目标是模拟出真实的波浪扩散特性。

• 正弦和余弦函数 ：正弦和余弦函数是模拟波动效果中最基本的工具。通过调整函数的频率、幅度、相位等参数，可以控制波形的形状和节奏。通常，波浪可以通过一个二维的正弦函数来模拟，以模拟在二维平面上波纹的扩散。

// GLSL 示例代码：二维正弦波
float wave = sin(x * frequency + time * speed) * amplitude;

• 扩散算法 ：为了实现波浪的扩散效果，我们通常需要使用到扩散算法。这些算法会在波浪的源点向外扩散波形，并逐渐衰减，模拟现实世界中波纹随距离增加而减弱的效果。

• 分形噪声 ：对于更加复杂和自然的波纹效果，分形噪声是一个常用的选择。分形噪声可以生成连续变化且具有自相似特性的图案，这种图案更接近自然界中的波动。

// GLSL 示例代码：使用噪声函数模拟自然波纹
float noiseWave = noise(vec2(x, y) + time);

• 数学模型的结合使用 ：在实践中，往往会将多种数学模型和算法结合起来，以适应不同的视觉效果需求。例如，可以将正弦函数和分形噪声结合起来，既保留了波浪的基本形态，又增加了自然的变化。

2.2.2 Three.js中实现波浪效果的方法

在Three.js中，我们可以通过多种方式来实现波浪效果。一种常用的方法是使用着色器(Shader)来直接在GPU上实现复杂的视觉效果。Three.js提供了强大的着色器材料(ShaderMaterial)，它允许我们完全自定义顶点和片段着色器来实现所需的视觉效果。

// Three.js 示例代码：创建自定义着色器材料
const shaderMaterial = new THREE.ShaderMaterial({
  vertexShader: /* vertexShaderSource */ '',
  fragmentShader: /* fragmentShaderSource */ '',
  uniforms: {
    // 定义uniforms变量
  }
});

• 顶点着色器 ：顶点着色器决定了物体的顶点位置，在这里我们可以引入波浪效果对顶点位置的影响，如使用正弦函数调整顶点的z坐标，使得原本平坦的物体表面产生波动。

• 片段着色器 ：片段着色器负责定义最终显示给用户的像素颜色。我们可以在这里添加一些效果，比如让波浪的颜色随着时间或角度变化，或者让波纹看起来有反射和折射的效果。

// GLSL 示例代码：片段着色器中的扩散效果
void main() {
  // 假设波浪因子为waveFactor，这可以通过正弦函数等计算得到
  float waveFactor = sin(position.x * frequency + time * speed);
  // 根据波浪因子调整颜色
  gl_FragColor = vec4(waveFactor, waveFactor, waveFactor, 1.0);
}

通过自定义着色器，我们不仅可以模拟基本的扩散波浪效果，还可以通过调整和组合不同的数学模型和算法来增强效果的复杂性和视觉冲击力。

2.3 实践中的初步实现

2.3.1 创建基本的Three.js场景和几何体

在Three.js中创建一个带有扩散波浪效果的场景，我们首先需要创建一个基本的3D场景，并为场景中添加一些几何体。最简单的几何体是平面，它可以作为波浪效果的基础。

// Three.js 示例代码：创建场景和几何体
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const geometry = new THREE.PlaneGeometry(1, 1, 32, 32);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

// 将相机和几何体移动到合适的位置
camera.position.z = 5;

// 创建渲染器并添加到HTML文档中
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

2.3.2 利用Three.js内置材质初步模拟效果

在有了基本的场景和几何体之后，我们可以使用Three.js内置的材质来初步模拟出扩散波浪效果。这里以 MeshStandardMaterial 为例，虽然它不直接支持复杂的波浪效果，但通过调整其属性，我们可以得到一些基础的视觉变化。

// Three.js 示例代码：使用MeshStandardMaterial初步模拟波浪效果
const material = new THREE.MeshStandardMaterial({
  color: 0x00ff00,
  roughness: 0.2,
  metalness: 0.5,
});

我们可以利用材质的 roughness 和 metalness 属性来模拟水面上的光泽和反射效果。虽然这些属性并不能直接实现波浪的扩散效果，但它们可以增加材质的丰富性，为后续添加复杂效果打下基础。

为了实现更真实的波浪效果，我们可能需要自定义着色器，通过在顶点着色器中添加波浪算法来影响顶点的位置，或者在片段着色器中添加复杂的光影算法来增强视觉效果。在下一章中，我们将详细介绍如何通过使用 MeshStandardMaterial 和 onBeforeCompile 钩子，来实现更加复杂和真实的扩散波浪效果。

3. MeshStandardMaterial 和 onBeforeCompile 使用

3.1 MeshStandardMaterial 介绍

3.1.1 标准材质的特性和用法

MeshStandardMaterial 是Three.js中最常用的材质之一，用于实现高级的光照和材质效果。它遵循物理基础的渲染（PBR）原则，能够提供真实感更强的视觉体验。 MeshStandardMaterial 支持多种光照模型，比如漫反射、镜面反射和环境遮蔽等。其特性包括：

• 支持环境贴图（environment mapping）
• 支持高动态范围（HDR）照明
• 通过IOR（折射率）和粗糙度贴图等实现更丰富的材质属性

在Three.js场景中，开发者可以设置 MeshStandardMaterial 的 color 、 roughness 、 metalness 和 normalMap 等属性，以模拟不同的表面和光照效果。以下是一个简单的使用例子：

const material = new THREE.MeshStandardMaterial({
  color: 0x00ff00,
  roughness: 0.5,
  metalness: 0.5,
  normalMap: normalTexture
});

3.1.2 材质属性对效果的影响分析

MeshStandardMaterial 的属性对最终渲染效果有着直接影响。例如， roughness 属性控制表面的粗糙程度：较低的值使表面看起来更光滑，反射更清晰；而较高的值则会让表面显得更加粗糙，反射更分散。 metalness 属性则影响材质金属感的强弱，接近于0时为非金属材质，接近于1时为金属材质。

开发者需要了解这些属性和它们对最终渲染效果的影响，从而根据实际场景的需求调整材质属性。为了更好的理解这些属性如何工作，可以通过调整它们的值并观察实时渲染场景中的变化。

3.2 onBeforeCompile 钩子机制

3.2.1 onBeforeCompile 的作用及其在材质修改中的应用

onBeforeCompile 是一个在Three.js中非常有用的钩子，它允许开发者在内部着色器编译之前修改着色器的代码。这可以用来实现一些默认材质不支持的效果，例如自定义光照模型、添加新的uniforms变量或者修改着色器中的函数逻辑。

例如，下面代码展示了如何在 MeshStandardMaterial 编译前添加一个自定义的uniform变量：

const material = new THREE.MeshStandardMaterial({});

material.onBeforeCompile = (shader) => {
  shader.uniforms.customUniform = { value: 1.0 };
  shader.vertexShader = shader.vertexShader.replace(
    '#include <common>',
    `
    #include <common>
    uniform float customUniform;
    `
  );

  shader.fragmentShader = shader.fragmentShader.replace(
    '#include <common>',
    `
    #include <common>
    uniform float customUniform;
    `
  );
};

通过 onBeforeCompile ，开发者可以实现更加复杂和定制化的材质效果。如在渲染中加入基于时间的动态变化，或者实现一些特殊着色效果。

3.2.2 探索与 MeshStandardMaterial 结合的技巧

将 onBeforeCompile 与 MeshStandardMaterial 结合使用，可以大幅提升材质的灵活性。例如，可以通过添加自定义的着色器逻辑到标准材质中，实现类似“渐变”或者“波纹”的视觉效果。下面的代码示例展示了如何在材质中添加一个动态变化的渐变效果：

const material = new THREE.MeshStandardMaterial({});

material.onBeforeCompile = (shader) => {
  shader.fragmentShader = shader.fragmentShader.replace(
    '#include <common>',
    `
    #include <common>
    uniform float time;
    `
  );

  const customCode = `
    float gradientFactor = sin(time + position.y * 0.1) * 0.5 + 0.5;
    diffuseColor.rgb *= vec3(gradientFactor);
  `;

  shader.fragmentShader = shader.fragmentShader.replace(
    '#include <tonemapping_fragment>',
    customCode + '#include <tonemapping_fragment>'
  );
};

在上面的例子中，通过在fragment shader中添加自定义代码，实现了基于时间变化的垂直渐变效果。开发者可以进一步扩展这段代码，添加更多参数和函数，实现更为复杂的材质效果。

4. 自定义着色器代码编写

4.1 着色器语言GLSL基础

4.1.1 GLSL基本语法和结构介绍

GLSL（OpenGL Shading Language）是用于编写OpenGL着色器的语言，它与C语言类似，但也包含了一些专门为图形编程设计的特性。在WebGL中，我们通常使用GLSL来编写自定义的着色器。了解GLSL的基本语法和结构是编写自定义着色器的第一步。

变量和数据类型： GLSL提供了多种数据类型，包括 int 、 float 、 bool 、 vec2 、 vec3 、 vec4 （浮点向量）、 mat2 、 mat3 、 mat4 （矩阵类型）等。这些类型允许着色器处理包括标量、向量和矩阵在内的各种数据。

函数： GLSL支持函数定义，这对于将重复使用的代码片段封装成函数非常有用。函数可以有返回值，也可以不返回值，参数可以是上述任何数据类型。

控制结构： 控制流包括条件语句（如 if 、 else if 、 else ）和循环结构（如 for 、 while 、 do-while ），这对于控制着色器执行流程非常关键。

GLSL的特殊变量： GLSL定义了一些全局变量，它们在着色器中具有特殊意义。例如， gl_Position 用于顶点着色器输出顶点位置， gl_FragColor 用于片元着色器输出颜色值。

注释： 和许多编程语言一样，GLSL使用 // 和 /***/ 分别表示单行注释和多行注释。

4.1.2 着色器对渲染流程的影响

着色器在WebGL渲染流程中起到至关重要的作用。它们直接控制着顶点如何被转换以及片元最终如何显示。顶点着色器处理顶点数据，包括位置、颜色和其他属性，然后将它们传递给片元着色器。片元着色器则负责计算最终屏幕上每个像素的颜色。

了解着色器如何影响渲染流程对于优化渲染性能和创造特定的视觉效果是必不可少的。例如，通过修改片元着色器的代码，开发者可以实现各种各样的材质效果，如镜面反射、光照、阴影等。

4.2 自定义着色器的编写实践

4.2.1 修改片段着色器实现扩散效果

要实现扩散效果，我们可以在片段着色器中增加代码，使用噪声函数或自定义的算法来模拟光散射的效果。下面是一个简单的代码示例，展示了如何在片段着色器中添加扩散效果的基本逻辑：

#ifdef GL_ES
precision highp float;
#endif

varying vec2 vUv;
uniform float u_time; // 用于动态变化的uniform变量
uniform vec2 u_resolution; // 渲染目标分辨率

float random(vec2 st) {
  return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
}

void main() {
  vec2 st = gl_FragCoord.xy / u_resolution.xy;
  st.x *= u_resolution.x / u_resolution.y;
  // 使用噪声函数和时间变量生成扩散效果
  float n = random(st + u_time);
  float diffusion = smoothstep(0.4, 0.6, n);
  gl_FragColor = vec4(vec3(diffusion), 1.0);
}

4.2.2 在着色器中添加参数以实现动态变化

在上面的代码中， u_time 是一个uniform变量，它允许我们在JavaScript中更新这个值，从而使得着色器中的扩散效果能够随时间动态变化。我们可以通过Three.js的 UniformsUtils 和 ShaderMaterial 来设置这个uniform变量。

const uniforms = {
  u_time: { value: 0.0 }
};

const material = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: vertexShaderSource,
  fragmentShader: fragmentShaderSource,
  // 其他属性...
});

function animate(time) {
  uniforms.u_time.value = time * 0.001; // 更新uniform变量
  requestAnimationFrame(animate);
}
animate();

在实际应用中，可以将这段代码集成到Three.js场景的动画循环中，以便实时更新着色器中的效果。这种动态参数化的方法让开发者能够创造出更加丰富和动态的视觉效果。

5. 着色器uniforms变量添加与更新

5.1 uniforms 变量概念与用途

5.1.1 uniforms 在着色器中的作用

着色器中的 uniforms 变量是着色器和JavaScript之间传递数据的重要方式。这些变量在顶点着色器和片段着色器中都是可用的，它们可以用来传递诸如光源位置、观察者位置、颜色值和其他全局属性等。 uniforms 在每个实例中都保持不变，直到它们被新的值更新。它们是不可变的，并且必须在WebGL的渲染循环中被重新声明和赋值，以反映在渲染过程中。

5.1.2 如何定义和使用 uniforms

在GLSL中， uniforms 变量是全局变量，使用前必须先声明类型和名称。例如：

uniform vec3 u_lightColor;

在Three.js中，一个 uniforms 对象包含了所有的 uniforms 变量，这些变量可以是简单类型，也可以是结构体类型。例如：

const uniforms = {
  u_lightColor: { value: new THREE.Color(0xffffff) },
  // ...
};

在场景渲染循环中，我们可以通过Three.js的 UniformsUtils 或者直接赋值来更新这些 uniforms ：

uniforms.u_lightColor.value.set(0xffffff);

这样，我们就可以在着色器内部使用 u_lightColor 变量来改变材质的光照效果。接下来，我们将探讨如何在Three.js中利用 uniforms 来更新动态效果。

5.2 动态效果的uniforms实现

5.2.1 在Three.js中更新 uniforms

为了实现动态效果，我们需要在每一帧更新 uniforms 的值。在Three.js中，这通常在渲染循环中完成：

function animate() {
  requestAnimationFrame(animate);

  uniforms.u_time.value += clock.getDelta(); // 更新时间变量
  renderer.render(scene, camera); // 渲染场景
}

animate(); // 启动动画循环

在GLSL着色器中，我们利用这个 uniforms 变量来改变颜色、位置或其他变量：

uniform float u_time; // 在GLSL着色器中声明

void main() {
  // 使用时间变量u_time来实现动态变化
  float dynamicValue = sin(u_time + position.x);
  // ...
}

5.2.2 实现时间依赖的动态变化效果

要实现一个基于时间依赖的动态效果，例如让一个平面上的颜色以某种周期性的方式变化，我们可以定义一个时间 uniforms 变量，并在着色器中利用这个变量：

uniform float u_time; // GLSL中声明

void main() {
  vec3 color = vec3(0.0);
  // 使用sin函数使颜色随时间变化
  color.x = sin(u_time * 0.1) * 0.5 + 0.5;
  color.y = cos(u_time * 0.2) * 0.5 + 0.5;
  color.z = sin(u_time * 0.3) * 0.5 + 0.5;
  // 输出最终颜色
  gl_FragColor = vec4(color, 1.0);
}

这段代码利用 sin 和 cos 函数改变了颜色值，通过 u_time 变量控制颜色变化的速率。在JavaScript中，我们不断更新 u_time 值，实现着色器中颜色的动态变化。

const uniforms = {
  u_time: { value: 0.0 },
  // ...
};

// 在动画循环中更新u_time
uniforms.u_time.value += clock.getDelta();

这样，每帧 u_time 的值都会增加，使得颜色变化具有时间动态性。通过这种方式，我们可以创建出各种随时间变化的动态视觉效果，如波动水面、闪烁灯光等。这种技术的应用使得WebGL和Three.js在视觉艺术和游戏开发领域变得异常强大和灵活。

总结一下， uniforms 是实现动态效果的关键工具，允许我们通过数据来控制着色器的行为。在实际开发中，合理地利用 uniforms 变量，可以大幅增加视觉表现的丰富度和互动性。

6. 动态波浪效果实现与性能优化

在上一章中，我们学习了如何编写自定义着色器以及如何添加和使用uniforms变量来实现动态效果。本章将深入探讨动态波浪效果的实现，并重点介绍如何优化这些效果以提高渲染性能。

6.1 动态效果实现的深入探讨

6.1.1 结合时间变量模拟动态波浪

为了模拟出动态的波浪效果，我们需要在着色器中加入时间变量来作为动态变化的依据。通过改变时间变量，我们可以计算出每个顶点在不同时间点的位置，从而实现波浪的动态变化。在Three.js中，可以通过Uniforms来传递时间变量，着色器代码可以根据这个时间变量来更新几何体的顶点位置。

uniform float time; // 在着色器中声明时间变量

void main() {
    // 顶点位置计算示例，这里仅是示意
    vec3 position = *** + sin(position.x + time) * amplitude;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

在JavaScript代码中更新时间变量：

uniforms.time.value += clock.getDelta();

6.1.2 优化着色器以提高渲染性能

着色器性能优化是一个复杂的话题，但是有一些基本的原则可以遵循：

• 减少计算量：尽量避免在着色器中进行不必要的数学运算。
• 使用低精度数据类型：比如使用 float 而不是 double ，在不影响视觉效果的前提下减少数据宽度。
• 避免循环和分支：这些操作会显著降低GPU的执行效率。
• 利用硬件特性：比如GPU的纹理缓存机制，可以高效地读取纹理数据。

以下是一个性能优化示例，使用了更简单的数学模型来模拟波浪效果，以减少计算量：

// 简化的波浪效果顶点着色器
uniform float time;
uniform float amplitude;

void main() {
    // 通过简单的正弦函数实现动态波浪效果
    float wave = sin(position.x * frequency + time) * amplitude;
    vec3 displacedPosition = position + normal * wave;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(displacedPosition, 1.0);
}

6.2 实践中的性能测试与分析

6.2.1 实际应用中的性能监控技巧

性能监控是确保动态波浪效果流畅运行的关键。在Three.js中，可以通过监听渲染器的 render 事件来跟踪每一帧的渲染时间：

renderer.onBeforeRender = function () {
    // 记录渲染开始时间
};

renderer.onAfterRender = function () {
    // 记录渲染结束时间
    console.log('渲染时间：', (new Date()) - startTime);
};

还可以使用浏览器的开发者工具来查看帧率（FPS）和渲染时间，这有助于确定应用性能的瓶颈所在。

6.2.2 针对不同设备的性能调优方法

不同的设备拥有不同的硬件配置，因此需要根据设备的实际情况进行性能调优。例如：

• 在低端设备上，可以减少渲染分辨率，或使用更简单的着色器算法。
• 对于支持WebGL 2.0的设备，可以使用更高效的着色器和纹理采样技术。
• 使用 requestAnimationFrame 来控制动画的帧率，保证在不同的设备上都能有平滑的动画效果。

最终，性能优化是一个持续的过程，需要不断地测试和调整才能达到最佳效果。通过本章的学习，我们已经了解了动态波浪效果实现的基本方法以及如何优化这些效果以适应不同的应用场景。在接下来的章节中，我们将进一步理解WebGL和Three.js的着色器机制。

本文还有配套的精品资源，点击获取

简介：WebGL结合Three.js为3D模型添加视觉效果可以提升场景真实感和用户体验。本文详细介绍了如何通过着色器编程在Three.js中现有材质上实现扩散波浪效果。我们将会学习如何利用Three.js的 onBeforeCompile 方法来编写自定义着色器代码，通过添加uniforms变量和动态更新顶点位移来实现动态的波浪效果。这一过程不仅需要理解着色器编程，还需要熟悉WebGL和Three.js的基础知识。

本文还有配套的精品资源，点击获取