0
358
Vistas¿Cómo proyectar solo una parte de una textura en una cara threejs?
Quiero hacer portales con tres js dibujando una elipse y luego asignando texturas a un WebGlRenderTarget en su cara. Tengo esa función funcionando, pero intenta estirar el búfer rectangular grande desde el objetivo de renderizado hasta la elipse. Lo que quiero es proyectar la textura en sus dimensiones originales en la elipse y simplemente cortar todo lo que no toque la elipse de la siguiente manera:
Antes de la proyección:
Después de la proyección:
¿Cómo se puede hacer esto con tres js? He investigado las coordenadas de textura, pero no entiendo cómo usarlas, e incluso vi una luz de proyección PR en tres js que podría funcionar.
Editar: también vi un video de Sebastian Lague en portales y vi que hace esto con "coordenadas de espacio de pantalla". ¿Algún consejo sobre el uso de esos?
¡Gracias por tu ayuda!
1 Respuestas
Responde la pregunta0
Hizo un codepen disponible aquí:
https://codepen.io/cdeep/pen/JjyjOqY
El mapeo UV nos permite especificar qué partes de la textura corresponden a qué vértices de la geometría. Más detalles aquí: https://www.spiria.com/en/blog/desktop-software/understanding-uv-mapping-and-textures/
Puede recorrer los vértices y establecer el valor UV correspondiente.
const vertices = ellipseGeometry.attributes.position.array; for(let i = 0; i < numPoints; i++) { const [x, y] = [vertices[3*i], vertices[3*i + 1]]; uvPositions.push(0.5 + x * imageHeight / ((2 * yRadius) * imageWidth)); uvPositions.push(0.5 + y / (2 * yRadius)); } ellipseGeometry.setAttribute("uv", new THREE.Float32BufferAttribute(uvPositions, 2 ));Las coordenadas UV aumentan de (0, 0) a (1, 1) de abajo a la izquierda a arriba a la derecha. El código anterior funciona porque la elipse está en el plano xy. De lo contrario, deberá obtener los valores x, y en el plano de la elipse.
Más información sobre el mapeo de texturas en three.js aquí:
https://discoverthreejs.com/book/first-steps/textures-intro/
Editar: tenga en cuenta que la demostración realmente no parece un portal. Para eso, deberá mover la textura según la vista de la cámara, que no es tan simple