Home 旅レポ一覧 MyPhoto 売れ筋インフォ  TechBlog  LinkBox  RSSr(New!)  SiteMap  Album  日記  blog  MyPage  About
 
icon icon
 

  • WebGL::three.js cannon.js blenderの情報です。
  • 修正 状態:input(public)

  • JFLABO
  • 3DCG worldへのイザナイ
    当初は手探りで、読めないデータが発生するなどいろいろハマりましたが
    概ね以下の情報に目を通してから始めるとスキルが身に付くかと思います。

    これから始める人、本業ではないけどHTML5 WebGLについて知っておきたい
    という人向けにメモを残します。

    実験で動作確認したバージョン組み合わせ
    three.js:REVISION: '63' blender:2.65 cannon.js:0.6.0

    目次
     WebGL入門 調べ方 情報源
     WebGL コードス二ペット
     WebGL実験室 得られたもの フィードバック
     Tips エラーレポート 解決手段


  • チャプターリスト(インデックス)

  • 1: WebGL(Three.js) コードス二ペット



  • WebGL(Three.js) コードス二ペット

  • 作成中....

    テクスチャをダイナミックに切り替える
     mesh.geometry.materials[0].map = new THREE.ImageUtils.loadTexture("/011.png");

    モデルを読み込む

    自前のモデリングデータが表示できるか試す

    アニメーションさせる

    自前のモデリングデータをアニメーションさせる

    複数アニメーションをつける
     アニメーションエディタはドープシート NLA Editorになった

    アニメーションを切り替える

    フォグを表示させる

    キー入力に対応する

    陰を表示する

    skybox skyDome
    cubemap用データ::cube map materials
    http://www.humus.name/index.php?page=Textures
    いろいろな場所のキューブマップ用データがあります。まるでそこに行ったかのような体験ができます。

    ワイヤーフレームを表示する
    var cube = new THREE.Mesh(new THREE.CubeGeometry(30,30,30), new THREE.MeshLambertMaterial({
    "color": 0xffffff,
    "wireframe":true
    }));
    反射

    カメラ(視点)の切り替え

    cannon.js 衝突判定

    テキストを表示(アルファベット)