Spinner / waiting animation

Questions
1

I was wondering if there is an example of a spinner / 3 dot waiting animation for use in XR sessions. I need that for a video buffering indicator.

2

I don’t know if this helps: I have some programs that generate a black screen while loading all my image files, so I created a spinning black cube with an image of a propeller on front.

3

I found this which will work how I need it in XR sessions. But cant figure out how to integrate each of the circles to animate opacity how it needs it using the animation api. From the look of the api it seems you need to have an animation running for each circle. as a group will make them all animate opacity at the same time.

It needs to start/stop the animation also.

https://codepen.io/knee-cola/pen/wJmYqQ

4

actually that might be too hard to start/stop and too much processing. It just needs to be simple. Maybe just rotating the group mesh might be enough as an indicator. What us your rotation setup like ?

5

This is what I use. This prevents the main program from running until all the texture files have been loaded.

  1. As part of the Definition of Variables:
//- Loading Manager ------------------------------------------------------------
let loadingManager = new THREE.LoadingManager();
let RESOURCES_LOADED = false;
	loadingManager.onLoad = function(){
		console.log("loaded all resources");
		RESOURCES_LOADED = true;
		initAll();
	};
let txtrLoader = new THREE.TextureLoader(loadingManager);
let imagLoader = new THREE.ImageLoader(loadingManager);
let cubeLoader = new THREE.CubeTextureLoader(loadingManager);
let gltfLoader = new GLTFLoader(loadingManager);

//- Wait Screen Variables -------------------------------------------------------
let loadingScreen = {
	scene: new THREE.Scene(),
	camera: new THREE.PerspectiveCamera(90, window.innerWidth/window.innerHeight, 0.1, 100),
	box: 0
};
let boxrot = 0;
  1. The first step in the Loading Process is to call this Subroutine:
function WaitScreen() {
	// Set up the loading screen scene - it can be treated just like our main scene.
	let BoxGeo = new THREE.PlaneGeometry(1,1);
	let BoxTxt = txtrLoader.load("https://PhilCrowther.github.io/Aviation/textures/wait/prop.jpg");
	let BoxMat = new THREE.MeshBasicNodeMaterial({colorNode: texture(BoxTxt)});
	loadingScreen.box = new THREE.Mesh(BoxGeo,BoxMat);
	loadingScreen.box.rotation.set(Math.PI,0,0);
	loadingScreen.box.position.set(0,0,5);
	loadingScreen.camera.lookAt(loadingScreen.box.position);
	loadingScreen.scene.add(loadingScreen.box);
}
  1. The Rendering Routine Includes these Instructions:
if(RESOURCES_LOADED == false){
	boxrot = Mod360(boxrot - 3); // Rotates the Box - Mod360 limits the value to 0-360
	loadingScreen.box.rotation.set(Math.PI,0,boxrot * DegRad); // DegRad converts degrees to radians
	renderer.render(loadingScreen.scene, loadingScreen.camera);
	return;
}

Here is a program which uses the above.

A more modern approach would probably use await instead of the loading manager. But, until I find a better version, this approach still works - even with WebGPU.

6

Thanks. I figured out a different way. An SVG spinner asset that I rotate with AnimationClip. But having issues making a smooth constant rotation. About to make another post about that.