Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@takumifukasawa

TypeScriptでThree.jsのOrbitControlsの最新版を使う

More than 1 year has passed since last update.

背景

TypeScriptでThree.jsのOrbitControlsを使う際、TypeScript用のnpmモジュールで three-orbitcontrols-ts を見つけて導入してみたが、OrbitControls内でwarningを吐いていた。

最後の更新が約3年前で、最新版のThree.jsの処理と噛み合っていなかったことが原因だった。

バージョンの差によるエラーなどは避けたいので、Three.js内の最新のOrbitControlsを参照する方法を探った。

環境

  • Webpack, TypeScript, Three.js
package.json
  ...
  "dependencies": {
    ...
    "@types/three": "^0.103.2",
    "three": "^0.109.0"
    ...
  },
  "devDependencies": {
    ...
    "ts-loader": "^6.2.0",
    "typescript": "^3.6.4",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    ...
  },
  ...

方法

threeパッケージ内のjsmからOrbitControlsを参照する。

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

...

const controls: OrbitControls = new OrbitControls(camera, renderer.domElement);
controls.update();
2
Help us understand the problem. What is going on with this article?
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
takumifukasawa
WebGL, Shader, Unity, UE4
kayac
古都鎌倉から新しい技術と面白いサービスを、次々にリリースする面白法人カヤックのフロントエンジニアチーム

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?