Graphics Reference
In-Depth Information
Configuring blend modes
When an object is rendered on top of another object in Three.js, you can configure
how to blend in the colors from the objects behind it. In this recipe, we show you the
steps you need to take to set a specific blend mode. You can compare this with the
way the various blending layers in Photoshop work.
Getting ready
Understanding the results of a specific blend mode is difficult. To help in understand-
ing the different available blend modes, we provide a simple web page that shows you
the blend modes and allows you to switch between them. You can see this example
by opening
04.13-configuring-blend-modes.html
in your browser.
With the menu in the top-right section of the preceding screenshot, you can see what
the result of each blend mode is.
How to do it...
Setting a blend mode is easy:
1. First, create a geometry and a material:
var cubeGeometry = new
THREE.BoxGeometry(10, 4, 10);
var cubeMaterial = new
THREE.MeshPhongMaterial({map:
