raycaster - three.js establece y lee la cámara mira vector
three perspectivecamera (4)
La respuesta anterior envuelta como una utilidad, esto es lo que hago con mis Tres Utilidades:
THREE.Utils = {
cameraLookDir: function(camera) {
var vector = new THREE.Vector3(0, 0, -1);
vector.applyEuler(camera.rotation, camera.eulerOrder);
return vector;
}
};
Llámalo con THREE.Utils.cameraLookDir(camera);
En lugar de girar la cámara con la rotación de la cámara o con la función lookAt () me gustaría pasar un vector de aspecto directamente a la cámara ... ¿Es posible establecer un vector de aspecto de cámara directamente y es posible leer el aspecto vector de la cámara?
Estas otras respuestas son muy perspicaces, pero no completamente correctas. El código devuelve un vector que apunta en la misma dirección hacia la que apunta la cámara. ¡Es un gran comienzo!
Pero a menos que la cámara esté en el origen (0, 0, 0) (o mienta exactamente en el segmento de línea que conecta el origen con el punto vectorial girado sin pasar más allá de ese punto para que el punto esté detrás de la cámara) la cámara ganó Estoy mirando ese punto. Claramente, solo sentido común, la posición de la cámara también influye en los puntos que se observan. ¡¡Solo piensa en ello!!
El método de la cámara lookAt() mira un punto en el espacio 3D independientemente de dónde se encuentre la cámara. Para obtener un punto que la cámara está mirando, debe ajustar la posición de la cámara llamando al:
vec.add( camera.position );
También vale la pena mencionar que la cámara no mira un solo punto sino que está mirando hacia abajo una línea de infinitos puntos, cada uno a una distancia diferente de la cámara. El código de las otras respuestas devuelve un vector que tiene exactamente una unidad de longitud porque la aplicación de un cuaternión al vector del eje z normalizado (0, 0, -1) devuelve otro vector normalizado (en una dirección diferente). Para calcular la vista en el punto a una distancia arbitraria x de la cámara, use:
THREE.Vector3( 0, 0, -x ).applyQuaternion( camera.quaternion ).add( camera.position );
Esto toma un punto a lo largo del eje z a una distancia x del origen, lo gira en la dirección de la cámara y luego crea un "punto mundial" al agregar la posición de la cámara. Queremos un "punto mundial" (y no solo un "relativo al punto de la cámara") ya que camera.lookAt() también toma un "punto mundial" como parámetro.
La cámara no tiene un "vector de búsqueda", por lo que no puede configurarlo.
Sin embargo, puede construir un point para mirar agregando su vector de búsqueda a la posición de la cámara, y luego llamar
camera.lookAt( point );
Aquí se explica cómo determinar la dirección en la que mira la cámara, suponiendo que la cámara no tiene ningún elemento principal (que no sea la escena).
La cámara está mirando hacia abajo su eje z negativo interno, así que crea un vector que apunta hacia abajo del eje z negativo:
var vector = new THREE.Vector3( 0, 0, - 1 );
Ahora, aplique la misma rotación al vector que se aplica a la cámara:
vector.applyQuaternion( camera.quaternion );
El vector resultante apuntará en la dirección que mira la cámara.
Alternativamente, puede usar el siguiente método, que funciona incluso si la cámara es hija de otro objeto:
camera.getWorldDirection( dirVector );
three.js r.73
Lo que hice fue usar el método lookAt (Vector) justo antes de renderizar la escena como en el siguiente código, solo inténtalo usándolo en un nuevo archivo html :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style >
*{
margin: 0 ;
}
#WebGlElement {
height: 500px;
width: 500px;
background-color: red
}
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<div id="WebGlElement"></div>
<script>
var contianer = document.getElementById("WebGlElement");
var origin = new THREE.Vector3(0,0,0);
// CREATE THREE BASIC ELEMENTS
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 40, 300/300, 1, 1000 );
var renderer = new THREE.WebGLRenderer();
// SET RENDERER AND ATTACH IT TO BODY
renderer.setSize( 500, 500 );
//document.body.appendChild( renderer.domElement );
contianer.appendChild( renderer.domElement);
// CREATE A GEOMETRY AND ADD IT TO SCENE
/*var geometry = new THREE.BoxGeometry( 1, 1, 5 );
var material = new THREE.MeshBasicMaterial( { color: 0x1abc9c } );
material.wireframe = true ;
material.wireframeLinewidth = 0.1 ;
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );*/
var geometry = new THREE.Geometry();
geometry.elementsNeedUpdate=true;
geometry.vertices.push(
new THREE.Vector3( -0, 1, 0 ),
new THREE.Vector3( -1, -1, 0 ),
new THREE.Vector3( 1, -1, 0 )
);
geometry.faces.push(
new THREE.Face3( 0, 1, 2 ),
new THREE.Face3( 2, 1, 0 )
);
var material = new THREE.MeshBasicMaterial( { color: 0x1abc9c } );
//material.wireframe = true ;
//material.wireframeLinewidth = 0.1 ;
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
var axisHelper = new THREE.AxisHelper( 1 );
scene.add( axisHelper );
// POSITION OF CAMER ON Z
camera.position.z = 5;
camera.position.y = 5;
camera.up = new THREE.Vector3(0,0,1);
var dir = 1;
var number = 0.115
// CREATE FUNCTION FOR RENDER
var render = function () {
requestAnimationFrame( render );
//circle.rotation.x += 0.01;
if ( camera.position.x> 5) {
dir = -1;
}
if ( camera.position.x< -5) {
dir = 1;
}
camera.lookAt(cube.position);
//camera.rotation.y += 0.015 * dir;
camera.position.x += number * dir;
renderer.render(scene, camera);
};
// EXECUTE FIRST RENDER
render();
</script>
</body>
</html>