Learning Three.js

or WebGL for Dummies

Simple and Efficient 3 Point Lighting to Get Your Game Started With Threex.basiclighting Game Extension for Three.js

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.basiclighting. threex.basiclighting is a threex game extension for three.js. It provides a three point lighting. It is the lighting used in movies: A key light on the front-left, a back light in the back and a fill light on the front right, nothing fancy. It is perfect if you dunno much about lighting and you want to add lights in your games. Nothing big or special in this extension. This is mainly for educational purposes or for starting your project fast.

To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”

Show Don’t Tell

How To Install It

You can install it manually. Just do

1
<script src='threex.basiclighting.js'></script>

You can install with bower.

1
bower install threex.basiclighting

then you add that in your html

1
<script src="bower_components/threex.basiclighting/threex.basiclighting.js"></script>

How to Use It

create a three point lighting

1
2
var lighting    = new THREEx.ThreePointsLighting()
scene.add(lighting)

create a sun set lighting

1
2
var lighting    = new THREEx.SunSetLighting()
scene.add(lighting)

Comments