GLTFloader not working in Firefox, Opera, Edge

Questions
,
22

@Darcey
i noticed the behavior of some forum members.
but it does not bother me, most i can find on my own without asking on forums cause the internet is full of solutions

i got passed the: gulp build
i had to reboot my PyCharm before i do the build command

but it did not build the app.js and the app.min.js in my js folder???

this is the log from the build

Microsoft Windows [Version 10.0.18363.592]
© 2019 Microsoft Corporation. All rights reserved.
D:\Create_Web\000-NPM-Gulp-EMPTY\Basic-NPM-Gulp-Project>gulp build
[13:55:05] Using gulpfile D:\Create_Web\000-NPM-Gulp-EMPTY\Basic-NPM-Gulp-Project\gulpfile.js
[13:55:05] Starting ‘build’…
[13:55:05] Starting ‘buildJsDev’…
[13:55:05] Starting ‘buildLibsProd’…
[13:55:05] Finished ‘buildJsDev’ after 8.82 ms
[13:55:05] Finished ‘buildLibsProd’ after 11 ms
[13:55:05] Finished ‘build’ after 13 ms
events.js:200
throw er; // Unhandled ‘error’ event
^

Error: File not found with singular glob: D:/Create_Web/000-NPM-Gulp-EMPTY/Basic-NPM-Gulp-Project/node_modules/aftc.js/dist/aftc-min.js (if this was purp
oseful, use allowEmpty option)
at Glob. (D:\Create_Web\000-NPM-Gulp-EMPTY\Basic-NPM-Gulp-Project\node_modules\glob-stream\readable.js:84:17)
at Object.onceWrapper (events.js:313:26)
at Glob.emit (events.js:223:5)
at Glob.EventEmitter.emit (domain.js:475:20)
at Glob._finish (D:\Create_Web\000-NPM-Gulp-EMPTY\Basic-NPM-Gulp-Project\node_modules\glob\glob.js:197:8)
at done (D:\Create_Web\000-NPM-Gulp-EMPTY\Basic-NPM-Gulp-Project\node_modules\glob\glob.js:182:14)
at Glob._processSimple2 (D:\Create_Web\000-NPM-Gulp-EMPTY\Basic-NPM-Gulp-Project\node_modules\glob\glob.js:688:12)
at D:\Create_Web\000-NPM-Gulp-EMPTY\Basic-NPM-Gulp-Project\node_modules\glob\glob.js:676:10
at Glob.stat2 (D:\Create_Web\000-NPM-Gulp-EMPTY\Basic-NPM-Gulp-Project\node_modules\glob\glob.js:772:12)
at lstatcb (D:\Create_Web\000-NPM-Gulp-EMPTY\Basic-NPM-Gulp-Project\node_modules\glob\glob.js:764:12)
Emitted ‘error’ event on Domain instance at:
at DestroyableTransform.EventEmitter.emit (domain.js:493:12)
at Pumpify.emit (events.js:223:5)
at Pumpify.EventEmitter.emit (domain.js:475:20)
at Pumpify.Duplexify._destroy (D:\Create_Web\000-NPM-Gulp-EMPTY\Basic-NPM-Gulp-Project\node_modules\duplexify\index.js:191:15)
at D:\Create_Web\000-NPM-Gulp-EMPTY\Basic-NPM-Gulp-Project\node_modules\duplexify\index.js:182:10
at processTicksAndRejections (internal/process/task_queues.js:76:11) {
domainEmitter: DestroyableTransform {
_readableState: ReadableState {
objectMode: true,
highWaterMark: 16,
buffer: BufferList { length: 0 },
length: 0,
pipes: [DestroyableTransform],
pipesCount: 1,
flowing: true,
ended: false,
endEmitted: false,
reading: true,
sync: false,
needReadable: true,
emittedReadable: false,
readableListening: false,
resumeScheduled: false,
destroyed: false,
defaultEncoding: ‘utf8’,
awaitDrain: 0,
readingMore: false,
decoder: null,
encoding: null
},
readable: true,
_events: [Object: null prototype] {
end: [Array],
prefinish: [Function: prefinish],
pipe: [Function],
data: [Function: ondata]
},
_eventsCount: 4,
_maxListeners: undefined,
_writableState: WritableState {
objectMode: true,
highWaterMark: 16,
finalCalled: false,
needDrain: false,
ending: true,
ended: true,
finished: true,
destroyed: false,
decodeStrings: true,
defaultEncoding: ‘utf8’,
length: 0,
writing: false,
corked: 0,
sync: true,
bufferProcessing: false,
onwrite: [Function],
writecb: null,
writelen: 0,
bufferedRequest: null,
lastBufferedRequest: null,
pendingcb: 0,
prefinished: true,
errorEmitted: false,
bufferedRequestCount: 0,
corkedRequestsFree: [CorkedRequest]
},
writable: false,
allowHalfOpen: true,
_transformState: {
D:\Create_Web\000-NPM-Gulp-EMPTY\Basic-NPM-Gulp-Project>

23

Could be your development environment… try install gulp globally via “npm i gulp -g”. I don’t work with python so I can’t help you with that stuff.

Here’s the project I created in the video:
https://dev.aftc.io/webgl/assist-projects/shakena-glb/NPM-Gulp-Example-Project.zip

There are code comments in the gulpfile.js etc it says the output path in the code, test, tryout, search for file on file system if you cant find it and see what went wrong… Absolute path issue? Relative path issue? / vs ./ etc I setup the project to work relative.

24

played with it all afternoon, checked google, checked JetBrains… seems like this is above my paygrade
tried VScode aswell PyCharm and VScode give same error, does not matter

Added paths to windows environment
installed gulp Globally, and to dev Project
something is wrong in the basic setup… that i know… else not all softwares would spit out same error

and the error i dont understand and when looking into the files where it points towards i dont get what i see there…

uninstalled Node.js and cleaned all the folders, and re-install
went to JetBrains forum to see how i have to install Gulp, did all exactly like they describe… same result
somehow the installed gulp is not accepted, cause it does not turn a orangy, it stays blue color in PyCharm, that means the module is not recognized
let PyCharm build a gulpfile, same error

out common sense about this… have absolutely no clue what is going on or how to fix it…

25

if you have time and want to check my environment, i can setup a teamview session

26

I’m in work…

  1. Open CMD (DOS) window
  2. CD to project folder, just for testing keep path short and no spaces
  3. copy the zip contents I gave to you there
  4. Type DIR this should list contents of dir and package.json and gulfile.js should be in the list
  5. Type “npm install” (no quotes) this will install all the bits setup in package.json as per my video and the node_modules folder will appear
  6. Buld the JS project. Type gulp build
    Video of me doing this below…

If you get an error, install OBS and screen record what your doing and upload it to youtube, share the link to the video and I will check it when I can.

Remember getting errors is a good thing, means you will learn a lot more than if it just worked straight away with no issues.

27

yes, did learn a lot indeed… just not enough… :wink:
very excited to learn it this way…

when i opened your project in PyCharm it asked me to install all the modules from this project, so i did and then i added a own function to the MyApp in the src folder

when i then did a gulp build, it did update the app.js in the js folder.

so i seems to be working… cheers to that…
thank you… now it is the task to figure out where to put my code so it will work as well… hehehe… i got my evening filled with new stuff… thank you for helping me…

a good working template for the next coming months i do have now… i hope you can spare some time to help me with the check off my environment, so that i can also generate new projects with latest THREE versions

or does he install the latest versions automatically when i install all the modules during first run?

have a great day… gonna dive in… let me know if and when you have time for the environment check…

28

npm i three
will always intalls the latest version that the threejs creators have put online, however…

npm install uses package.json
if package.json has three listed in the dependencies or developmentDependencies sections then it will install the version is listed in the package.json

You need to youtube search NPM tutorials. npm un three will uninstall three from package.json etc

RE: Where to put your three app…
Well you build it into the empty ES5 MyApp function I created… There are code comments in it how variables are scoped to that function. Scope means whether a variable is visible to a function only, or a class or globally. Global scope is often ref’d to as window scope eg window.myvar = 4; myvar is global. Working in the MyApp function variables and functions inside that are scoped to that function and that function alone. It keeps things clean.

29

working on it right now, trying to get my animation running in a div
will send you a link when done… :wink:

30

tadaaaa…
https://www.ieoie.nl/GulpTesting/

with .zip file, it is working…
it looks like it is way more faster now when i use the OrbitControls…
bit getting use to… not seeing on which line of code the error is…
but creating and building step by step, and not create many things and then do a build…
will get there one day… :wink:

super… thank you very much and a little more…!!!

now lets build the intro of my new website…awesome…

still have to get that project building done one day… till then i can see a work-around… i can build a new project with npm, then when i see what version three has i can change the version number inside the package.json of todays template project and it will also download the latest three…
there is always a way…

31

Nice 1

You can have gulp auto re-build when you make a change to any js file. At the bottom of gulpfile.js add the following… It should work but I’ve not tested it…

gulp.task("watch", function(){
    gulp.watch([
        "./src/**/*.js"
    ], gulp.parallel(buildJsDev, buildLibsProd));
});

It’s either that or chance “./src/**/.js" to "./src/.js” or add both eg

    gulp.watch([
        "./src/*.js",
        "./src/**/*.js"
    ],

Then you can just type:

gulp watch

and each time you make an edit to any javascript file in the src folder it will re-build. If you add new libraries via npm then you need to press CTRL + C and re-run the build and watch commands as they only scan package.json on start and not each build or modification to the gulpfile.js

32

Yes, I’ve complained about the orbitcontrols some years ago being overly sensative and lacking any decent inertia. If you want easy orbitcontrols then sadly you have to write something yourself or switch to babylonjs which has controls which are super smooth with great inertia, its much like threejs.

33

for now i like the OrbitControls… it showed me clearly how i am building now, the project is faster than my yesterday way… want to familiarize myself first with one language, jumping from language in the beginning to another is not such a good game plan for me now, have many things on my learning plate… probably later when i am going to re-build my video animations into 3d objects… thats an aim… have my video’s animated in a websie, and viewers can look at them from their prefered angle. then descent inertia would make the user experience way better, i agree… i will see when i get there…

its still a long way to go for me… have big plans…
learning all over the place… from Maya3D to Blender, HTML CSS JavaScript THREE… its a steep learning curve… but well on my way i think…
next to that i am trying to learn pure CGI math, so i can build dynamical edges and surfaces, this math is really difficult, i asked many people, most said its easy, but none could do it… so thats something i do on the side… if i have time for it, and hoping i find one day a really smart dude or dudette who can teach me… need it if i ever want to build my game… it aint easy being an artist with digital goals…:wink:

in PyCharm i can configure a RUN button, i liked it now to the gulpfile so i just press a button and the build is done, no typing “gulp build” anymore

when i boot PyCharm it notices which dependency are missing and ask me to install those

if you do not know, or did not test it… i will surely not burn my fingers on it… hahaha…

so in a sense, i think i have most things covered to play for a few months/years with the base i have now thanks to you…
very happy guy…:wink:

34

the tools from JetBrains are realy neet for a guy like me.
hey do a lot for me, and help me learn faster… and not expensive…

35

I use phpstorm often but its a real slug and massive memory hog. Some projects I work on require me to edit its config to allow it to use 3gb of ram and even then its still slow. Some pretty shitty programming from the jetbrains crew, and WebStorm ain’t much better either.

Heres the Babylon arcrotate camera give it a click and drag its got a very nice feel to it. https://www.babylonjs-playground.com/#SRZRWV#1 and just 1 line of code.

If you want to see cool 3D stuff youtube search scene.org, some of the 64kb competition entries are insane, especially for 64kb or less eg these were done in 64kb or less and no internet streaming, single 64kb file.

From 2016

And an old one from 2004 and yes only 64kb

Also checkout shadertoy website, some very cool stuff on there.

36

PyCharm is in my Maya Coding also a bit sluggy because of the large project, but got much rams on machine so it does not really matter that much… like it very much… and i aint that fast of a coder anyway…

looked at the Babylon stuff… looks easier to code, and realy smooth orbit controls indeed… lovely… but render quality is less as far as i can see in my quick look, think three.js is a good platform for my needs, it also has a large helpfull community, thats also very important for me when learning…

awesome these 64kb files… some people are just beyond…hehe…

37

Render quality is pretty much idential to three, same features at the end of the day but threejs does end up on the smaller file size. That link was just a playground demo of some rubbish scene, if you want to see what it can do checkout the home page or:

All using the ArcRotate camera…

But threejs can do all this also, some may take a bit more work but others less, choose the right tool for the right job :wink:

But checkout the threejs examples for what it can do and it’s lots too:

https://threejs.org/examples/
https://threejs.org/examples/#webgl_materials_envmaps

But that ArcRotateCamera from Babylon is awesome, well most of the camera’s in Babylon are just much nicer to work with.

Here’s a nicer manual camera movement setup using three but you would need to patch in mouse up and mouse down x and y and handle distance drag / touch etc to get it all setup nice.
https://threejs.org/examples/#webgl_materials_cubemap_balls_reflection

38

It’s worth noting that THREE.OrbitControls has .enableDamping option. I dont think it’s as smooth as Babylon’s, but it’s pretty close and probably can be manually adjusted to your preference.

1 Like
39

can we mix three and babylon?

think best approach for me now is to build a scene in Three, then build the same in Babylon.

then i can do good comparison…:wink:

40

do you have an example on how to implement the update of the damping?

41

Please read the documentation link I posted. Three.js has the best documentation in the whole world.

Basically just set your controls.enableDamping = true.
Then if controls.enableDamping or controls.autoRotate are set to true, you also have to call controls.update() in your animation loop.
You can adjust the damping factor with controls.dampingFactor (values from 0.0 to 1.0 I believe).

1 Like