WebGL的故事球彈出式菜單

Question

我試圖適應真的很酷的WebGL的故事球，源代碼和css here。有一個大問題：一旦您點擊新聞文章，彈出窗口中的文章文本始終是相同的。我想修改代碼，這樣當你點擊一篇文章時，右邊的文本會出現在彈出窗口中。

我從一組文章的文本，我在指定的代碼，例如工作var captions = ["good","better","best"]。雖然文章標題和圖像在彈出框中正確填充，但我無法獲取文本。你可以幫我嗎？？下面是我得到了什麼：

// function code 
var passvar = null; // failed attempt to store texts for later 
function initialize() { 
    math = tdl.math; 
    fast = tdl.fast; 
    canvas = document.getElementById("canvas"); 
    g_fpsTimer = new tdl.fps.FPSTimer(); 
    hack(); 

    canvas.addEventListener("mousedown", handleMouseDown, false); 
    canvas.addEventListener("mousemove", handleMouseMove, false); 
    canvas.addEventListener("mouseup", handleMouseUp, false); 

    // Create a canvas 2d for making textures with text. 
    g_canvas2d = document.createElement('canvas'); 

    window.two2w = window.two2h = g_tilesize; 

    g_canvas2d.width = two2w; 
    g_canvas2d.height = two2h; 
    g_ctx2d = g_canvas2d.getContext("2d"); 

    window.gl = wu.create3DContext(canvas); 
    if (g_debug) { 
    gl = wd.makeDebugContext(gl, undefined, LogGLCall); 
    } 
    //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, gl.TRUE); 

    // Here is where I specify article titles, images, captions 
    // Titles and images populate the popup correctly, captions don't... 

    var titles = ["a","b","c"]; 
    var captions = ["good","better","best"]; 
    var images = ['imagesphere/assets/1.jpg', 
       'imagesphere/assets/bp/2.png', 
       'imagesphere/assets/bp/3.png' 
       ]; 

    var headlines = titles.concat(titles); 
    var blurbs = captions.concat(captions); 

    var tmpImages = []; 
    var tmpHeadlines = []; 
    var tmpCaptions = []; 

    // make a bunch of textures. 
    for (var ii = 0; ii < g_imagesDownGrid; ++ii) { 
    var textures = []; 
    for (var jj = 0; jj < g_imagesAcrossGrid; ++jj) { 
     var imgTexture = new ImgTexture(); 

     textures.push(imgTexture); 
     if (tmpImages.length == 0) { 
     tmpImages = images.slice(); 
     } 
     if (tmpHeadlines.length == 0) { 
     tmpHeadlines = headlines.slice(); 
     } 
     if (tmpCaptions.length == 0) { 
      tmpCaptions = blurbs.slice(); 
     } 
     var rando = math.randomInt(tmpImages.length); 
     var img = tmpImages.splice(rando, 1)[0]; 
     var headline = tmpHeadlines.splice(rando, 1)[0]; 
     var caption = tmpCaptions.splice(rando, 1)[0]; 
     passvar = caption; 

     if (img.indexOf('videoplay.jpg') > -1){ 
     window.vidtexture = imgTexture; 
     images = images.slice(1); // dont use that thumb again. 
     headlines = 'WebGL Brings Video To the Party as Well' 
     } 

     imgTexture.load(img, /* "[" + jj + "/" + ii + "]" + */ headline); 
    } 
    g_textures.push(textures); 
    } 

    // And here's where I try to put this in a popup, finally 
    // But passvar, the stored article text, never refreshes!!! 

<div id="story" class="prettybox" style="display:none"> 
    <img class="close" src="imagesphere/assets/close.png"> 
    <div id="storyinner"> 
     <input id = "mytext"> 
      <script>document.getElementById("mytext").value = passvar;</script> 
    </div> 
</div> 

這裏是我的點擊處理代碼：

function sphereClick(e){ 
    window.console && console.log('click!', e, e.timeStamp); 

    var selected = g_textures[sel.y][sel.x]; 
    window.selected = selected; 

    animateGL('eyeRadius', glProp('eyeRadius'), 4, 500); 

    var wwidth = $(window).width(), 
     wheight = $(window).height(), 
     story = $('#story').width(~~(wwidth/7 * 4)).height(~~(wheight/6 * 5)), 
     width = story.width(), 
     height = story.height(), 
     miniwidth = 30; 

    story.detach() 
    .find('#storyinner').find('h3,img,caption').remove().end().end() 
    .show(); 

    story.css({ 
    left  : e.pageX, 
    top   : e.pageY, 
    marginLeft : - width/2, 
    marginTop : - height/2 

    }).appendTo($body); // we remove and put back on the DOM to reset it to the correct position. 

    $('style.anim.story').remove(); 
    $('<style class="anim story">') 
     .text('.storyopen #story { left : ' + (wwidth/3 * 2) + 'px !important; top : ' + wheight/2 + 'px !important; }') 
     .appendTo($body); 
    $(selected.img).prependTo('#storyinner').parent(); 

    $('<h3>').text(selected.msg.replace(/\(.*/,'')).prependTo('#storyinner'); 

    $body.addClass('storyopen'); 


} // eo sphereClick() 

Answer 1

有很多錯在這裏，但這裏是一個開始。它不會解決你的問題，但它會幫助你避免這樣的問題。

---

var passvar = null;是一個全局變量。

你的循環for (var ii = 0; ...集，全局變量在每次迭代新值。

後來，你點擊的東西和全局變量passvar是從來沒有改變過。

如果你想使用這個模式，你需要從你的點擊處理程序設置passvar所以它被點擊的價值。由於您實際上沒有發佈點擊處理程序，因此很難提供更多建議。

---

但是，這也是一個不好的模式，函數有一個很好的理由參數。既然你必須在點擊處理程序中找到你點擊的項目，爲什麼不直接傳遞它，這涉及到一個共享的全局變量呢？

var handleMouseUp = function(event) { 
    var story = findClickedThing(event); 
    if (obj) { 
    showPopup(story.texture, story.caption); 
    } 
} 

---

這使我想到這一點：

var titles = ["a","b","c"]; 
var captions = ["good","better","best"]; 
var images = ['imagesphere/assets/1.jpg', 
       'imagesphere/assets/bp/2.png', 
       'imagesphere/assets/bp/3.png' 
       ]; 

當你有3列，長度都相同的，每個陣列描述對象的不同屬性，你是做錯誤的。你想要的是一個而不是對象數組。

var stories = [ 
    { 
    title: "a", 
    caption: "good", 
    image: "imagesphere/assets/1.jpg" 
    }, { 
    title: "b", 
    caption: "better", 
    image: "imagesphere/assets/bp/2.jpg" 
    }, { 
    title: "c", 
    caption: "best", 
    image: "imagesphere/assets/bp/3.jpg" 
    }, 
]; 

console.log(stories[1].caption); // "better" 

現在一旦找到點擊的對象，你可以問它它是什麼標題。您可以將整個對象傳遞給彈出窗口製造商。沒有任何領域的處理方式不同，或者以不同的方式傳遞，因爲你沒有在場地周圍傳球。你是傳遞整個對象。