よく利用するThree.js旧バージョンからのコード書き換え(メモ)

よく利用するThree.js旧バージョンからのコード書き換え(メモ)

毎回調べるのも面倒なので覚書。
色々試したくてGitHubやCodepenから他の人のコード拾ってきて弄繰り回してますが、ライブラリのバージョンが古いと一部コードに互換性が無いので、そのままでは動作しない場合があります。
バージョンアップに伴う仕様の変更はjQuery等の他のライブラリにもよくある事ですがWebGL自体まだ新しい技術なのでThree.jsは特に仕様がコロコロ変わります。
数か月前のコードをそのまま使おうとしても上手く動くことの方が稀。

ImageUtils.loadTexture

Three.jsの現行バージョンr73でもImageUtils.loadTexture(‘src’)は動きますがコンソールにもうすぐ使えなくなるという旨の注意書きがでてくるので書き換え方法

旧コード

//テクスチャ読み込み
var texture = THREE.ImageUtils.loadTexture('textures/source.png');

//マテリアルに貼り付け
var material = new THREE.MeshBasicMaterial( { 
          map: texture
           } );

新コード

//テクスチャ読み込み
var loader = new THREE.TextureLoader();
texture=loader.load('textures/source.png');

//マテリアルに貼り付け(同じ)
var material = new THREE.MeshBasicMaterial( { 
          map: texture
           } );

ドキュメンテーションには.load ( url, onLoad, onProgress, onError )とあるのでロード後、ロード中、エラー時と処理を分岐できるのでもっと便利ですが、そうするとコードの構造自体書き換える必要があるのであくまで応急処置。

shadowCamera

旧バージョンではHelperを作成するのにカメラにもライトにもshadowCameraを使っていたようですが、新バージョンではそれぞれに対応するヘルパーがあるのでスポットライトに使っていたshadowCameraは使用でき代わりにSpotLightHelper(),CameraHelper()等を使います。
新しいだけあって此方の方が遥かに便利。

こちらが以前の記事『WebGLライブラリThree.jsの基礎と照明(Light)色々。』にも掲載した各種ライトのヘルパー。

See the Pen KdOVqe by Yuya Saito (@U-YA) on CodePen.

ちなみにこちらがShadowCameraで作った以前のバージョンのSpotlightのヘルパー。(by Mad Dog Tutorials)

See the Pen THREE.js Basic Scene with Spot Light by Patrick (@wpdildine) on CodePen.

今後も気づいたら色々追記していきます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です