import * as THREE from "https://ui-unicorn.co.uk/game-lesson-1/js/three.module.js";
            import TWEEN from "https://ui-unicorn.co.uk/game-lesson-1/js/tween.esm.js";
            import { RGBELoader } from "https://ui-unicorn.co.uk/game-lesson-1/js/RGBELoader.js";
            import { OrbitControls } from "https://ui-unicorn.co.uk/game-lesson-1/js/OrbitControls.js";
            import { GLTFLoader } from "https://ui-unicorn.co.uk/game-lesson-1/js/GLTFLoader.js";
            import { RoughnessMipmapper } from "https://ui-unicorn.co.uk/game-lesson-1/js/RoughnessMipmapper.js";
            import { CSS2DRenderer, CSS2DObject } from "https://ui-unicorn.co.uk/game-lesson-1/js/CSS2DRenderer.js";

import { gsap } from "https://ui-unicorn.co.uk/game-lesson-1/esm/gsap-core.js";

import { Flow } from "https://ui-unicorn.co.uk/game-lesson-1/js/CurveModifier.js";

            var container, controls;
            var camera, scene, renderer, loaderGL, time, mixer, mixer2, mixer3, mixer4, mixer6, mixer7, mixer8, mixer9, clock, labelRenderer;
            var raycaster, mouse, tween;
            var model, model2, model3, model4, model5, model6, model7, model8, model9;
            var cubefix, cube, cube2, cube3, cube4, cube5, character, Characterm, Monster0, score, gltfPlayer, gltfMonster, isZoomed, gltfC1, gltfC2, gltfC3, gltfC4, gltfC5;
            var action, action3, action0, action2, action4, action5, action6;
            var nearFog, farFog, densityFog, colorFog, colorFog2;
            var hotspotLabel1, hotspotLabel2, hotspotLabel3, hotspotLabel4;
            var materials = [],
                parameters;
            var mouseX = 0,
                mouseY = 0;
            var timerAnimate;
            var CH0, CH, CH3, CH4;
			 var game_loader_count = 0;
			 var observer, text, checkText, partcount, StartButton, ButtonStart;
			var fov, aspect, near, far;
			 var fraction, pointsPath, char, axis, up, newPosition, tangent, radians, flow, objectToCurve;

 
scene = new THREE.Scene( );
 camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 1, 3 );
 renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
new  OrbitControls( camera, renderer.domElement );
 var pmremGenerator = new THREE.PMREMGenerator(renderer);
                pmremGenerator.compileEquirectangularShader();

  new RGBELoader().setDataType(THREE.UnsignedByteType).load("https://ui-unicorn.co.uk/game-lesson-1/royal_esplanade_1k.hdr", function (texture) {
                    var envMap = pmremGenerator.fromEquirectangular(texture).texture;
                    scene.environment = envMap;

                    texture.dispose();
                    pmremGenerator.dispose();
                    var roughnessMipmapper = new RoughnessMipmapper(renderer);
                    var loader = new GLTFLoader();

           

                        loader.load("https://ui-unicorn.co.uk/game-lesson-1/scene2.glb", function (gltf5) {
                             objectToCurve = gltf5.scene;
                        
                        gltfC5 = gltf5;
                        gltf5.scene.traverse(function (child4) {
                            if (child4.isMesh) {
                                loaderGL++;
                                roughnessMipmapper.generateMipmaps(child4.material);
								console.log("LOADER TEXT NUMBERS 5", loaderGL);
                            }
                        });

                        gltf5.scene.scale.set(0.0027, 0.0027, 0.0027);

                        gltf5.scene.position.set(-0.5, -0.63, -2);
                        
loaderGL+=10;
                        scene.add(objectToCurve);
                        roughnessMipmapper.dispose();
   mixer4 = new THREE.AnimationMixer(objectToCurve);
                            action6 = mixer4.clipAction(gltfC5.animations[3]);
                            action6.play();

                            //Load End



                
            });
		        
                   
                  
                  
                  });

const somePoints = [

	new THREE.Vector3(  1,   0, -1 ),
	new THREE.Vector3(  1, 0.6,  1 ),
	new THREE.Vector3( -1,   0,  1 ),
	new THREE.Vector3( -1, 0.2, -1 ),
	
];

const curve = new THREE.CatmullRomCurve3( somePoints );	
curve.closed = true;

const points = curve.getPoints( 60 );
const line = new THREE.LineLoop( new THREE.BufferGeometry( ).setFromPoints( points ), new THREE.LineBasicMaterial( { color: 0xffffaa } ) );
scene.add( line );

const light = new THREE.DirectionalLight( 0xc0c0c0 );
light.position.set( - 8, 12, 10 );
light.intensity = 1.0;
scene.add( light );

const geometry = new THREE.BoxGeometry( 0.2, 0.08, 0.05 );
const material = new THREE.MeshPhongMaterial( { color: 0x99ffff, wireframe: false } );


 flow = new Flow( objectToCurve ); 
flow.updateCurve( 0, curve );
scene.add( flow.object3D );

animate( );

function animate( ) {

	requestAnimationFrame( animate );
	flow.moveAlongCurve( 0.0006 );
	renderer.render( scene, camera );

}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js