Reflections in Threejs

Reflections in Threejs can be accomplished quite easily using a Cube Camera. This is a unique camera that contains six perspective cameras that will display what each camera sees onto any object in which you place it. It fits well on all default three dimensional shapes provided by the core threejs library. In this example I use a few spheres, a rectangle, and a cone. I also add a reflection to the plane I use as the floor so that lights and the cubemap (background image) are reflected.

To see the full code click on the "JS" tab in the Threejs reflections example below. There are also some really neat examples on the threejs example pages. Here is one of my favorites, though they acheive the reflection effect a little differently.

See the Pen Reflections by Bryan Jones (@bartuc) on CodePen.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.