何故か無条件に console.log でリビジョンを表示するようになっているので、IE の場合はF12 で開発者ツールを開かないとエラーで実行されません。そこで先頭で以下のコードを追加しておくといいです。
if(!window["console"]){window["console"]={};window["console"]["log"]=function(){}}
それから、光に対応している MeshLambertMaterial の CanvasRenderer の処理でテクスチャ処理が削除されているので、代わりに MeshBasicMaterial を使用します。もともと、CanvasRendererでは、無理やり Google Chrome でしかまともに動かない darker というものを使っていたのですが、無理が生じてきたものと思われます。結果的に、WebGLRenderer と CanvasRenderer では Materialを分けて使う運用になると思います。 CanvasRenderer で MeshBasicMaterial への移行 実際、ソース上では MeshBasicMaterial として仕様変更されているのですが、他の部分が完全に右へならえになっていないので、CanvasRenderer を使いたい場合は注意が必要です。 ★ WEB 実行サンプル1) 3D モデルをロードしたい場合は、JSONLoader のイベント内で MeshFaceMaterial を使う mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial()); これは、ポリゴンの３角形データが内部で配列になっていて、それを統括するのが MeshFaceMaterial です。MeshFaceMaterial は定義上名前だけの器として内部にはなにもありません。ただ、さらにデータ内の shading を Basic にする必要がありますし、これらは今後のバージョンアップで仕様変更される可能性もあります。 ※ データを変更しない場合、テクスチャが一枚だけならこれでも表示されます var param = { map: THREE.ImageUtils.loadTexture('texture.png'), overdraw: true }; mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( param )); 2) 単純ポリゴンでは、パラメータでテクスチャを渡して MeshBasicMaterial を直接使う キュープ等では MeshBasicMaterial でテクスチャは自分でロードします。
var image = new Image()
image.onload = function () {
var texture = new THREE.Texture( this );
texture.needsUpdate = true;
material = new THREE.MeshBasicMaterial({map: texture});
// キューブ
cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300), material);
cube.overdraw = true;
scene.add(cube);
};
image.src = 'texture.png';
|
|
【Three.js & typefaceの最新記事】
- jQuery + Shadowbox.js + Three.js で『画像を蝶のように飛翔させる』デモ表示
- 別ドメインの画像を『テクスチャ』として使った、Three.js(v65) + WebGL キューブアニメーション
- Three.js( Canvas ) デモコード( 背景画像、前景画像、鳥画像変更可 ) : 200のオブジェクトが舞います。
- Three.js + Shadowbox 飛翔する200人の初音ミク
- Three.js r48 で JSONLoader が Opera で動作しない原因と対処方法
- Three.js で、Blender から出力したデータ(Three.jsフォーマット)の境界線を消す overdraw の適用のさせかた
- 動的に typeface.js フォントを適用させる
- 日本語の .ttf をそのまま変換した大きな typeface.js の内容から必要な文字だけを抜き取るツールを作りました( 現在は 切り絵字/水面字/モフ字/青柳隷書しも )
- typeface.js(0.15)で、Operaが正しく動作しない理由
- typeface.js を少し変更して、データに値を追加するとドロップシャドウが実装できるようにしました
- 自作デザインフォントによる、typeface.js での表示テスト
