Нарисуйте цилиндр html5 с изображением камеры внутри цилиндра

Question

Я думаю, что заголовок не требует пояснений. Мне нужно построить цилиндр холста html5 с видом камеры в центре цилиндра. На стене цилиндра мне нужно построить что-то вроде изображений, цилиндр вращаться и увеличивать.

Если у кого-то есть указатели относительно того, где начать с камеры и цилиндра, пожалуйста, помогите.

Чтобы помочь вам понять мое описание я разместил изображение http://s21.postimg.org/fpnmukbef/inside_cilindre.jpg

Answer 1

я думаю, что вы должны работать на 2-е картинки и на последний шаг преобразования необходимой части

превратить хорошую часть в 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); 
    } 
} 

ОК, конечно, лучший способ сделать это, здесь я делаю это под рукой, возможно, css3?