Question

我正在尝试调整非常酷的WebGL Story Sphere，源代码和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"

现在，一旦找到被点击的对象，您就可以问它标题是什么。并且您可以将整个对象传递给弹出窗口制作器。并且不会以不同的方式处理字段或以不同的方式传递字段，因为您不会在字段周围传递。您传递整个对象。

webGL故事领域弹出窗口

1 个答案: