I have a couple of web app tools, Saola Animate and Opus Pro, (each can publish to HTML5,JS,CSS web app) with ability to create and display custom div’s which can run script libraries like three.min.js (included as part of the web app or via CDN).
I found a three.js animation on CodePen, but when I add it (HTML, JS, CSS) to a web app’s custom div, including external three.min.js library, src=" ", as a local file or CDN, and run the web app, locally or online, no joy, blank screen. The same HTML, JS and CSS in an index.html which points to the three.min.js script in the same folder, works/displays perfectly (local or uploaded to a web site).
I am wondering if I need to add any additional JS for example for webGL to my test web app, or something else needed, to get it to work/display in the web app’s custom div? Developer tools for example, when testing in FireFox, do not show any errors.
Do the developer tools show anything, besides errors? If you add a console log to the JS code, does that log appear in devtools? If not - the scripts are most likely not loaded at all.
Which version of three are you trying to import? Is that min file module or global scoped? Does console-logging value of THREE show contents of the library?
Not sure if I understood correctly, but you should not be placing CSS style tags as children of div tags - this is not valid HTML and may / may not work depending on the browser. Placing script tags as nested children, while valid, is also a risky idea since you can quickly lose the understanding of what is loaded and executed when.
As for the last question - nope, as long as you’re using a reasonably-recent browser (anything newer than 2013-2014 ), you should be good to go - just import three, and you can render stuff.
(1) Added “hello world” console.log to three.js script, and it displayed correctly.
(2) <script src="three.min.js"></script>
Not sure how to implement: “Does console-logging value of THREE show contents of the library?”
(3) Apologies for my explanation. CSS style tags are not children of divs. They are separate. I have written valid HTML.
(4) Once I can implement console logging for Three I can check if library contents are showing. Hopefully, if the Three library is loaded (this may be the problem), it should work?
Don’t just check the console in Dev Tools, also have a look at the network tab - this will show you what files are getting loaded and if they’re getting loaded successfully.
I checked the console log output (“Hello World”) by placing the console.log script into the full published output and separately into the external Three.min.js library script: both, when run, display the “Hello World” message…
I also, following the suggestion, checked the network tab, and the Three.min.js script is loaded and displaying.
I am puzzled. It appears that I have correctly added the HTML, CSS and JS from the Codepen animation example to the tool’s published web app, in its own custom div, no errors are showing in the console, the external Three.min.js is loaded and yet I get no animation. Just a blank screen with the one line of the animation’s instruction text showing (“Click on the boxes to make them go away!”).
I’ll re-check if I have accurately added all of the Codepen example’s items.
Other possibility is to use the dev tools HTML inspector - three.js uses an HTML canvas element to draw to. So you can check where that canvas is on screen.
After trying several possible solutions, decided that my publishing tool, especially its own JS, and the Three.min.js in this animation will not “play nice together.” Happens sometimes with this publishing tool, which is no longer being developed/updated. So, I will use a different animation for my project.
Thank you again for helping with troubleshooting/debugging the issue. These will be helpful strategies for future Three.js troubleshooting/debugging.
), you should be good to go - just import three, and you can render stuff.