0
299
VistasThree.js: ¿Cómo agregaría una cuadrícula de longitud/latitud a un globo terráqueo?
Estoy trabajando en una simulación del famoso Reloj Astronómico de Praga: https://shetline.com/orloj/
Ya produje una cuadrícula de latitud/longitud de forma tosca, dibujando líneas bidimensionales en la imagen que se usa para la superficie del globo, pero este método no funciona muy bien:
(Sí, se supone que el globo está al revés, como en el reloj original).
Las líneas de cuadrícula son muy irregulares de esta manera y se desvanecen cerca de los polos debido a la escala cerca de los polos de la imagen del mapa rectangular original.
Estoy tratando de encontrar un tutorial sobre cómo hacer un poco de decoración simple como esta usando construcciones Three.js/WebGL, pero hasta ahora no he tenido suerte. Puedo comenzar un poco con lo que quiero con el siguiente código:
this.camera = new PerspectiveCamera(FIELD_OF_VIEW, 1); this.scene = new Scene(); const globe = new SphereGeometry(GLOBE_RADIUS, 50, 50); globe.rotateY(-PI / 2); this.globeMesh = new Mesh(globe, new MeshBasicMaterial({ map: new CanvasTexture(Globe.mapCanvas) })); this.renderer = new WebGLRenderer({ alpha: true }); this.renderer.setSize(GLOBE_PIXEL_SIZE, GLOBE_PIXEL_SIZE); this.rendererHost.appendChild(this.renderer.domElement); this.scene.add(this.globeMesh); const circle = new Line(new CircleGeometry(GLOBE_RADIUS + 0.1, 50), new LineBasicMaterial({ color: GRID_COLOR, linewidth: 20 })); this.globeMesh.add(circle);... al agregar un círculo y hacer que los bordes del círculo sobresalgan un poco más allá de la superficie del globo, pero el resultado es solo una línea muy tenue que no responde a mis intentos de hacer que la línea sea más gruesa. También probé algo similar con un toro que flota justo sobre la superficie del globo, pero tampoco funciona muy bien.
Lo que quiero es algún tipo de capa adicional para las líneas, o un material compuesto que combine mi imagen de píxel con líneas definidas geométricamente (en lugar de líneas pintadas), pero no encuentro la documentación de Three.js muy clara para averiguarlo. como hacer esto.
Ni siquiera estoy seguro de qué tipo de modelo geométrico usar para estas líneas. Todos son círculos de algún tipo, pero para tener una extensión visual real, parece que la geometría debería ser una especie de cintas estrechas y delgadas que abrazan el globo y descansan sobre la superficie del globo.
1 Respuestas
Responde la pregunta0
Terminé usando cilindros (muy, muy cortos) como mis líneas de longitud y latitud, flotando ligeramente sobre la superficie del globo. Parece que no se puede garantizar que cualquier cosa compuesta de objetos de línea verdadera linewidth , y no quería conformarme con líneas siempre de un píxel.
Las líneas de longitud son simples cilindros huecos, como lo es el ecuador. Todas las demás líneas de latitud son cilindros acampanados, más anchos en un extremo para adaptarse a la forma del globo.
const LINE_THICKNESS = 0.03; const HAG = 0.01; // Sleight distance above globe that longitude/latitude lines are drawn. // ... // Lines of longitude for (let n = 0; n < 24; ++n) { const line = new CylinderGeometry(GLOBE_RADIUS + HAG, GLOBE_RADIUS + HAG, LINE_THICKNESS, 50, 1, true); line.translate(0, -LINE_THICKNESS / 2, 0); line.rotateX(PI / 2); line.rotateY(n * PI / 12); const mesh = new Mesh(line, new MeshBasicMaterial({ color: GRID_COLOR })); this.globeMesh.add(mesh); } // Lines of latitude for (let n = 1; n < 12; ++n) { const lat = (n - 6) * PI / 12; const r = GLOBE_RADIUS * cos(lat); const y = GLOBE_RADIUS * sin(lat); const r1 = r - LINE_THICKNESS * sin(lat) / 2; const r2 = r + LINE_THICKNESS * sin(lat) / 2; const line = new CylinderGeometry(r1 + HAG, r2 + HAG, cos(lat) * LINE_THICKNESS, 50, 8, true); line.translate(0, -cos(lat) * LINE_THICKNESS / 2 + y, 0); const mesh = new Mesh(line, new MeshBasicMaterial({ color: GRID_COLOR })); this.globeMesh.add(mesh); }Tal vez haya una mejor manera en la que las líneas sean parte de algún tipo de textura aplicada al globo, pero esto al menos está dando resultados satisfactorios por ahora.