Three.js, custom light geometry

问题

Is it possible to create in Three.js a light source that has custom geometry, e.g. symbol. There is Arealight in Three.js that works as rectangular source of light and which has wigth and height parameters. Finally, the aim is to get a surface illuminated by a such source, which visually is that custom figure.

Thank you WestLangley, this is a great example, I tried this way, but unfortunately, it didn't work for me. I tried this:

var textTexture = new THREE.Texture( "textures/text.jpg" );
        //var textTexture = THREE.ImageUtils.loadTexture("textures/text.jpg");
        textTexture.format = THREE.RGBFormat;
        textTexture.wrapS = textTexture.wrapT = THREE.MirroredRepeatWrapping;
        textTexture.anisotropy = 4;
        var textLight = new THREE.AreaLight( 0xffffff, 3 );
        textLight.position.set( 10, 5, -5 );
        textLight.rotation.x = Math.PI / 2;
        textLight.width = 30;
        textLight.height = 10;
        textLight.texture = textTexture;
        scene.add(textLight)

回答1:

AreaLight works only with WebGLDeferredRenderer, which is quite new, part of the examples (not the library), and there are not a lot of examples of it's use.

If you look at this example, you can see a movie texture is used as a light source.

In this example, you can substitute another texture for the video texture like so:

// texture = new THREE.Texture( video );
texture = THREE.ImageUtils.loadTexture( "texture.jpg" );

Unfortunately, this example is using a modified version of the library.

three.js r.56

来源：https://stackoverflow.com/questions/14997484/three-js-custom-light-geometry

标签

three.js

WebGL

light