amazing, indeed not as good as in Babylon, but it works very easily…
thank you…
love this 3d website building…
Yes, but not recommended…
Yes but it’s nowhere as near as good as any of the camera controls in babylon, its silky smooth. But I’m used to doing things myself as back in the Flash Away3D / Papervision days you had to do the mouse events etc yourself and the code is virtually identical these days.
Threejs orbit controls has dampening:
https://threejs.org/docs/#examples/en/controls/OrbitControls
If you want to do it yourself with a bit more smoothness and control without values in the 0.0003 ranges etc then you need to ref’ to that link I gave you or look for better examples in the threejs examples where it’s done via that method and not orbit controls and review the code.
Here’s a 2D implementation of an inertia equation.
It’s part of my aftc-modules package, function inertiaTo()
export function InertiaTo(current,target,amount){
if (amount == 1) {
return target;
}
let distToGo = target - current;
let delta = current + (distToGo * amount);
if (Math.abs(distToGo) < 0.01) {
distToGo = 0;
delta = target;
}
return delta;
}
Just try not to start processing extremely small numbers as you can see I cut it off at 0.01 to snap to 0.
Alternative, kinda
You could always use a tween library (eg gsap) to go from 1 location to another but that is not orbit controls / arc rotate camera controls. I use this to move cameras and lookat targets around in predefined spaces activated via menu buttons etc.
2 Likes
do you have documentation on the AFTC-modules
really curious what is all inside and how to use it…
saw something like animated colors… was looking for that today on the web… used css now…
since i only now use the onReady…
the app.min.js can become a lot smaller…
working on a contact form now… when ready i have a link to share…
Remember every package you install comes from npmjs / github…
You can look any package up on npmjs.com and it will have the link to the github repository there too, best to go to github as npmjs often screws up the documentation file that comes from github aka the readme.md file.
NPM is a tool from npmjs.com
NPM links a package name to a repository on github basically, so when you type npm i aftc.js, what actually happens is the tool NPM, queries it’s server (npmjs.com) for the package name aftc.js and if found uses it’s github repository link to download that package to your node_modules folder.
I created aftc.js and aftc-modules.js both are on npmjs.com and github.com.
aftc.js is the one you should be using, it’s built in the classic javascript way (ES5 and is IE friendly also) and is fine for gulp use. And if you want to customise it’s build you can, i’ve even documented how to do this on the github page, it’s the same build process I used for your example project.
aftc.js compiles/builds 4 files, 1 is just the core features, compressed and non-compressed aka minified. And the other is everything included, minified and non-minified. I think aftc.core.min.js is only 4kb and aftc.min.js is only 44kb so I would worry about file sizes as that’s tiny.
There’s far too much in it to maintain the documents but it’s pretty obvious what each command does, I name them exactly what they do. I did create a codepen for each at one time but codepen was always changing and it’s too much bother to keep every pen maintained.
You can find documentation on the functions it gives you at:
aftc-modules is the migration of aftc.js to the newer modules approach for javascript, it’s good for webpack projects where tree shaking can reduce file size to only the functions that are used in your projects. As your using gulp, best to stick with aftc.js. I’m not sure if I included inertaTo in aftc.js though, I need to check that.
I’ve not really done much with the documentation on this one yet as I’m still migrating a lot of stuff to it but it’s 70% there. Just open the node_modules folder and take a look at either the src directory for categories and each function and file correlates, or just open aftc-modules.js and just read through the function names, they are named exactly what they do.
I often just include aftc.core.min.js in the html file to ensure I have loadJS, onReady, log and logTo available. I hate typing console.log all the time, so I shortcut to log and logTo
Typescript versions of each javascript function export in aftc-modules will come soon after I completed the migration and after adding various tools such as:
Viewport Handler (3.6KB) - manages touch swipe and scroll
AnimationFrameStack (1.6KB) - I think I added this already but it allows you to push your render loop function to a single animation stack and disable them or remove them as and when needed, so you can do gpu fps based load balancing or just switch content and easily turn on and off rendering of those canvas elements as and when needed.
AttachKeysToVec3 (5.4kb) - Allows the control of upto 2 object of position vector3 in threejs or babylonjs via keys. Object 1 is controlled via QWEASD (W&S z axis, A&D x axis, Q&E y axis), and Object 2 is controlled via Number pad 789456 (same movement QWEASD). This is great for attacking to a lookat object and the camera so you can play with movement and camera positioning.
FPSMonitor (1.7kb) - Stack based FPS median calculation which can be queried to get the fps value, so you can react to the fps value.
EventManager (1.4kb) - Still debating on attaching this, but has prooven useful for many a project. Basic global scope event stack which you can attach functions/callbacks to and execute from anywhere in your application. EG EventManager.addEventListener() or em.add() and em.dispatch(“evtname”), em. remove etc.
PositonHelper - bolts onto three and babylonjs vector3 positions and puts a visual object at that location to assist with position of anything, great for lights etc.
AttachDebug - I think that’s already in, visual debug aids which are fixed and you can use logTo, so if your logging something in a render loop you can crash the browser with too much junk in there, then log it to a html element instead and no crash.
lol I got carried away… 
1 Like
you busy person… and acknowledged…
awsome… learned a lot… thank you for helping out this newby…
put this list of modules in a word doc and will look at them tomorrow more closely…
working on my underconstruction intro all day… mail form is almost ready…
was trying to load my own custom fonts but it wont be happening, Cross-Origin Request Blocked:
what i read its important for website protection so probably look for some nice googlefonts…
think tomorrow it will be ready…
will show you the result… i’m very happy with how its going…
Load them from google, choose which one you want there, try to keep it to 1 font 3 different wieghts but 2 fonts or at worst 2 fonts 2 different weights (bold & regular/normal).
I often download open the css link that google generates on the link they supply and download the latin (not extended) woff and woff2 font files locally and then take the css and use it in my own css so everything is local to the site. NOTE: To get google to give you woff font links you have to open the link they give you in IE.
CORS is important but it can be a pain sometimes. You can link to external sources from domain to domain but it needs to have allow cross origin headers set correctly. I handle this typically serverside via php. depending on what I’m trying to do.
tadaaaa…
www.ieoie.nl
intro plus mailform
think i got everything done like a pro…
fetched even the change of screensize when a keyboard is being used on a mobile device
only the thank you php file when you send a mail…
cannot access the php file to style the button and text…
also trying to access the htacces file so i can hide the link of the send.php…
so still some things to do… but i’m happy and proud as it is now…
if you see things that are not correct or could be better, please let me know…
www.ieoie.nl/Downloads/dist.zip
i am looking for ways to schrink the animated vFX_CubOcta.glb file, so i can also optimize download speed…
styling is a html & css thing (more css than html);
<?php
// php mail command returns a true or false if successfull or not
// see php location header to redirect page to error or success (link below)
if (mail(etc etc etc)){
echo("sucesss");
} else {
echo("fail");
}
Check links:
https://www.w3schools.com/php/func_mail_mail.asp
&
https://www.php.net/manual/en/function.header.php
D
1 Like
good tip, separated the php & html in different documents, thank you notice is css controllable again…
last question on this thread…
have been testing on different devices & browsers
have as far as i see one bug left… and cannot find anything on the internet about it…
my phone, Huawei P30, and Samsung S6, Chrome…
- when i go back to the website after filling in the mailform
- have button with simple href link.
- when i am on the site with animated geometry and press F5 or reload
this only happens in Chrome on phone, FireFox on phone no problems… did not check on tablets yet cause i dont have one
i tried deleting the cache and browser history of Chrome
document.location.reload();
javascript:location.reload();
tried to change the order in which my functions are being called…
updated Chrome…
the strange thing is, the first thing i do is ask for the 2 variables browser.width and browser.height, and these 2 are the solid foundation for everything else, like scaling and positioning.
they define the three canvas size, the size of the camera etcetc… so it seems Android Chrome does not refresh my javascript
so does any of you know why is this happening… and how to fix it…???
sofar all devices i used for testing… all was going well… Chrome desktop NP, also not when i scale the browser really small… by refresh they all end up with a beautifull animated geometry at the centre of the page…
only this android chrome… is messing with my creation…
any toughts…???
fixed it…
the problem was that on refresh the page was scaled, like zoomed in…
when i set it to user-scalable=no
the issues was solved… yihaaaa…
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<meta name="viewport" content="width=device-width, user-scalable=no">
figured out why the gulp build did not work, a typo in a path
got a working setup for gulp now, incleded copy html, imagemin, cssnano and a watcher
thank you…