Zenn
Open2

Three.js学習メモ

Three.js
yuichkunyuichkun

1-4

Axisの表示

const axesHelper = new THREE.AxesHelper();
scene.add(axesHelper);

グルーピング

const group = new THREE.Group();
const cube1 = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
const cube2 = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
cube2.position.x = -2;
const cube3 = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0x0000ff })
);
cube3.position.x = 2;
group.add(cube1);
group.add(cube2);
group.add(cube3);
group.position.y = 2;
scene.add(group);
yuichkunyuichkun

1-5

時間経過の取得

THREE.Clock を使う

const clock = new THREE.Clock();
const elapsedTime = clock.getElapsedTime();
// 0.3秒のLFO
mesh.rotation.x = elapsedTime * Math.PI * 2 * 0.3;

gsap

gsapは内部的に requestAnimationFrame を呼ぶので、render loopの中では何もしなくてよい

gsap.to(mesh.position, {
  duration: 1,
  delay: 2,
  x: 0,
});
ログインするとコメントできます