2015年5月11日月曜日

Cardboard実験サイト 3 / Threeサンプルの構成


デモサイト

ソースコードダウンロード

概要

 WebGLをjavascriptライブラリThree.jsで作られたHTMLを二分割画面で再生することで３Dアニメーション化するサンプルです。

画面レイアウト設定

タグ構造 

Three.jsを使うjavascriptを自分で作る場合(Cube1、Sphere1)
HTMLサンプルと同じです。

  <body onload="init();">
    <div id="container">
      <div id="outerBox">
        <div id="boxR">
          <div id="canvasR"></div>
        </div>
        <div id="boxL">
          <div id="canvasL"></div>
        </div>
      </div>
    </div>
  </body>

Three.orgのexampleなど、既存のjavascriptを利用する場合
HTMLサンプルとほぼ同じですが、Canvasのdiv代わりにiframeを使い、Three.jsのHTMLを読み込みます。
javascript、cssはdivのidを使用するので、idはこのとおりにしておきます。

  <body onload="init();">
    <div id="container">
      <div id="outerBox">
        <div id="boxL">
          <iframe id="ifL" src="webgl_animation_cloth.html"></iframe>
        </div>
        <div id="boxR">
          <iframe id="ifR" src="webgl_animation_cloth.html"></iframe>
        </div>
      </div>
    </div>
  </body>

index.htmlのjavascript

 Three.jsを使うjavascriptを自分で作る場合(Cube1、Sphere1)
ja、cssインポート

    <script src="../build/three.min.js"></script>
    <script src="../../js/cardboard.js"></script>
    <script src="Cube.js"></script>
    <link href="../../css/cardboard.css" rel="stylesheet" type="text/css"></link>

javascript

    //body.onloadで呼び出し、初期化を実行。
    function init() {
        Config.setBoxSizes();
        Canvas.add(Cube);
        Canvas.start(msec);
    }

Three.orgのexampleなど、既存のjavascriptを利用する場合
js, cssインポート

    <script src="../../js/cardboard.js"></script>
    <link href="../../css/cardboard.css" rel="stylesheet" type="text/css"></link>



javascript

//body.onloadで呼び出し、初期化を実行。
    function init() {
　　//デバイス横位置の大きさに合わせて左右の画面をリサイズ、イベント設定を行う。
        Config.setBoxSizes();
　　//視差を設定
        Config.ifL.contentWindow.param = new Param({"cameraX":0});
        Config.ifR.contentWindow.param = new Param({"cameraX":0.05});
     }

既存のjavascriptの場合、リンクのパス、アニメ同期に関わる部分の変更が必要。
描画、アニメ同期は元のjavascriptで行うので、ここではCanvas.startは呼ばない。

Three.orgのexampleの変更箇所
exampleによって変更箇所が異なるが、以下のような箇所を変更する。

      //画面サイズ設定
      var boxH, boxW;
      function init() {
          boxH = parent.Config.winH;
          boxW = Math.floor(parent.Config.winW / 2);
          ....
          //Cameraの領域設定
          //camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
          camera = new THREE.PerspectiveCamera( 30, boxW / boxH, 1, 10000 );
          ....
          //texture相対パス変更
          //var clothTexture = THREE.ImageUtils.loadTexture( 'textures/patterns/circuit_pattern.png' );
          var clothTexture = THREE.ImageUtils.loadTexture( '../examples/textures/patterns/circuit_pattern.png' );
          ....
          //models相対パス変更
           //loader.load( "models/animated/horse.js", function ( geometry ) {
    loader.load( "../examples/models/animated/horse.js", function ( geometry ) {
      }

      //canvas_particles_waves.htmlの場合のグローバル変数
      var count, mouseX;

      function render() {
          //Dateを使用している場合は左右の同期が取れるが、マウス位置やループ毎の加算のような場合は変更が必要。
         count = Date.now() / 500;　//マウス位置をDateでせって
         mouseX = mouseY = 0;
          //cameraの位置に視差を設定
          if ( rotate ) {
              //初期亜k時に設定したパラメータでx方向位置を調整
              var x = (typeof param == "undefined" ? 0 : param.cameraX);
              //camera.position.x = Math.cos( timer ) * 1500;
              camera.position.x = Math.cos( timer ) * 1500 + x;
              ..... 
          }
      }

リンクのパス
<script src="../examples/js/Cloth.js"></script>など
このサンプルでは同じになるように配置してあるが、異なる場合は構成に応じて変更。

投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)