我正在尝试创建一个由多个360度图像组成的图库.我想使用Valiant360,因为它似乎完成了我需要做的所有事情.
通过Angular的启动工作非常好,但现在我正处于我想要实现多个图像的地步,它只是不起作用.
没有错误,没有日志,没有.
所以这是我的代码......
在html模板中:
{{image.description}}
在相应的js内的控制器中:
var container = $('.valiantPhoto'); laden.success(function (data) { $scope.laden = data; console.log(data); $timeout(function () { container.Valiant360({ hideControls: false, fov: 35, fovMin: 35, fovMax: 35, clickAndDrag: true }); }); }); $scope.loadImage = function (id) { var image = $scope.laden.images[id].image; var mimage = $scope.laden.images[id].mimage; if ($('.view__content--360gallery').height() > 300) { container.Valiant360('loadPhoto', image); } else { container.Valiant360('loadPhoto', mimage); } }
我操纵原始插件js有日志,那里的功能现在看起来像这样:
loadPhoto: function(photoFile) { console.log("Loading..."); this._texture = THREE.ImageUtils.loadTexture( photoFile ); console.log("Loaded: ", photoFile); };
我已经花了半天时间试图解决这个问题,但我没有看到它.显然,我不是唯一一个有这个问题的人,你可以在这里看到:https://github.com/flimshaw/Valiant360/issues/29但我没有使用jQuery插件的经验,除了使用工作.所以这可能是一个非常明显的错误,但是,如果有人能够把我推向正确的方向,我将非常感激......
编辑:我做了一些搜索,发现这个/sf/ask/17360801/
我的功能现在看起来像这样,我从插件中的loadPhoto获取日志:
$scope.loadImage = function (id) { console.log("Container Height: ", $('.view__content--360gallery').height()); var image = $scope.laden.images[id].image; var mimage = $scope.laden.images[id].mimage; var temp = container.Valiant360().data('plugin_Valiant360'); if ($('.view__content--360gallery').height() > 300) { temp.loadPhoto(image); } else { temp.loadPhoto(mimage); } }
所以基本上问题解决了:)