seleccionar - pasar el valor de un input text a una variable javascript

¿Controles de cámara basados ​​en cuadro delimitador de objeto?

Question

Los controles de órbita normales de three.js son perfectos para objetos redondos, pero no son buenos para objetos largos (especialmente cuando se acerca el zoom), estoy buscando una solución para resolver eso.

Es difícil describirlo en palabras, vea este ejemplo web de Google (acerque el máximo para verlo): https://www.google.com/o3d/shopping/viewer/360?q=ymMBhK8fu3C&o3ds=use_3d

Esta es la ilustración de la vista superior de lo que estoy buscando:

Estaba pensando en el uso basado en OrbitControls predeterminados, rayos continuos desde la cámara hasta el cuadro delimitador y mantener una distancia constante, pero el problema es que la cámara siempre mira el centro del objeto, a diferencia del ejemplo anterior (la cámara gira solo cuando alcanza la esquina del objeto).

Cualquier idea sería muy apreciada.

Answer 1

Como señaló, el uso de los THREE.OrbitControls existentes y la modificación del target no funciona, ya que la cámara no se vería de forma perpendicular en el cuadro delimitador.

Probé cosas diferentes, con resultados bastante malos, pero aquí está mi trabajo.
En cada solución que probé, siempre tuve que calcular (en cualquier orden):

1. la posición de la cámara;
2. la dirección de la cámara.

En cualquier caso, la cámara debe girar alrededor de algo. Por lo tanto, todas mis soluciones se basan más o menos en los THREE.OrbitControls , que actúa como, por ejemplo, "el estado actual de la rotación" y maneja todos los eventos DOM para mí.

Mirando el punto más cercano en el AABB

La idea es la siguiente :

• La cámara gira;
• el punto más cercano en el AABB de la cámara es donde debe mirar la cámara (dirección);
• una cierta distancia d se usa para alejar la cámara de este punto (posición).

Hay 2 casos:

1. El borde
   

2. La esquina
   

Probado en este (muy complicado) violín . Aún así es necesario arreglar las caras superior e inferior (singularidad de rotación).

Raycasting en un volumen delimitador

Esta es la idea que describiste en la pregunta:

• Cree un volumen delimitador que la cámara debería seguir;
• raycast la posición de la cámara en este BV;
• la nueva posición de la cámara es el punto de intersección ;
• la nueva dirección de la cámara es la normal de la cara intersectada.

Lo probé con una geometría de caja subdividida con bordes redondeados y esquinas para que la cámara gire en ángulos.

Teniendo en cuenta la suavidad de la superficie, el resultado podría haber sido muy conveniente. Desafortunadamente, la cámara cambia bruscamente de dirección cuando cambia la normalidad de la intersección, lo que causa golpes molestos en el movimiento.

Ver este violín (complicado de nuevo) .

Para solucionar esto, podemos interpolar linealmente lo normal a lo largo del triángulo, pero esto requiere que las normales se calculen de tal forma que cada normal de un vértice sea el promedio de las normales de las caras a las que pertenece este vértice.

Tenga en cuenta que esta solución es bastante pesada (raycasting muchas caras) y puede requerir algún preprocesamiento para crear el BV.

Cambiando la base de los controles de órbita clásicos

Esto no es exactamente lo que está buscando, pero también es adecuado para objetos largos y, sinceramente, esa es la solución menos complicada que hice.

La idea es modificar la base sobre la cual opera el THREE.OrbitControls clásico para que la posición se modifique pero la dirección permanezca sin cambios, como la siguiente:

En cierto modo lo hice con una versión personalizada: THREE.BasisOrbitControls . Echa un vistazo a este violín .

var basis = new THREE.Matrix4();
basis.makeScale(2.0, 3.0, 4.0); // my object is very long and a bit tall
var controls = new THREE.BasisOrbitControl(camera, basis, renderer.domElement);

Tenga en cuenta que el movimiento resultante de la cámara se describe mediante un elipsoide .

Espero que esto haya ayudado. Estoy realmente interesado en una solución limpia también.