Book Image

Three.js Cookbook

By : Jos Dirksen
Book Image

Three.js Cookbook

By: Jos Dirksen

Overview of this book

Table of Contents (15 chapters)
Three.js Cookbook
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

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 understanding 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: THREE.ImageUtils.loadTexture("../assets/textures...