camera.rotation または lookAt() 関数を使用してカメラを回転させる代わりに、視線ベクトルをカメラに直接渡したいのですが...カメラの視線ベクトルを直接設定することは可能ですか?また、視線を読み取ることは可能ですか?カメラからのベクトル？
28880 次
4 に答える
32
カメラには「視線ベクトル」がないため、設定できません。
pointただし、視線ベクトルをカメラの位置に追加して呼び出すことで、見る対象を構築できます。
camera.lookAt( point );
カメラが (シーン以外に) 親を持たないと仮定して、カメラが向いている方向を決定する方法を次に示します。
カメラは内部の負の z 軸を見下ろしているため、負の z 軸を指すベクトルを作成します。
var vector = new THREE.Vector3( 0, 0, - 1 );
ここで、カメラに適用されるベクトルに同じ回転を適用します。
vector.applyQuaternion( camera.quaternion );
結果のベクトルは、カメラが見ている方向を指します。
または、カメラが別のオブジェクトの子であっても機能する次のメソッドを使用できます。
camera.getWorldDirection( dirVector );
three.js r.73
于 2013-03-29T04:14:06.663 に答える
8
これらの他の回答は非常に洞察に満ちていますが、完全に正しいわけではありません。このコードは、カメラが指している方向と同じ方向を指すベクトルを返します。それは素晴らしいスタートです！
しかし、カメラが原点 (0, 0, 0) にない限り (または、点がカメラの背後にあるように、その点を超えずに、回転したベクトル ポイントに原点を接続する線分上に正確にある場合)、カメラは動作しません。その点を見ているわけではありません。明らかに、常識的に言えば、カメラの位置も、見ているポイントに影響を与えます。考えてみてください！
カメラ メソッドlookAt()は、カメラの位置に関係なく、3D 空間内の点を見ます。したがって、カメラが見ているポイントを取得するには、次のように呼び出してカメラの位置を調整する必要があります。
vec.add( camera.position );
カメラが単一のポイントを見ているのではなく、カメラからそれぞれ異なる距離にある無数のポイントのラインを見下ろしていることにも言及する価値があります。正規化された z 軸ベクトル (0、0、-1) に四元数を適用すると、別の正規化されたベクトル (異なる方向) が返されるため、他の回答のコードは長さが正確に 1 単位のベクトルを返します。xカメラから任意の距離にあるルックアットポイントを計算するには、次を使用します。
THREE.Vector3( 0, 0, -x ).applyQuaternion( camera.quaternion ).add( camera.position );
これは、Z 軸に沿ってx原点から離れた位置にポイントを取り、それをカメラの方向に回転させ、カメラの位置を追加して「ワールド ポイント」を作成します。camera.lookAt()パラメータとして「ワールド ポイント」も使用するため、「ワールド ポイント」(「カメラ ポイントに対する相対」だけでなく)が必要です。
于 2015-02-07T23:27:57.083 に答える
8
上記の回答はユーティリティとしてラップされています。これは、私が 3 つのユーティリティで行うことです。
THREE.Utils = {
cameraLookDir: function(camera) {
var vector = new THREE.Vector3(0, 0, -1);
vector.applyEuler(camera.rotation, camera.eulerOrder);
return vector;
}
};
で呼び出すTHREE.Utils.cameraLookDir(camera);
于 2013-06-24T23:25:24.913 に答える
-1
私がしたことは、以下のコードのようにシーンをレンダリングする直前にメソッドlookAt(Vector)を使用することでした.新しい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>于 2016-02-22T04:32:14.533 に答える