three 相关资料

[msforest]

1. https://github.com/stonerao/three-effect
2. https://github.com/Thinkia/three-Effect
3. http://hewebgl.com/article/getarticle/56
4. https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html
5. https://thebookofshaders.com/?lan=ch
6. https://blog.l0v0.com/categories/%E6%B8%B8%E6%88%8F%E5%BC%80%E5%8F%91/Unity/Shader%E5%AD%A6%E4%B9%A0%E4%B9%8B%E8%B7%AF/ shader学习资料
7. https://www.bilibili.com/video/BV1ff4y1b7in?p=2&spm_id_from=pageDriver shader视频
8. https://r105.threejsfundamentals.org/threejs/lessons/threejs-post-processing.html
9. https://easings.net/ 动画函数实现
10. 物理引擎cannon-es , ammo.js

[msforest]

后期处置与正常场景并存

// scene.background = 0xFF0000  // 主scene不能设置背景色，应使用renderPass设置背景色

var renderPass = new RenderPass( scene, camera, undefined, 0xF3F3F3, 1 );
renderPass.clearDepth = true
composer.addPass( renderPass );

function updateRender() {
  composer.render(0.1);
  renderer.autoClear = false;
  renderer.clearDepth();
  renderer.render(fgScene, camera);
}

[msforest]

shader渐变色

const geometry = new THREE.CylinderGeometry(15, 5, 35, 40, 40, true)
const geometry1 = new THREE.CylinderGeometry(30, 20, 30, 40, 40, true)
const material = new THREE.ShaderMaterial({
  uniforms: {
    color1: {
      value: new THREE.Color('#58b1e6')
    },
    color2: {
      value: new THREE.Color('#77dff8')
    }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1);
    }
  `,
  fragmentShader: `
    uniform vec3 color1;
    uniform vec3 color2;
  
    varying vec2 vUv;
    
    void main() {
      
      gl_FragColor = vec4(mix(color1, color2, vUv.y), 0.2);
    }
  `,
  side: THREE.DoubleSide
})
const mesh1 = new THREE.Mesh(geometry, material)
const mesh2 = new THREE.Mesh(geometry1, material)
mesh1.position.set(0, -20, 0)
mesh2.position.set(0, -30, 0)
this.model.add(mesh1)