void main() { vec3 vPosition = position; v_opacity = mix(1.0, 0.0, position.y / u_height * 1.0) * (1.0 + sin(time) * 0.5); gl_Position = projectionMatrix * modelViewMatrix * vec4(vPosition, 1); // 片元着色器 const fragmentShader = ` uniform vec3 u_color; uniform float u_opacity; varying float v_opacity; void main() { gl_FragColor = vec4(u_color, v_opacity * u_opacity); return new THREE.ShaderMaterial({ uniforms: { u_height: { value: height, u_opacity: { value: opacity, u_color: { value: new THREE.Color(color), time: { value: 0, speed: { value: speed, transparent: true, depthWrite: false, depthTest: false, side: THREE.DoubleSide, vertexShader: vertexShader, fragmentShader: fragmentShader,

路径解析算法见我的另一篇文章 Three.js通过不规则路径生成墙体

	/ // 路径
      const path = [
        [80, 0, -40],
        [10, 0, 0],
        [60, 0, 50],
        [0, 0, 0],
        [-60, 0, 50],
        [-50, 0, -30],
        [80, 0, -40],
      const material = createOpacityWallMat({ height: 15, speed: 5 });
      const wallMesh = creatWallByPath({
        path,
        material,
        height: 15,
      // 动画
      animationList.push(() => {
        wallMesh.material.uniforms.time.value +=
        clock.getDelta() * wallMesh.material.uniforms.speed.value;
      scene.add(wallMesh);
路径
 
 动画效果
 
    child.material = customMaterial;
    // 添加线框
    var wireframeMaterial = new THREE.MeshBasicMaterial({color: 0x3366ff, wireframe: true, transparent: true});
    var wireframe = new THREE.Mesh(child.geo
				
上次我们用three.js写了一个下雨的动画，主要是用粒子。这次是用three.js搭建了一个小场景。
项目地址依然是：https://github.com/magicsoso/threejs-tutorial.git ，后面three.js的练习demo都放在这里。
作为练习的小项目，这个小场景可以练习：
各种几何体、贴图的运用
导入外部模型
场景与用户交互
简单的动画
调试three.js项目
虽然很简单，但完整地写下来还是挺有收获。
场景搭建复用了在下雨动画中的场景模板Template。
				
要在 three.js 中实现渐变背景，可以使用 ShaderMaterial 来创建一个着色器材质，并使用着色器代码实现渐变效果。
首先，需要准备好着色器代码。这里假设你想在背景上实现从红色到蓝色的垂直渐变。你可以使用下面的着色器代码实现这个效果：
// 顶点着色器
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
// 片段着色器
uniform vec2 resolution;
varying vec2 vUv;
void main() {
  vec3 color = vec3(vUv.y, 0.0, 1.0 - vUv.y);
  gl_FragColor = vec4(color, 1.0);
然后，可以使用这段着色器代码来创建 ShaderMaterial：
var uniforms = {
  resolution: { value: new THREE.Vector2() }
var material = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: vertexShader,
  fragmentShader: fragmentShader
最后，你可以使用这个材质来创建一个平面几何，并将其添加到场景中。
var geometry = new THREE.PlaneBufferGeometry(2, 2);
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);
这样就可以在 three.js 中实现渐变背景了。