6
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

Organization

three.jsのOrbitControlsをTypescriptで使う方法

詰まったのでメモ。

webpack + three.jsで開発していたので、htmlに <script src="js/controls/OrbitControls.js"></script> とは書きたくなかったので、なんとかしてnpmパッケージで解決した。

three-orbitcontrols-tsをインストールする。

$ yarn add three-orbitcontrols-ts

three-orbitcontrols をインストールすると、@types/three-orbitcontrols が存在しないので型チェックができないため、最初から three-orbitcontrols-ts を入れてしまうのが良さそう。

tsファイルでインポートして使用する。

index.ts
import * as THREE from "three";
import { OrbitControls } from "three-orbitcontrols-ts";

const init = () => {
  const width = window.innerWidth;
  const height = window.innerHeight;

  // レンダラーを作成
  const renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById("myCanvas") as HTMLCanvasElement
  });
  renderer.setSize(width, height);

  // カメラを作成
  const camera = new THREE.PerspectiveCamera(50, width / height);
  camera.position.set(0, 0, 1000);
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.update();
  ...
};

window.addEventListener("DOMContentLoaded", init);

three-orbitcontrols-ts が2年近くメンテナンスされていないのが心配だけれど、 @types/three-orbitcontrols が出るまではしばらく使っていきたい。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
6
Help us understand the problem. What are the problem?