Menu
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>
947
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.
155
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.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
