3D FlipBook - Fail three.min.js
m***o@knowmadmood.com
2023-11-15
2023-11-16
Hi,
I purchased the library and everything seemed fine during the implementation until I encountered an error related to three.min.js.
The error is as follows:
three.min.js:55 Uncaught TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'. at kf (three.min.js:55:114) at new Ug (three.min.js:73:17) at Wg.acquireProgram (three.min.js:83:200) at p (three.min.js:168:61) at k (three.min.js:172:130) at je.renderBufferDirect (three.min.js:196:201) at e (three.min.js:99:399) at e (three.min.js:100:54) at e (three.min.js:100:54) at e (three.min.js:100:54)
It enters into an infinite loop...
What could be the reason for this?
Thanks!
Replies
© All rights reserved
After the scripts have been loaded and everything is defined, I run the following in the console, which is the initialization of the PDF:
var path = 'http://xxx/js/assets/js/flipbook'; var template = { html: path + '/templates/default-book-view.html', links: [{ rel: 'stylesheet', href: path + '/css/font-awesome.min.css' }], styles: [ path + '/css/short-black-book-view.css' ], script: path + '/js/default-book-view.js' }; var ourdiv = $('div.freepaper-flipbook-container'); ourdiv.each(function(ele) { var pdfpath = $(this).attr('src');
jQuery(this).FlipBook({ pdf: pdfpath, template: template });
});
And it works... I don't understand.
Solved:
I had to initialize the object in this way in order to fully initialize the library... I needed everything to be loaded beforehand.
$(window).on('load', function() { var path = ......./js/assets/js/flipbook'; var template = { html: path + '/templates/default-book-view.html', links: [{ rel: 'stylesheet', href: path + '/css/font-awesome.min.css' }], styles: [ path + '/css/short-black-book-view.css' ], script: path + '/js/default-book-view.js' }; var div = $('.flipbook-container'); div.each(function(ele) { var pdfpath = $(this).attr('src');
$(this).FlipBook({ pdf: pdfpath, template: template });
}); });