三.js，自定义光几何 [英] Three.js, custom light geometry

问题描述

是否可以在 Three.js 中创建具有自定义几何形状的光源，例如象征.Three.js 中的 Arealight 可用作矩形光源，并具有 wigth 和 height 参数.最后，目标是让一个表面被这样的光源照亮，视觉上就是那个自定义图形.

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.

谢谢 WestLangley，这是一个很好的例子，我尝试过这种方式，但不幸的是，它对我不起作用.我试过这个:

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)

推荐答案

AreaLight 仅适用于 WebGLDeferredRenderer，这是一个相当新的示例(不是库的一部分))，并且没有很多使用示例.

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

three.js r.56

这篇关于三.js，自定义光几何的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！