CustomBlendingEquations.html 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>Custom Blending Equation Constants</h1>
  11. <p>
  12. These work with all material types. First set the material's blending mode
  13. to THREE.CustomBlending, then set the desired Blending Equation, Source
  14. Factor and Destination Factor.
  15. </p>
  16. <h2>Code Example</h2>
  17. <code>
  18. const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
  19. material.blending = THREE.CustomBlending;
  20. material.blendEquation = THREE.AddEquation; //default
  21. material.blendSrc = THREE.SrcAlphaFactor; //default
  22. material.blendDst = THREE.OneMinusSrcAlphaFactor; //default
  23. </code>
  24. <h2>Examples</h2>
  25. <p>
  26. [example:webgl_materials_blending_custom materials / blending / custom ]
  27. </p>
  28. <h2>Blending Equations</h2>
  29. <code>
  30. THREE.AddEquation
  31. THREE.SubtractEquation
  32. THREE.ReverseSubtractEquation
  33. THREE.MinEquation
  34. THREE.MaxEquation
  35. </code>
  36. <h2>Source Factors</h2>
  37. <code>
  38. THREE.ZeroFactor
  39. THREE.OneFactor
  40. THREE.SrcColorFactor
  41. THREE.OneMinusSrcColorFactor
  42. THREE.SrcAlphaFactor
  43. THREE.OneMinusSrcAlphaFactor
  44. THREE.DstAlphaFactor
  45. THREE.OneMinusDstAlphaFactor
  46. THREE.DstColorFactor
  47. THREE.OneMinusDstColorFactor
  48. THREE.SrcAlphaSaturateFactor
  49. THREE.ConstantColorFactor
  50. THREE.OneMinusConstantColorFactor
  51. THREE.ConstantAlphaFactor
  52. THREE.OneMinusConstantAlphaFactor
  53. </code>
  54. <h2>Destination Factors</h2>
  55. <p>
  56. All of the Source Factors are valid as Destination Factors, except for
  57. <code>THREE.SrcAlphaSaturateFactor</code>
  58. </p>
  59. <h2>Source</h2>
  60. <p>
  61. [link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
  62. </p>
  63. </body>
  64. </html>