0

タイトルはわかりやすいと思います。シリンダーの中央にカメラビューを配置して、html5 キャンバスシリンダーを作成する必要があります。シリンダーの壁に、写真のようなものを構築する必要があります。シリンダーを回転させたりズームしたりします。

カメラとシリンダーをどこから始めるべきかについて誰かが何か指針を持っているなら、助けてください.

あなたが私の説明を理解するのを助けるために、私は画像を投稿しました http://s21.postimg.org/fpnmukbef/inside_cilindre.jpg

4

1 に答える 1

1

2D画像で作業し、最後のステップで必要な部分を変換する必要があると思います

良い部分を3Dに変換するには、選択した放物線の方程式に応じて各コロンを伸ばす必要があると思います

function getStretch(x,maxx)
{ /* here i choice :
     f(x) = (x*x)+3 for top
     f(x) = -(x*x)+1 for bottom
     when y >= 0 and y <= 4
     x >= -1 and x <= +1
  */

   // convert x ~ maxx to -1 ~ 1
   var ratio = 2/maxx; // -1 to 1 === 2
   x = x * ratio;
   x -= 1; // switch from 0 ~ 2 to -1 ~ 1

   var sizeY = 4;
   var y = -(x*x)+1; // bottom get y >= 0 and y <= 1 result, easier to compute
   y *= 2; // double to add up and bottom
   var colonHeight = sizeY - y;
   var colonRatio = colonHeight / sizeY;
   return colonRatio; // return the height ratio for this colon
}

101 個のコロン ビューの値: http://jsfiddle.net/L9YgL/1/

var view_start_x = 200; // current view start at 200px from left source image
var view_size_x  = 399; // current view work on 400 px width

// get our stretch ratio for each colon
var stretch_values = [];
for(var x=0;x<=view_size_x;x++) stretch_values[x] = getStretch(x,view_size_x);

// now we need a function to get the colon height and position

var colonHeight = 400; // height of source image, and max height of out

function getColonInfo(x)
{ if(x < 0 || x > view_size_x) return {h:42,y:0};
  // compute current colon height
  var ratio  = stretch_values[x];
  var height = parseInt( colonHeight * ratio ,10);
  var posY = parseInt( (colonHeight - height)/2 ,10);
  return {h:height,y:posY};
}

// save this info for each out colon
var colon_info = [];
for(var x=0;x<=view_size_x;x++) colon_info[x] = getColonInfo(x);

// now a function to render a colon with a zoom

function renderColon(x,sourceX)
{    var info = colon_info[x];
     var originalHeight = colonHeight;
     var height = info.h;
     var y = info.y;
     // now do your reduce/blit magic here
     // render at "x","y" a colon with height of "height"
     // from source colon "sourceX" who get height of "originalHeight"

}

// and a function to iterate each colon and do the magic  

function my2dTo3d()
{
    for(x=0; x<=view_size_x; x++)
    {    var offset = x + view_start_x;
         renderColon(x,offset);
    }
}

確かにこれを行うためのより良い方法があります。ここで私はそれを手元に置いています。

于 2013-03-28T16:22:39.643 に答える