Me gustaría poder establecer la rotación de una esfera Three.js en un valor absoluto, pero cada vez que configuro rotateY , el valor que aplico se suma o resta de la última rotación, en lugar de convertirse en una nueva configuración de rotación absoluta.
En una respuesta relacionada sobre un cubo ( Three.js Establecer rotación local absoluta ), el cubo tiene un atributo de rotation , y cube.rotation.x = someValue da como resultado el tipo de rotación absoluta que estoy buscando.
Pero el objeto SphereGeometry que estoy usando (con un mapa del mundo como textura) no tiene atributo de rotation .
Supongo que podría hacer un seguimiento de las rotaciones anteriores y aplicar solo la diferencia, pero creo que eventualmente sufriría de errores de redondeo acumulativos.
Hay otra manera de hacer esto? ¿Un método de reinicio de algún tipo?
async orient(lon: number, lat: number): Promise<void> { if (Globe.mapFailed) throw new Error('Map not available'); else if (!Globe.mapImage) await new Promise<void>((resolve, reject) => Globe.waitList.push({ resolve, reject })); if (!this.initialized) { this.camera = new PerspectiveCamera(FIELD_OF_VIEW, 1); this.scene = new Scene(); this.globe = new SphereGeometry(GLOBE_RADIUS, 50, 50); const mesh = new Mesh( this.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(mesh); this.camera.position.z = VIEW_DISTANCE; this.camera.rotation.order = 'YXZ'; this.initialized = true; } this.globe.rotateY(PI / 20); // Just a sample value I experimented with this.camera.rotation.z = (lat >= 0 ? PI : 0); requestAnimationFrame(() => this.renderer.render(this.scene, this.camera)); }Actualizar:
Mi solución por ahora es esta:
this.globe.rotateX(-this.lat); this.globe.rotateY(this.lon); this.lon = to_radian(lon); this.lat = to_radian(lat); this.globe.rotateY(-this.lon); this.globe.rotateX(this.lat);Estoy guardando las rotaciones anteriores que se han hecho para poder deshacerlas y luego aplicar nuevas rotaciones. (Las conversiones de grados/radianes, y el signo de la rotación de longitud que debe invertirse, oscurece un poco el proceso).
Creo que estás confundiendo geometry.rotateY(rot) con mesh.rotation.y = rot . Como se explica en los documentos:
.rotateY(): Gira la geometría sobre el eje Y. Por lo general, esto se realiza como una operación única y no durante un bucle. Utilice Object3D.rotation para la rotación típica de malla en tiempo real.
geometry.rotateY(rot) solo debe usarse una vez porque actualiza los valores de todas las posiciones de los vértices, por lo que tiene que iterar a través de cada vértice y actualizarlo. Esto es útil si necesita modificar el "estado original" de su geometría, por ejemplo, un modelo de personaje que debe comenzar mirando hacia abajo en el eje z.
mesh.rotation.y = rot; es lo que probablemente estés buscando. Esto es lo que usa durante las rotaciones en tiempo real, por lo que las posiciones intrínsecas de los vértices no se tocan, solo está rotando la malla como un todo. Por ejemplo, cuando tu personaje está corriendo por todo el mapa.
this.mesh = new Mesh(geometry, material); // Set rotation to an absolute rotation value this.mesh.rotation.y = Math.PI / 20; // Increment rotation a relative amount (like once per frame): this.mesh.rotation.y += Math.PI / 20;