javascript - texture - ¿Cómo envuelvo un avión sobre una esfera con three.js?

three js rotation

Question

Soy relativamente nuevo en three.js y estoy tratando de posicionar y manipular un objeto plano para que tenga el efecto de colocar sobre la superficie de un objeto esférico (o cualquier otro), de modo que el plano tome la forma de la superficie del objeto . La intención es poder mover el avión sobre la superficie más adelante.

Posiciono el avión en frente de la esfera e indexo a través de los vértices del avión lanzando un rayo hacia la esfera para detectar la intersección con la esfera. Luego trato de cambiar la posición z de dichos vértices, pero no logra el resultado deseado. ¿Alguien puede darme alguna orientación sobre cómo hacer que esto funcione o, de hecho, sugerir otro método?

Así es como trato de cambiar los vértices (con un desplazamiento de 1 para ser visible ''en'' la superficie de la esfera);

planeMesh.geometry.vertices[vertexIndex].z = collisionResults[0].distance - 1;

Asegurándose de establecer lo siguiente antes de renderizar;

planeMesh.geometry.verticesNeedUpdate = true;
planeMesh.geometry.normalsNeedUpdate = true;

Tengo un violín que muestra dónde estoy, aquí echo mis rayos en z y no consigo intersecciones (colisiones) con la esfera, y no puedo cambiar el avión de la manera que deseo.

http://jsfiddle.net/stokewoggle/vuezL/

Puede girar la cámara alrededor de la escena con las flechas izquierda y derecha (en cromo de todos modos) para ver la forma del avión. He hecho que la esfera se vea a través, ya que me parece útil ver mejor el avión.

EDITAR: violín actualizado y error de descripción corregida.

Answer 1

Perdón por la demora, pero me tomó un par de días resolver esto. La razón por la cual las colisiones no funcionaban era porque (como sospechábamos) los vértices planeMesh están en el espacio local, que es esencialmente lo mismo que comenzar en el centro de la esfera y no lo que estás esperando. Al principio, pensé que una solución rápida sería aplicar WorldMatrix como lo hizo stemkoski en su ejemplo de colisión github three.js al que me vinculé, pero eso tampoco terminó porque el avión está definido en coordenadas xey , arriba y abajo, izquierda y derecha, pero no se realiza ninguna información z (profundidad) localmente cuando se crea un plano plano en 2D.

Lo que terminó funcionando es configurar manualmente el componente z de cada vértice del plano. Originalmente querías que el avión estuviera en z = 201, así que simplemente moví ese código dentro del bucle que pasa por cada vértice y configuré manualmente cada vértice en z = 201; Ahora, todas las posiciones de inicio de los rayos fueron correctas (a nivel mundial) y tener una dirección de rayos de (0,0, -1) dio como resultado las colisiones correctas.

var localVertex = planeMesh.geometry.vertices[vertexIndex].clone();
localVertex.z = 201;

Una cosa más fue para hacer que la envoltura plana fuera absolutamente perfecta, en lugar de usar (0,0, -1) como dirección de cada rayo, calculaba manualmente cada dirección de rayo restando cada vértice de la posición de posición central de la esfera y normalizando el vector resultante. Ahora, el punto de intersección colisiónResulta será aún mejor.

var directionVector = new THREE.Vector3();
directionVector.subVectors(sphereMesh.position, localVertex);
directionVector.normalize();
var ray = new THREE.Raycaster(localVertex, directionVector);

Aquí hay un ejemplo de trabajo: http://jsfiddle.net/FLyaY/1/

Como puede ver, el planeMesh se ajusta perfectamente a la esfera, como un parche o una curita. :)

Espero que esto ayude. Gracias por publicar la pregunta en la página de github de three.js. No la habría visto aquí. Al principio pensé que era un error en THREE.Raycaster, pero al final solo fue error del usuario (mío). Aprendí mucho sobre el código de colisiones al trabajar en este problema y lo usaré más adelante en mis propios proyectos de juegos en 3D. Puede ver uno de mis juegos en: https://github.com/erichlof/SpacePong3D

¡La mejor de las suertes para ti! -Erich

Answer 2

Tu posición de inicio de rayos no es buena. Probablemente debido a que las coordenadas de los vértices son locales al plano. Comienzas el raycast desde el interior de la esfera para que nunca golpee nada.

Cambié la posición de inicio de rayos como esta como prueba y obtuve 726 colisiones:

var rayStart = new THREE.Vector3(0, 0, 500);
var ray = new THREE.Raycaster(rayStart, new THREE.Vector3(0, 0, -1));

Jsfiddle bifurcado: http://jsfiddle.net/H5YSL/

Creo que debes transformar las coordenadas de los vértices en coordenadas mundiales para obtener la posición correcta. Eso debería ser fácil de deducir de los documentos y ejemplos.