オブジェクトの移動

10340 ワード
three.js テキストリンク

Sceneコンポーネント

  • position:移動
  • scale:サイズ
  • rotation:回転
  • quaternion:回転+α
    • 以上の4要素はいずれもObject3D類

    ✨ position

    positionプロジェクトは対象のみではないVector3クラスの例
    =役に立つ方法がたくさんあります
    // vector 길이 구하기
console.log(mesh.position.length())

// 또 다른 vector로 부터의 거리 구하기
console.log(mesh.position.distanceTo(camera.position))

// vector 길이를 1 유닛으로 바꾸면서 방향은 유지하기
console.log(mesh.position.normalize())

// x, y, z 한꺼번에 업데이트
meesh.position.set(0.7, -0.6, 1)

    ✨ Scale

    scale又Vector3・x・y・z・のデフォルト値は1
    mesh.scale.x = 2
mesh.scale.y = 0.25
mesh.scale.z = 0.5
    z軸がレンズを見て見えない
    負数の値は使わないほうがいい

    ✨ Rotation

    x・y・z違うVector3じゃなくEuler
    ・𐅽𐅽𐅺｣｣｣｣｣｣｣｣
    ・𐅽𐅽・𐅺𐅺｣｣｣｣｣｣
    ・뉭묭・뉪덞
    これらの軸の値は弧度で表されるのでx
    // x, y축 기준으로 1/8 회전하고 싶을 때
mesh.rotation.x = Math.PI * 0.25
mesh.rotation.y = Math.PI * 0.25

// reorder(...) 메소드를 이용해서 순서를 재정렬 할 수 있다
object.rotation.reorder('yxz')

    Axes helper


    位置決めを助けるための仮想的なy・z・Math.PIライン
    // 파라미터는 선의 길이를 나타낸다
const axesHelper = new THREE.AxesHelper(2)
scene.add(axesHelper)

    lookAt()


    Object3D実例は使えるx方法は、その名の通り、何かを見せてくれる
    👉 Vector 3をパラメータとして自動回転可能y軸を与えられた目標を注視させる
    camera.lookAt(new THREE.Vector3(0, -1, 0))

/* mesh는 scene의 중앙에 위치하므로
default camera position에서 바라보게 한다 */
camera.lookAt(mesh.position)

    グループ化

    const group = new THREE.Group()
group.scale.y = 2
group.rotation.y = 0.2
scene.add(group)

const cube1 = new THREE.Mesh(
	new THREE.BoxGeometry(1, 1, 1)
  	new THREE.MeshBasicMaterial({ color: 'aliceblue'})
)
cube1.position.x = - 1.5
group.add(cube1)

const cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 'lavenderblush' })
)
cube2.position.x = 0
group.add(cube2)
    Hibernate悲観ロックと楽観ロック
    コアJavaScript第1章第1部