Teachers open the door but You must enter by yourself.
【事前学習】 高校のベクトル単元のベクトルの成分について復習しておきましょう。
ベクトルを直交座標系の上に配置することにより、各座標軸方向の値(座標値)の組で、ベクトルの始点や終点の位置を表したり、始点と終点の各座標軸の値の和や差で和ベクトルや差ベクトルを表したりすることができます。これをベクトルの成分表示とよびます。
2次元平面上の点A$(a_1, a_2)$を始点、B$(b_1, b_2)$を終点とするベクトル$\Vec{AB}$ の成分は$(b_1-a_1,b_2-a_2)$となります。
2次元平面上の2つのベクトルの成分がそれぞれ $\vec a = (a_x, a_y),\ \vec b = (b_x, b_y)$のとき、以下のような演算結果が得られます。
$\vec a+\vec b = (a_x+b_x,a_y+b_y)$
$\vec a-\vec b = (a_x-b_x,a_y-b_y)$
$m\vec a = (ma_x,ma_y)$
$m\vec a+n\vec b = (ma_x+nb_x,ma_y+nb_y)$
※ 3),4) は $\Vec{OA},\Vec{OB}$ を用いて考える。
ベクトルの始点が原点になるように平行移動するとベクトルの終点の座標はベクトルの成分と同じになる。
※ ベクトルの終点の座標とベクトルの成分の値を混同しないように注意してください。
three.js editor を使って、3Dの図形を表示してみましょう。
//ベクトルの成分 Lesson 3D 1. 3)
const A=new THREE.Vector3(1, -4, 7);
const B=new THREE.Vector3(7 , 2, 5);
vector(A, B, 0.05);
const C=new THREE.Vector3((A.x+B.x*2)/3, (A.y+B.y*2)/3, (A.z+B.z*2)/3);
sphere(C, 0.5, 0xff0000);
const distance=30; //原点からの距離
//以下は変更しないでください
scene.add( new THREE.AxesHelper(100) );//座標軸
function sphere(position, radius, color=0xffffff){
const sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,32,16),
new THREE.MeshPhongMaterial({
color:color,
specular:0x444444,
shininess:30,
emissive:color&0x333333
})
);
sphere.position.copy(position);
scene.add(sphere);
}
function vector(start, end, radius, color=0xffffff){
const v=(new THREE.Vector3).subVectors(end,start);
const l=v.length();
const material = new THREE.MeshPhongMaterial({
color:color,
specular:0x444444,
shininess:30,
emissive:color&0x333333
});
const rotation = new THREE.Euler(
Math.atan2(v.z,Math.sqrt(v.x*v.x+v.y*v.y)),
0,
-Math.atan2(v.x,v.y),
"ZXY"
);
const cone=new THREE.Mesh(
new THREE.ConeGeometry(radius*2, radius*6, 32),
material
);
cone.position.copy(new THREE.Vector3).addVectors(
start,
v.clone().multiplyScalar((l-0.15)/l)
);
cone.rotation.copy(rotation);
scene.add(cone);
const cylinder=new THREE.Mesh(
new THREE.CylinderGeometry(radius,radius,l-0.3,32),
material
);
cylinder.position.copy(new THREE.Vector3).addVectors(
start,
v.clone().multiplyScalar(0.5*(l-0.3)/l)
);
cylinder.rotation.copy(rotation);
scene.add(cylinder);
}
function line(position1, position2, color=0xfffff){
const line = [];
line.push(position1);
line.push(position2);
scene.add(new THREE.Line(
new THREE.BufferGeometry().setFromPoints(line),
new THREE.LineBasicMaterial({color:color})
));
}
function pointermove(event){
const longitude=(event.offsetX/window.innerWidth-0.5)*6.28;
const latitude=(event.offsetY/window.innerHeight-0.5)*3;
camera.position.set(
Math.cos(longitude)*Math.cos(latitude),
Math.sin(latitude),
Math.sin(longitude)*Math.cos(latitude)
).multiplyScalar(distance);
camera.lookAt( scene.position );
}
【事後学習】 ベクトルの始点、終点の座標とベクトルの要素の値の関係をイメージできるようになりましょう。
This site is powered by