4

I've developed a 3D lamp model in blender and loaded it on to a web using three.js.

The model is pretty basic, but what matters to me is that I would like somebody to give me an idea of how produce a light in three.js that should give the illusion of coming from inside the lamp, because you can find lots of examples of how to light an object from far away but what about of emitting the light from one side of an object (and specifically a model) like this lamp scenario.

Please understand that I'm not being lazy, is just that the three.js documentation is so limited and I haven't been able to find an example or an explanation specific to my need.

This is the code that I have so far which loads the model:

<!DOCTYPE html>
<html>
<head>
<title>example 1: load model</title>
<script type="text/javascript" src="js/three.js"></script>
<script src="js/TrackballControls.js"></script>

<script type="text/javascript">
var controls;
var init = function() {
  var canv = document.getElementsByTagName("canvas")[0];
  var w = canv.clientWidth;
  var h = canv.clientHeight;

  var renderer = new THREE.WebGLRenderer({canvas:canv, antialias: true});
  renderer.setSize( w, h );


  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera(
      40,     // Field of view
      w / h,  // Aspect ratio
      5,    // Near
      10000   // Far
  );
  camera.position.set( -10, 7, 10 );
  camera.lookAt(scene.position);

  // CONTROLS
 controls = new THREE.TrackballControls( camera );

  light = new THREE.PointLight( 0xFFFFDD );
  light.position.set( -15, 10, 15 );
  scene.add( light );



  var loader = new THREE.JSONLoader(  );
  var onGeometry = function(geom, mats) {
    var mesh = new THREE.Mesh( geom, new THREE.MeshFaceMaterial( mats ) );
    scene.add(mesh);
  };
  loader.load("models/lamp.js", onGeometry);

  var render = function() {

    renderer.render(scene, camera);
    controls.update();
  };

  setInterval(render,10);
};

window.onload = init;
window.onresize = init;
</script>
</head>
<body><canvas style="width:100%;height:95%;border:1px gray solid;"></body>
</html>
Pamplones
  • 85
  • 1
  • 2
  • 7

2 Answers2

8

There are many things a real lamp does, all of which contribute to the total experience. So there are many aspects you may want to consider when trying to replicate that illusion. And different techniques.. Not all of them are needed of course.

  • Illuminating the surroundings. This is the most obvious, and quite simply involves positioning a light into where the bulb would be. This can be SpotLight or PointLight, depending on the type of lamp you want. If you look at this real-life example: http://www.piggsvinet.com/jalkalamppu.jpg-for-web-normal.jpg , you can even consider multiple lights. One pointlight for the soft general light, and two spotlights for the up and down pointing illumination.

  • Does the lamp shape the light or obstruct it in some way? You can use multiple lights as above, and/or shadow mapping to create more realistic light output. Other technique for this is light cookies, as described here: http://docs.unity3d.com/Documentation/Components/class-Light.html . Three.js however does not have built-in support for light cookies, and I'm not aware of any examples where this has been done.

  • You may want to give the actual lamp model a glowing appearance. One way to do this is by giving the lampshade material an emissive color.

  • Possibly you want to give the lamp a halo effect, or similar to give appearance of the surrounding air slightly gloving (small particles in the air reflecting some of the light). This can be done using particles, texture billboard, or some kind of god-ray post-processing effect like this: http://threejs.org/examples/webgl_postprocessing_godrays.html

  • For your lamp model example, you could even create a cone-shaped geometry to represent the shape of light coming out of the lamp. This can be set partially transparent, with suitable blending/texture/emissive color to create illusion of spotlight cone in addition to the actual 3d light (which only effects the surfaces it illuminates).

  • Possibly consider lens flares, http://threejs.org/examples/webgl_lensflares.html

As you can see, "the illusion of coming from inside the lamp" is a huge subject. Maybe you could be more specific on what you really want to accomplish.

yaku
  • 3,061
  • 2
  • 19
  • 38
  • wow! I made myself aware of webgl, threejs and blender like two months ago and I've been studying since then to just do this lamp with light and show it in a web page, but now I feel that I'm still miles away. – Pamplones Jun 24 '13 at 18:26
  • Excuse me if I omit some 3D terminology, but what I'm trying to do is a lamp that doesn't glows. A lamp that doesn't allows to see any light from the sides, just from the hole that will be pointing down so the lamp will shape the light as a cone and obstruct it from coming out of the lamp head (cone shaped) sides. Something like this desk lamp: http://www.bigw.com.au/home-garden/decor-furnishings/lamps/bpnBIGW_0000000112261/mirabella-lindsay-desk-lamp-black – Pamplones Jun 24 '13 at 18:34
  • well the easy way would be to just place a THREE.SpotLight where the bulb would be, as Lee Stemkoski suggested. adjust it's position and angle to match the shape of lamp. In your example there is nothing else than the lamp in the scene, so this will have little effect unless you put a table or something that can be lit by that SpotLight. To create something like that picture, you don't need a actual 3D light at all, just a bulp model with white color, maybe emissive color, and use a yellow material inside the lamp head. – yaku Jun 24 '13 at 18:45
3

You will want to use a SpotLight (and perhaps even enable shadows for nice lighting effects). The code is basically:

var spotlight = new THREE.SpotLight(0xffffff);
spotlight.position.set(x,y,z);
spotlight.lookAt(p,q,r);
scene.add(spotlight);

For a live example, check out:

http://stemkoski.github.io/Three.js/Shadow.html

and see the source code there.

Stemkoski
  • 8,936
  • 3
  • 47
  • 61
  • Hey thank you for your answer. I've been in fact studying your examples and its an honor being help by you in person. I even added your examples link to the three.js wikipedia page in english and spanish. – Pamplones Jun 24 '13 at 11:37
  • 2
    I saw already this example you mention, but, is it possible with the code above give the illusion of the spotLight coming out of one face of the cube (from the inside of it) instead of from above? – Pamplones Jun 24 '13 at 11:39