three.js - raycaster - three js texture

Three.js, geometría de luz personalizada

Question

¿Es posible crear en Three.js una fuente de luz que tenga una geometría personalizada, por ejemplo, un símbolo? Hay Arealight en Three.js que funciona como fuente rectangular de luz y que tiene parámetros de altura y altura. Finalmente, el objetivo es obtener una superficie iluminada por una fuente de ese tipo, que visualmente es esa figura personalizada.

Gracias WestLangley, este es un gran ejemplo, lo intenté de esta manera, pero desafortunadamente, no funcionó para mí. Intenté esto:

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)

Answer 1

AreaLight solo funciona con WebGLDeferredRenderer , que es bastante nuevo, forma parte de los ejemplos (no de la biblioteca), y no hay muchos ejemplos de su uso.

Si observa este ejemplo , puede ver que se usa una textura de película como fuente de luz.

En este ejemplo, puede sustituir otra textura por la textura del video de esta manera:

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

Desafortunadamente, este ejemplo usa una versión modificada de la biblioteca.

three.js r.56