0
227
ViewsPersonalice los bordes de PlaneGeometry para cada segmento en ThreeJS
Actualmente, PlaneGeometry tiene una opción para cambiar el ancho y la altura del segmento, pero esto no tiene efecto en los bordes . Actualmente, cada segmento tiene posiciones indexadas para crear una forma de 'N' al ver la geometría en el modo de estructura alámbrica:
Los índices actualmente son:
- 0 = Suroeste
- 1 = Noroeste
- 2 = Sudeste
- 3 = Noreste
Esto nos da una forma de 'N' para cada segmento con estructuras alámbricas, sin embargo, en lugar de esta forma de 'N', me gustaría crear una forma de 'X' con bordes para cada segmento. Actualmente estoy usando planos para crear diferentes alturas y tener una forma de 'X' haría que el resultado se viera menos nervioso (capturas de pantalla a continuación).
Creo que ya existen todos los vértices requeridos, pero ¿cómo es posible obtener un borde adicional entre el punto 0 y el 3 para cada segmento?
Intenté buscar la respuesta en línea, pero no pude encontrar una respuesta clara sobre este asunto, además, muchos artículos son anteriores a la versión R125 que realizó cambios importantes en Geometrías. Actualmente estoy usando la versión R135.
Supongo que necesitaré crear una geometría de búfer personalizada, pero tengo dudas sobre cómo ejecutar esto correctamente y no perder demasiado rendimiento.
- Todas las líneas rojas y azules son bordes existentes actualmente en el modo de estructura alámbrica.
- Todas las líneas verdes son deseadas y actualmente no existen, ¿cuál sería la mejor manera de hacer esto sin perder rendimiento?
¡Gracias por adelantado!
1 answers
Answer question0
Me tomó una buena cantidad de intentos, pero al final no resultó ser demasiado difícil. Creé esta PlaneGeometry personalizada creando una BufferGeometry personalizada. Aunque probablemente sea 3 veces más pesado de usar;
Por el momento, tiene 36 (12 * 3) posiciones por segmento de mosaico, mientras que PlaneGeometry predeterminado tiene 12 (4 * 3) posiciones. Aunque no estoy seguro de si 3 veces más posiciones significa automáticamente 3 veces más uso de rendimiento, definitivamente usa más que la PlaneGeometry predeterminada.
Aquí están los resultados (los cambios en la altura suavizan más bonito):
Código para crear la geometría:
const geometry = new THREE.BufferGeometry(); const vertices = new Float32Array([ // (North Face) .5, -.5, 0, // 0: Center 1, -1, 0, // 1: NE 1, 0, 0, // 2: NW // (East Face) .5, -.5, 0, // 3: Center 0, -1, 0, // 4: SE 1, -1, 0, // 5: NE // (South Face) .5, -.5, 0, // 6: Center 0, 0, 0, // 7: SW 0, -1, 0, // 8: SE // (West Face) .5, -.5, 0, // 9: Center 1, 0, 0, // 10: NW 0, 0, 0, // 11: SW ]); geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) ); const material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } ); const mesh = new THREE.Mesh( geometry, material ); mesh.rotation.x = - Math.PI / 2; scene.add( mesh );